jQueryの勉強を引き続き実施。要素の幅・高さを指定するコードを書いてみて実装。
表示から動きのあるものにしたいと思い、ボタンをクリックした時に幅と高さを指定できるようなものに仕上げたので備忘録。
今回は、簡単なwebサイトで幅と高さを見比べることができるものを作りました。
※jQueryの勉強をしつつ見た目はいい感じにしたかったので、Bootstrapを使用しています。
★応用していくときの流れ
STEP1. ページを開いたときに指定した幅と高さで表示する。
↓
STEP2. jQueryでボタンをクリックしたときに指定した幅と高さで表示する。
STEP1-1. htmlファイルを準備する
まずは、htmlファイル内にdiv要素でブロックを作ります。
そして、div要素で作ったブロックに対して、idを指定します。
今回はブロックにid「pic1」を指定しています。
以下、htmlファイルの中身です。↓
・・・・・省略・・・・・ <body> ・・・・・省略・・・・・ <div id="pic1" class="center-block" style="border:solid 1px #75DDDD;background:#75DDDD;"> <p class="text-center" style="font-weight:bold;font-size:30px;padding-top:40px;">画像</p>
どうでしょうか。ブロックが画面に表示されたら準備は完了です。
続いて、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でdiv要素で作ったブロックに対して、高さと幅を指定して表示してみます。
以下の内容を「sample.js」に記述します。
//幅と高さを指定する。
$(function(){
$('#pic1').width(420);
$('#pic1').height(120);
});
どうですか？
以下の画像みたいに画面いっぱいではなく、指定した幅と高さで表示されたらOKです。
※ページを開いたときに表示が変わらず、指定した幅と高さで表示されていない場合は、F12からDeveloper Toolsを開き、Consoleタブでエラーが出ていないか確認してみてください。
STEP2-1. htmlファイル内にボタンを追加する
指定した幅と高さをjQueryで表示できるようになったら、
次は「jQueryでボタンをクリックしたときに指定した幅と高さで表示する。」をしてみます。
今回は幅と高さを指定させる4つのボタンを準備します。
「幅：320px」「幅：640px」「幅：960px」「クリア」。
まずは、htmlファイル内に4つボタンを追加します。以下を答えのpタグ下に記述します。
以下、htmlファイルの中身です。↓
<p class="text-center" style="font-weight:bold;font-size:30px;padding-top:40px;">画像</p> ・・・・・省略・・・・・ <button id="s_btn" type="button" class="btn btn-primary">幅：320px</button> <button id="m_btn" type="button" class="btn btn-primary">幅：640px</button> <button id="l_btn" type="button" class="btn btn-primary">幅：960px</button> <button id="c_btn" type="button" class="btn btn-primary">クリア</button>
どうでしょうか。以下の画像のようにブロック下にボタンを4つ準備できたら、
次はjQueryの記述に入ります。
STEP2-2. jQueryでボタンがクリックされたときに問題のヒントと答えを表示・非表示する
続いてボタンに動きをつけていきます。
「幅：320px」「幅：640px」「幅：960px」「クリア」それぞれのボタンは『クリック』されたときに動きをするので、『.click()』メソッドを使用します。
また、動きのポイントとなる4つのボタンにはそれぞれidを指定します。
今回は以下のようにidを指定します。
「幅：320px」ボタン→id=” s_btn”
「幅：640px」ボタン→id=”m_btn”
「幅：960px」ボタン→id=”l_btn”
「クリア」ボタン→id=”c_btn”
そして、「指定したボタン(id)がクリックされたときに、div要素(id)のブロックが指定する幅と高さで表示」されるようにします。
それでは、「幅：320px」ボタン(id=” s_btn”)をクリックしたときに幅320px・高さ120pxで表示する動作にします。以下、jsファイルの中身です。↓
//幅：320pxをクリックしたときに幅・高さを指定する。
$('#s_btn').click(function(){
$('#pic1').width(320);
$('#pic1').height(120);
});
続いて、「幅：640px」ボタン(id=” m_btn”)をクリックしたときに幅640px・高さ120pxで表示する動作にします。以下、jsファイルの中身です。↓
//幅：640pxをクリックしたときに幅・高さを指定する。
$('#m_btn').click(function(){
$('#pic1').width(640);
$('#pic1').height(120);
});
続いて、「幅：960px」ボタン(id=” l_btn”)をクリックしたときに幅960px・高さ120pxで表示する動作にします。以下、jsファイルの中身です。↓
//幅：960pxをクリックしたときに幅・高さを指定する。
$('#l_btn').click(function(){
$('#pic1').width(960);
$('#pic1').height(120);
});
最後に、「クリア」ボタン(id=” c_btn”)をクリックしたときに元の幅420px・高さ120pxで表示する動作にします。以下、jsファイルの中身です。↓
//クリアをクリックしたときに元の幅・高さを指定する。
$('#c_btn').click(function(){
$('#pic1').width(420);
$('#pic1').height(120);
});
どうですか？以下の画像みたいにボタンをクリックしたときに指定した幅と高さで表示されたらOKです。
※ページを開いたときに表示が変わらず、指定した幅と高さで表示されていない場合は、F12からDeveloper Toolsを開き、Consoleタブでエラーが出ていないか確認してみてください。
今回の動作確認用にデモサイト準備しました。
よかったら画像をクリックして確認してみてください。↓
デモサイト
