こんにちは
SI部の宮内です。
今回はJQueryUIを使用して、ブラウザ上で簡単TODOリストを作成してみたいと思います。
まずは完成形から、今回、以下のようなTODOリストを作成します。
【機能】
今回は以下の機能を満たすことにします。
１．日付欄はカレンダーより選択できるようにする
２．項目は優先度順での並びかえなどのニーズを考慮し、自由にソート可能とする
３．チェックボックスでチェックした項目は完了項目としてグレーアウトし、取り消し線を入れる
４．追加ボタン押下により項目を追加を可能とする
【環境】
今回は以下の環境で実施しました。
ブラウザ：Google chrome バージョン 33.0.1750.154 m
jQuery： jQuery-1.10.2 jquery-ui-1.10.4
【準備】
https://jqueryui.com/
公式サイトよりをjQueryUIをDLし解凍。解凍してできたフォルダ直下にtodo.htmlを作成してください。
今回development-bundle、index.htmｌは不要なので削除しました。
ここでのポイントはheadタグの部分でjquer、jqueryUIの順でを読み込んでいるところです。 必ずこの順番で読み込んでください。
今回はこちらを雛形として作業を進めていきます。
todo.html<!doctype html> <html lang="ja"> <head> <meta charset='utf-8'> <title>jQuery</title> <link href="css/start/jquery-ui-1.10.4.custom.css" rel="stylesheet"> <script src="js/jquery-1.10.2.js"></script> <script src="js/jquery-ui-1.10.4.custom.js"></script> </head> <body> <fieldset > <legend bold>TodoList</legend> <div style = 'font-weight: bold';>日付<input type="text" id = "datepicker"></div> <div id = "todolist" > <p><input type="checkbox"><input type="text"></p> <p><input type="checkbox"><input type="text"></p> <p><input type="checkbox"><input type="text"></p> <p><input type="checkbox"><input type="text"></p> <p><input type="checkbox"><input type="text"></p> <div> </fieldset> <input type="button" id = "addTodoItem"value = "追加" onclick = "addTodoItem()"> <style> body { font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HiraKakuPro-W3","メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic",Arial, Helvetica,sans-serif; } #selectable .ui-selecting { background: #FECA40; } #selectable .ui-selected { background: #F39814; color: :white; } input { font-size: 100%; } fieldset { margin-top: 20px; margin-bottom: 20px; padding: 10px 20px 15px; border: 3px #0080ff groove; background-color: #b0c4de; width: 600px; line-height: 3px; } legend { font-weight: bold; } </style> <script> </script> </body> </html>【実装】
１．カレンダーからの日付入力
jQuery UI の Datepicker を利用して実現します。 雛形のhtmlに以下のスクリプトの内容を追加してみてください。 今回はカレンダーをカスタマイズして、日本語に対応しました。$(function(){ //1.カレンダーの設定 $("#datepicker").datepicker({ dateFormat:"yy/mm/dd", monthNames:["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"], dayNamesMin:["日","月","火","水","木","金","土"], gotoCurrent: true }); });修正して保存後ブラウザから確認すると テキストボックス選択時にカレンダーが表示されるようになったのが確認できます。
２．項目を自由にソートできるようにする
次に以下のコードを追記してください。 項目をドラッグアンドドロップでソート可能にするためにはsortableの設定をおこないます。
opacityでは移動時の透過度を指定しています。
// 2.textboxのソートを可能にする $('#todolist').sortable({ opacity: '0.5' }) .selectable();
３．チェックボックスでチェックした項目を終了項目としてグレーアウトし、罫線を入れる
// 3.checkboxをチェックするとテキストボックスをグレーアウトし、罫線を入れる $(document).on("change", "p input:checkbox", function () { var index = $('p input:checkbox').index(this); if($(this).is(':checked')) { $("p input:text").eq(index).attr("disabled", "disabled").css("text-decoration", "line-through"); } else { $("p input:text").eq(index).attr("disabled", false).css("text-decoration", ""); } });チェックボックスをチェックしたときのチェンジイベントを作成しておきます。 またチェックボックスの状態に合わせテキストボックスをのスタイルを変更します。
４．追加ボタン押下により項目を追加
こちらは以下のコードで実現しています。
function addTodoItem() { $('#todolist').append(' <p><input type="checkbox"><input type="text"></p>'); }以上で完成となります。
全コード
<!doctype html> <html lang="ja"> <head> <meta charset='utf-8'> <title>jQuery</title> <link href="css/start/jquery-ui-1.10.4.custom.css" rel="stylesheet"> <script src="js/jquery-1.10.2.js"></script> <script src="js/jquery-ui-1.10.4.custom.js"></script> </head> <body> <fieldset > <legend bold>TodoList</legend> <div style = 'font-weight: bold';>日付<input type="text" id = "datepicker"></div> <div id = "todolist" > <p><input type="checkbox"><input type="text"></p> <p><input type="checkbox"><input type="text"></p> <p><input type="checkbox"><input type="text"></p> <p><input type="checkbox"><input type="text"></p> <p><input type="checkbox"><input type="text"></p> <div> </fieldset> <input type="button" id = "addTodoItem"value = "追加" onclick = "addTodoItem()"> <style> body { font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HiraKakuPro-W3","メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic",Arial, Helvetica,sans-serif; } #selectable .ui-selecting { background: #FECA40; } #selectable .ui-selected { background: #F39814; color: :white; } input { font-size: 100%; } fieldset { margin-top: 20px; margin-bottom: 20px; padding: 10px 20px 15px; border: 3px #0080ff groove; background-color: #b0c4de; width: 600px; line-height: 3px; } legend { font-weight: bold; } </style> <script> $(function(){ //1.datepickerの設定 $("#datepicker").datepicker({ dateFormat:"yy/mm/dd", monthNames:["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"], dayNamesMin:["日","月","火","水","木","金","土"], gotoCurrent: true }); // 2.textboxのソートを可能にする $('#todolist').sortable({ cursor: 'move', opacity: '0.5' }) .selectable(); // 3.checkboxをチェックするとテキストボックスをグレーアウトする 動的に生成された要素対しても適用したいので $(document).on("change", "p input:checkbox", function () { var index = $('p input:checkbox').index(this); if($(this).is(':checked')) { $("p input:text").eq(index).attr("disabled", "disabled").css("text-decoration", "line-through"); } else { $("p input:text").eq(index).attr("disabled", false).css("text-decoration", ""); } }); }); function addTodoItem() { $('#todolist').append(' <p><input type="checkbox"><input type="text"></p>'); } </script> </body> </html>いかがだったでしょうか。JQueryUIを使用することにより比較的少ないコード量でブラウザ上で豊かな表現を可能となります。
jQueryUIには他にも多くの機能が存在します。是非いろいろ試してみてください。
表現の幅がグッと広がることでしょう。
