jQueryの勉強を引き続き実施。今回は指定した属性に対して値の追加や変更する『.attr()』メソッドを使って実装。ページを表示したときにボタン対してツールチップの追加と、ボタンをクリックした時に指定の画像へ変更させるものに仕上げたので備忘録。
今回はTODOリスト画面に表示されているボタンのツールチップ表示と、TODOリストの1つ1つに対する未完了から完了へ変わるイメージです。
※jQueryの勉強をしつつ見た目はいい感じにしたかったので、Bootstrap を使用しています。
※画面上に表示されている画像は、32px×32pxの画像を準備しています。適当なものを準備してみてください。
★応用していくときの流れ
STEP1.ページを開いたときに表示されているボタンにツールチップを追加する。
↓
STEP2.ボタンをクリックしたときに、指定の画像とツールチップの内容へ変更する。
STEP1-1. 画面にボタンを表示する
まずは、TODOリストの上に表示するボタンを作ります。
表示するボタンは「前へ」「次へ」「削除」「追加」の4つのボタンを作ります。ボタンにはそれぞれにidを付与しておきます。
なお、ボタンはcssで装飾し、ボタン内に表示されているアイコンはbootstrapの「Glyphicons」を利用しています。今回は、一時的なものなのでcssもhtmlファイル内に書いていきます。
以下、htmlファイルの中身です。
・・・・・cssの部分です・・・・・ <style> body{ font-family:'Lucida Grande', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif; } .btn{ margin:5px; } .btn:focus{ outline: none; } p,img{ margin: 5px 0; margin-right: 5px; } .i-btn{ background: none; border: #CCCCCC; outline: none; } </style> ・・・・・省略。htmlの部分です・・・・・ <div class="container"> <div class="row"> <div class="col-xs-12"> <button type="button" class="btn" id="previous"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> </button> <button type="button" class="btn" id="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> </button> <button type="button" class="btn" id="delete"> <span class="glyphicon glyphicon-trash" aria-hidden="true"></span> </button> <button type="button" class="btn" id="add"> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> </button> </div> </div> </div>
ここまでだと、以下の画像みたいになっていると思います。↓
続いて、jQueryは別ファイルに記述することが多いのでhtmlファイルからjsファイルを参照するようにします。今回はjsファイルの名前を「sample.js」として、以下をbodyの閉じタグ前に記述します。
・・・・・省略・・・・・ <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> <script src="sample.js"></script> </body>
STEP1-2. jQueryでページを開いたときに表示されているボタンにツールチップを追加する
まずはjQueryでページを開いたときに表示されているボタンにツールチップを追加します。
さっそく『.attr()』メソッドを使用します。
STEP1-1で作っておいたボタンに対してツールチップを追加していきます。
ツールチップを表示するため、ボタンに属性「title」と値を入れてあげます。
それぞれのボタンに対して「title」の値を左端のボタンから「前へ」「次へ」「削除」「追加」とします。
以下の内容を「sample.js」に記述します。
//ボタンにツールチップを追加する。 $(function(){ $('#previous').attr('title','前へ'); $('#next').attr('title','次へ'); $('#delete').attr('title','削除'); $('#add').attr('title','追加'); });
どうですか?
以下の画像みたいにツールチップが表示されたらOKです。
※ツールチップが表示されていない場合は、F12からDeveloper Toolsを開き、Consoleタブでエラーが出ていないか確認してみてください。
STEP2-1. アイコンボタンつきTODOリストを作る
ボタンにマウスをあてたときにツールチップを表示できるようになったら、
次は、jQueryでアイコンボタンをクリックしたときにアイコンボタンの変更してみます。
まずは、クリック前後で表示するアイコン画像を準備しつつ、リストを3つほど作ります。
作成したアイコンボタンにはjQueryでクリック時の動作を指定する対象なので、idを付与しておきます。
アイコンボタンつきTODOリストの追加部分は4つ目のボタン以下に追記します。
以下、htmlファイルの内容です。
・・・・・省略・・・・・ </button> <p><button type="button" class="i-btn" id="list1"><img src="./img/cry.png" title="未完了" id="list1_icon"></button><input type="checkbox"> ●●株式会社、提案資料作成</p> <p><button type="button" class="i-btn" id="list2"><img src="./img/cry.png" title="未完了" id="list2_icon"></button><input type="checkbox"> ▲▲様、問い合わせTEL</p> <p><button type="button" class="i-btn" id="list3"><img src="./img/cry.png" title="未完了" id="list3_icon"></button><input type="checkbox"> 1月度営業会議 10:00~11:00</p>
どうですか?
以下の画像みたいにアイコンボタンつきTODOリストが表示されたらOKです。
STEP2-2. jQueryでボタンをクリックしたときに、指定の画像とツールチップの内容へ変更する
続いてアイコンボタンをクリックしたときの動作を実装します。
ここでは2つのメソッドを使用します。
まず1つ目はボタンをクリックした時の動作『.click()』メソッドを使用します。
2つ目はアイコン画像とツールチップの変更なので、ここでも『.attr()』メソッドを使用します。2つのメソッドを使用して「指定したボタン(id)がクリックされたときに、ボタンの画像参照先(src)とツールチップの内容(title)を変更」します。
STEP1-2での記述したプログラムコードの下に追記してください。以下、jsファイルの内容です。↓
//アイコンクリック時にアイコンを変更する。 $(function(){ $('#list1').click(function(){ $('#list1_icon').attr({ src:"./img/smile.png", title:"完了", }); }); $('#list2').click(function(){ $('#list2_icon').attr({ src:"./img/smile.png", title:"完了", }); }); $('#list3').click(function(){ $('#list3_icon').attr({ src:"./img/smile.png", title:"完了", }); }); });
どうですか?
以下の画像みたいにアイコンボタンをクリックしたときに画像とツールチップの内容が変更されたらOKです。
※ボタンをクリックしたとき変更しない場合は、F12からDeveloper Toolsを開き、Consoleタブでエラーが出ていないか確認してみてください。
今回の動作確認用にデモサイト準備しました。
よかったら画像をクリックして確認してみてください。↓