ToDo チェック機能の実装 – Linux & Android Dialy

ToDo チェック機能の実装

#10 チェック機能を実装してみよう (1)
http://dotinstall.com/lessons/todo_app_php_v2/9310
を元にチェック機能を実装する

チェックボタンをつけるので、
index.php へチェックボックスを追加する

<li id="task_<?php echo h($task['id']); ?>" data-id="<?php echo h($task['id']); ?>">

の下に
チェックボックスを追加するため

<input type="checkbox" class="checktask" <?php if($task['type']=="done"){
 echo "checked"; }?>>

を追加する

intput type=”checkbox”
でチェックボックスを指定

if($task['type']=="done"

は、フラグが done つまり実行済みになっているなら

echo "checked";

でチェックボックスへチェックを入れている

また、チェック済みなら
タイトルの文章に打ち消しなどの表示効果でアクションをつけるようにする

このタイトル表示は

<?php echo h($task['title']); ?>

なのでこれを書き換える

まず span 要素をつけておく

<span class="<?php echo h($task['type']); ?>"><?php echo h($task['title']); ?></span>

これで、span 要素のクラス名が
done
delete
notyet
のどれかになるので

この type が done 、つまり実行済みで
チェックボックスにチェックが入っているなら　
span 要素へ
CSSを適用するようにする

.done{
                        text-decoration: line-through;
                        color:gray;
                }

text-decoration:は
打ち消し線とか
下線を引いたりできる

詳しい解説は
http://www.htmq.com/style/text-decoration.shtml
のリファレンスを参考にする

今回、指定した
line-through　は打ち消し線

そしてチェックボックスをクリックしたときの動作をつくる
これは jQuery で実装する

  $(document).on('click','.checktask',function(){

  });

というようにする
on() を使っているのは
PHP で動的に追加された要素に対する処理のため
引数の意味は
click が行う動作
.checktask が class=”checktask”
function() がそのときに行う処理
となる

コメントを残す コメントをキャンセル