こんばんは、すずしんです。
前回の記事で、jQueryの簡単な読み込み方について書きましたので…。
何だかjQueryのプログラムを書いてみたい気分になりました。
そこで、私はちょっとしたjQueryのサンプルプログラムを作成してみました。
そのサンプルプログラムでは「アニメーション付き開閉式ボックス」を実装してみました。
さすがjQueryで、パパッと簡単に作ることができましたよ！
せっかくなので、今回作成したサンプルプログラムを記事に載せておこうと思います。
需要があるかどうかは分かりませんが…。
誰かの役に立てれば光栄です。
開閉式ボックスとは？
ここでいう所の開閉式ボックスというのは…。
展開用のリンクをクリックすると、スライドしながら現れるdiv要素の事を言います。
最初、div要素は非表示になっていますが…。
リンクをクリックすると、スライドしながらdiv要素が表示されます。
そして、もう一度リンクをクリックすると、今度はスライドしながら非表示になります。
要するに、アニメーション付きでトグルするdiv要素です。
最初は非表示にしておいて、リンクをクリックしたら表示されるような仕組みを実装したいなら…。
今回の方法は有効ですよ。
アニメーション付き開閉式ボックスのサンプルプログラム
早速、アニメーション付きで開閉するボックスを作成していきます。
まずは、実装に必要なものをまとめてみます。
- 開閉式アニメーションをさせるためのリンク(*1)
- 表示されるdiv要素(*2)
このリンク(*1)がクリックされると、div要素(*2)が開閉されれば良いのですね。
ここでは、このリンク(*1)のclass属性にtoggle-linkを、div要素(*2)のclass属性にはtoggle-boxを付加します。
そして、リンク(*1)がクリックされたときに実行されるJavaScriptの関数をtoggle()としています。
サンプルプログラムとしては、以下のようにしてみました。
<a class="toggle-link" href="javascript:toggle();">開閉</a> <div class="toggle-box"> <p>ここにコンテンツが入ります。</p> </div>
CSSについては、とりあえず簡単に以下のようにしてみました。
ポイントとしては、toggle-boxのdisplayをnoneに設定することくらいでしょうか。
<style type="text/css"> .toggle-box { border: 1px solid #aaaaaa; margin: 10px; padding: 10px; display: none; } </style>
そして、JavaScriptのコードですが…。
まずjQueryを読み込んで、toggle関数の定義をします。
toggle関数では、toggle-boxが付加されている要素(*2)に対して、slideToggle()を実行するだけです。
jQueryを使うと、たったこれだけのコードで良いというのがすごいですよね～。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> function toggle() { $('.toggle-box').slideToggle('slow'); } </script>
サンプルプログラムの実行例
上記で作成したサンプルプログラムをこの記事にも貼り付けてみました。
実際にちゃんと動作するかどうか確認してみてください。
「開閉」のリンクをクリックすると…。
ボーダーが付いていて、「ここにコンテンツが入ります。」という文字が書かれている要素が表示されると思います。
もう一度クリックすると、今度は非表示になります。
アニメーションもきちんと付いていますよね？
ここにコンテンツが入ります。
ひとこと
今回の記事では、jQueryの練習としてアニメーション付き開閉式ボックスを作成してみました。
ソースコードを見てみると、別に大した事はしていないというのが分かると思います。
ただ単純にslideToggle()を呼び出しているだけですからね。
jQueryがいかに強力なライブラリなのかという事が分かるのではないでしょうか。
jQueryを上手く使いこなせれば、Webページの作成もきっと捗るでしょうね。
私ももっと高度な事ができるように、jQueryの勉強をしていきたいと思います。