サイトにjQueryを使って開閉ボタンを設置した

天使のモノクロームで写真素材のページは縮小版のサムネイルを並べて原寸大にリンクさせるようにしている。しかしサムネイルではなくて縮小版を大きく並べて一気に見られるのも写真素材を選び易いと思った。別のページを作っても良いけれども補足的な機能として同じページでできてしまえば別のページをブラウザで読み込まずに済ませられて動作も早いから嬉しい。


天使のモノクロームのPlain 1に設置されたjQueryの開閉ボタンによる写真素材の並び方の切り替わり

jQueryを使った開閉メニューのソースコードをスマホのメニューなどに使えるjQueryを使って要素をクリックした時に開閉させる方法で見付けたので、使うことにした。


<script> $(function(){ $(".menu").css("display","none"); $(".button-toggle").on("click", function() { $(".menu").slideToggle(); }); }); </script>

スマホのメニューなどに使えるjQueryを使って要素をクリックした時に開閉させる方法 via 9ineBB

ボタンに「button-toggle」のclass要素を付けて開閉したい領域に「menu」のclass要素を付ける。本当にシンプルで直ぐにできてしまうし、使い易さは満点だった。


jQueryはJavaScriptの一種だけど、ブラウザには入ってなくてサイトに置いておかなくてはならないので、GoogleのjQueryのlibraryから無料でリンクして使うことにした。


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>

Hosted Libraries via Google Developers

htmlのhead内でもbody内でもどこに置いても大丈夫けれども全体の下の方だとサイトが重いほどに読み込みが遅れる可能性もあるから注意しても良いだろう。


引用のソースコードのままだとメニューが閉じて始まるから「none」を「block」に取り換えた。cssのdisplay属性で表示を切り替えるようなので、ボタンを押すと「none」でサムネイルが消えるようにした。


ボタンの下に写真素材の縮小版を大きく並べてdiv要素に入れて別のclass要素を付けておいて引用の「menu」と取り換えたもう一つソースコードを置いた。


すると一つのボタンでサムネイルは消えて縮小版が大きく並ぶようになった。


写真素材が縱一列に表示されると大見出しの下の説明文が当て嵌まらなくなるので、そこにもclass要素で「menu」を付けて消えるようにした。消したいところや出したいところにjQueryの開閉ボタンのソースコードと対応したclass要素を付ければ幾つでも同じように動かせるわけだ。


訪問者がブラウザのJavaScriptをオフにしていたりするとjQueryは動作しなくてサムネイルと共に大きな縮小版も出てしまうので、その開閉ボタンのclass要素にcssでdisplay属性の「none」を予め指定することにした。ブラウザによってjQueryが動作しなければ写真素材のページにはサムネイルしか表示されなくなる。


ただしボタンが無意味に表示されることにもなるので、ボタンの下にhtmlのnoscrpt要素で代替文を表示させることにした。JavaScriptやjQueryが動かない場合に代替文を出せるタグなんだ。咄嗟、別の同じような縮小版の縱一列のページを作ってリンクするべきかとも思ったけど、それを避けるために開閉ボタンを付けたわけだし、本末転倒だから止めた。jQueryが動作しなくてもサムネイルで写真素材が選べることは悩まされるよりも前々から明らかだった。


サイト運営でjQueryやJavaScriptは動作しない可能性もあるから取り入れる際には多少とも気がかりは出て来るにせよ、面白いデザインを付けられたりもするので、全く使わないという手はないし、やるべきところでは考え過ぎずにやって行きたい。


関連:detailsタグでサイトに開閉メニューを作る

コメント

些細な日常の人気の投稿

MOTOROLAのMoto G5 Plusを使い出してのスマホレビュー

Imgurで画像URLと埋め込みコードを取得する方法

PlayストアでAndroidアプリのダウンロードが非常に遅い場合の打開策