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

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

Plain 1｜天使のモノクローム

9ineBBのjQueryの開閉メニューのソースコードを使う

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

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

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

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

GoogleのjQueryのlibraryのソースコードを使う

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

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

Hosted Libraries｜Google Developers

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

9ineBBのjQueryの開閉メニューを開いて始めることにした

9ineBBのjQueryの開閉メニューは元のソースコードのままだとメニューが閉じて始まるから「none」を「block」に取り換えた。CSSのdisplay要素で表示を切り替えるようなので、ボタンを押すと「none」でサムネイルが消えるようにした。

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

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

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

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

jQueryが動作しない場合のためにHTMLのnoscrpt要素で代替文を表示させる

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

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