あんまり使い道は無いかもしれないですが…。
例えば、マニュアルをスキャンしたものをウェブ上で閲覧できるようにして、ページをプルダウンメニュー（ドロップダウンリスト）で選びたい、みたいな時でしょうか？
そんな機会がどれだけあるかは判りませんが、つい最近そういうのを作る機会があったのでやり方をメモしておこうと思います。
ドロップダウンリストは select 要素と option 要素でできますよね。
で、 jQuery で select を監視して change イベントで選択中の option から画像のURLを取り出すのは簡単にできそうです。
ですが、お客さんが更新しようとすると、意外と select とか option って馴染みが薄かったり、CMSでも作れるボタンがついてるものはあまり聞きません（というか自分は知らないです…）
なので、今回はどんなCMSでも大抵ついているリスト生成機能を利用して、リストからドロップダウンリストを生成する機能もつけてみようと思います。
仕様
- ドロップダウンリストは特定のIDを持つリスト要素で管理
- リストの中にリンクを作り、画像にリンクする
- リンクのテキストをドロップダウンリストのアイテムのラベルにする
また、出力する画像の ALT タグにも指定する - リストに特定のクラスを与えればデフォルトで選択状態のものを変更できる
みたいな感じにしようと思います。
CMSのリスト機能だとものによっては直接はクラスを指定できなかったりする場合もありますがそこはとりあえず今回は HTML で書くものとします。
（運用にあたり、事前にクラス付きのリストを制作サイドで作っておいて、お客さんにはそのリストの中身だけいじる（リスト全消しはしない）ようにしてもらう）
あ、でもWordPressなら AddQuicktag みたいなプラグインとかで ID 持ちの ul とか登録しておいてもいいかもしれませんね。（今回は検証してませんが…。）
他のCMSでも似たようなプラグインや拡張があればその方法がつかえるかもしれません。
コード
html
|
1 2 3 4 5 6 7 |
<ul id="imageList"> <li><a href="http://placekitten.com/320/240">Image 01</a></li> <li><a href="http://placekitten.com/320/250">Image 02</a></li> <li><a href="http://placekitten.com/320/260">Image 03</a></li> <li><a href="http://placekitten.com/320/270">Image 04</a></li> <li><a href="http://placekitten.com/320/280">Image 05</a></li> </ul> |
javascript（別途 jQuery を読み込んでおいてください）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
jQuery(document).ready(function($) { $('#imageList') .after('<select name="imageSelect" id="imageSelect"></select>') .children('li').each(function() { if ($(this).hasClass('selected')) { $('#imageSelect').append($('<option selected="selected">').html($(this).text()).val($(this).children('a').attr('href'))) } else { $('#imageSelect').append($('<option>').html($(this).text()).val($(this).children('a').attr('href'))); } }) .remove(); $('#imageSelect').after('<div id="variableImage"></div>'); $('#variableImage').append('<img src="" alt="">'); switch_image(); $('#size-chart-loading').hide(); $('#imageSelect').change(function(){ switch_image(); }); function switch_image() { $('#imageSelect option:selected').each(function(){ $('#variableImage').children('img').attr({ src:$(this).val(), alt:$(this).text() }); }); } }); |
簡単な解説
やってることとしては、大きく３段階あります。
select 要素の生成
まずリストのうしろに select 要素を追加し、その中にリストの中身をみながら option 要素を作っていきます。
リストの後ろに追加するには、
|
1 |
$('#list-id').after('<select></select>'); |
ってかんじです。
option 要素の追加は、
|
1 |
$('#select-id').append($('<option>'.html('ラベル文字').val('value値'); |
みたいな感じでかんたんに追加できますので、これを使いますが、その際に li 要素が selected というクラスを持っているかをチェックし、もっていたら option 要素に selected=”selected” を追加します。
ここ attr でやろうとおもったんですがうまい方法が思いつきませんでした…。きっともっといい方法が有るかもしれません…。
ドロップダウンリストのボックスが出来上がったらもうもとのリストは不要ですので remove() で消すなり、 hide() で隠すなりでいいかとおもうので今回は remove() しちゃいました。
初期画像を書き出す
今回は今追加したセレクト要素の次のところに画像を書き出しますので、再び after で追加してます。で、そのあとその中に空の画像をセットして、それの src と alt を現在セレクト要素で選択されているものにあわせて書き換えます。
選択中の option の中身をとるには、セレクト要素を選択した上で、
|
1 |
$('#select-id option:selected') |
でいけますので、
|
1 2 3 4 |
$('img').attr({ src:$('#imageSelect option:selected').val(), alt:$('#imageSelect option:selected').text(), }); |
みたいな感じでセットできます。
ここまでで画像の表示まで完了しました。今回は読込中のメッセージもだしてたので、このタイミングでそれも消してますが、一瞬で終わってしまうのでそもそもメッセージなくてもいい可能性も有ります。この辺はおこのみで。
ドロップダウンリストの変更を監視
最後に、ドロップダウンリストを監視し、変化があったらそれに併せて画像を書き換えます。
変更を監視するなら change() が楽です。
変更があったら、また選択済みになっているアイテムを調べて、 src と alt を書き換えます。
ここは先程の初期画像を出力するのとやってることは同じですので、２回書いてもアレですから関数にしちゃいました。
|
1 2 3 4 5 6 7 8 |
function switch_image() { $('#imageSelect option:selected').each(function(){ $('#variableImage').children('img').attr({ src:$(this).val(), alt:$(this).text() }); }); } |
で、呼び出す時は
|
1 |
switch_image(); |
ってかんじです。
デモ
まだまだ改善の余地はありそうですが、とりあえず大まかにはこんな感じでしょうか？
なんかのヒントになれば…。
コメントする