BootstrapとjQueryを使用したTODOリスト作成シリーズのPart3になります。
これまではTODOリストで完了した項目は画面から削除していました。今回はTODOリストとは別に、完了したリストを作成します。そして、完了した項目はTODOリストからは削除し、完了リストに追加します。
TODOリストと完了リストの表示は、タブを使用してリストの切り替えを可能にします。タブを使用することで画面デザインの表現方法を広げられたらという意図です。
それでは、完成したTODOリストを確認するために、下のGIFを再生してみてください。
TODOリストで完了したタスクを完了リストに移動するようにしました。
リストの切り替えはBootstrapのnavを使用しています。作成時間：1時間（前回のソースを流用）#jQuery #Bootstrap pic.twitter.com/8xE8bzlot2
— たけのこ (@takenoko_blog) June 21, 2018
HTML
HTMLのポイントは二つになります。
- 54行目から65行目で「未完了のタスク」と「完了したタスク」2つのタブを表示
- 68行目から105行目で「未完了のタスクリスト」と「完了したタスクリスト」を表示
注意すべき点として、56行目と70行目のidを一致させる必要があります。
二つのidが一致することで、「未完了のタスク」のタブを選んだ時に、「未完了のタスクリスト」が表示される仕組みです。（59行目と87行目のidを一致させることで「完了したタスク」を選ぶと「完了したタスクリスト」が表示）
JavaScript
未完了リストでタスクを完了する時には、以下の処理を実施しています。
- 47, 48行目で、削除する行をコピー
- 50行目で、コピーした行から「OK」ボタンを削除（完了リストには削除ボタンは不要なため）
- 52行目で、完了リストに1,2でコピーした行を追加
- 55行目で、未完了リストから行を削除
まとめ
今回実装した機能をまとめます。
- 一覧表示を使用（行の追加・削除機能の実装）
- モーダルを表示
- タブで画面切り替え
今回作成した画面の中で、Bootstrapに関しては公式ページに用意されているサンプルをほぼコピーしただけ作成しています。
公式ページを眺めてみると、使えるようなクラスが発見できるかもしれません。時間がある時にご覧になってはどうでしょうか？
この記事を読んだ方におすすめのサイト
Bootstrapの知識をさらに深めたい方には、UdemyのBootstrap4のコース がおすすめです。
Bootstrapを使用して、おしゃれなサンプルページを5つ作成することができるので、このコースを利用して実際に手を動かせば、かなり実践的な知識を得ることができます。
