jQueryの勉強でまず基本的なことからということで、cssを書き換えるコードを書いてみて実装。
実装はできたけど、もう少し動きのあるものにしたいと思い、ボタンをクリックした時に色の変更をできるようなものに仕上げたので備忘録。
今回は、メール一覧とかお知らせ一覧みたいなリスト一覧に対して行単位で色を変更するものを実装しました。
※jQueryの勉強をしつつ見た目はいい感じにしたかったので、Bootstrapを使用しています。
★応用していくときの流れ
STEP1. ページを開いたときに色を変更する。
↓
STEP2. ボタンをクリックしたときに、色を変更する。
STEP1-1. htmlファイルを準備する
まずは、htmlファイル内にテーブルを作ります。
そして、テーブル内の色を変更したい行に対して、idを指定します。
今回は「2015年度春遠足のお知らせ」行に「new1」、「2015年度冬遠足のお知らせ」行に「old1」を指定しています。
以下、htmlファイルの中身です。↓
※テーブルについては、bootstrapのcss>Tables>Basic exampleを参照してください。
・・・・・省略・・・・・ <body> ・・・・・省略・・・・・ <table class="table"> <tr> <th>番号</th><th>タイトル</th><th>日付</th> </tr> <tbody> <tr id="new1"> <td>1</td><td>2015年度春遠足のお知らせ</td><td>2015/XX/XX</td> </tr> <tr> <td>2</td><td>2015年度夏遠足のお知らせ</td><td>2015/XX/XX</td> </tr> <tr> <td>3</td><td>2015年度秋遠足のお知らせ</td><td>2015/XX/XX</td> </tr> <tr id="old1"> <td>4</td><td>2015年度冬遠足のお知らせ</td><td>2015/XX/XX</td> </tr> </tbody> </table>
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でcssを指定して色を変更してみる
まずはjQueryでcssを指定して、ページが表示されたときに行の背景色を変更してみます。
以下の内容を「sample.js」に記述します。
$(function(){ $('#new1').css('background','pink'); $('#old1').css('background','#94c05c'); });
どうですか?
きちんと書けていたら、以下の画像みたいにテーブルの行に色がつきます。
※ページを表示したときに色が変化していない場合は、F12でDeveloper ToolsのConsoleタブでエラーが出ていないか確認してみてください。
STEP2-1. htmlファイルにボタンを追加する
テーブルの行がjQueryで指定した色に変化できるようになったら、
次は「jQueryでボタンがクリックされたときに色を変更する」をしてみます。
今回は「Change」ボタンをクリックしたら色が変更し、「Cancel」ボタンをクリックしたら元の白にします。
まずは、htmlファイルのテーブル下にボタンを追加します。以下をtableの閉じタグの下に記述します。
以下、htmlファイルの中身です。↓
</table> ・・・・・省略・・・・・ <input id="colorbutton" class="btn btn-default" type="button" value="Change"> <input id="colorCancel" class="btn btn-default" type="button" value="Cancel">
STEP2-2. jQueryでボタンがクリックされたときに色を変更する
続いてボタンに動きをつけていきます。
「Change」ボタンと「Cancel」ボタンのどちらも『クリック』されたときに動きをするので、『.click()』メソッドを使用します。また、動きのポイントとなるボタンにはidを指定します。
今回は「Change」ボタンには「colorbutton」、「Cancel」ボタンには「colorCancel」というidを指定します。そして、「指定したボタン(id)がクリックされたときに、指定した行(id)の色が変更する」ようにします。
それではSTEP1-2で記述した色指定を「Change」ボタンをクリックしたときの動作にします。
以下、jsファイルの中身です。↓
//カラーを変更する。 $('#colorbutton').click(function(){ $('#new1').css('background','pink'); $('#old1').css('background','#94c05c'); });
続いて、「Change」ボタンで変わった色を「Cancel」ボタンをクリックしたときに元の白にします。
以下、カラー変更の下に記述してください。
//カラー変更を元に戻す=>白にする。 $('#colorCancel').click(function(){ $('#new1').css('background','white'); $('#old1').css('background','white'); });
どうですか?
きちんと書けていたら、以下の画像みたいに「Change」ボタンをクリックするとテーブルの行に色がつき、
「Cancel」ボタンをクリックすると行の色が元の白になります。
※ボタンをクリックしたときに色が変化していない場合は、F12でDeveloper ToolsのConsoleタブでエラーが出ていないか確認してみてください。
今回の動作確認用にデモサイト準備しました。
よかったら画像をクリックして確認してみてください。↓