Bootstrapのdropdown-menuをドロップダウンリスト風に使ってみる
横道ついでに、前回に引き続きBootstrapネタ。
BootstrapはかっちょいいUIが色々そろっているけど、
ドロップダウンリストはイマイチな感じがする。
こんなの

そこで、標準で用意されているボタンとドロップダウンメニューを利用して、
Bootstrap風のデザインのドロップダウンメニューを作ってみた。
まず、ベースとするのはBootstrapのComponentsページに載っている「Button dropdown menus」。

<!-- Single button --> <div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Action <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div>
セパレータ付ならこんな感じ。

<!-- Split button --> <div class="btn-group"> <button type="button" class="btn"> Action </button> <button type="button" class="btn dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div>
ただ、このままだと単なるメニューとしてしか使えないので、以下の修正を加える。
1.選択内容を書き換えられるよう、ボタン内のhtml要素をspanタグで囲む
<button type="button" class="btn"><span id="visibleValue">Action</span></button>
2.選択リスト内の値を渡せるように、value要素を追加。
3.リンクを選択してもページ遷移しないように、href要素に「javascript:void(0)」を定義。
<li><a href="javascript:void(0)" value="Action">Action</a></li> <li><a href="javascript:void(0)" value="Another action">Another action</a></li> <li><a href="javascript:void(0)" value="Something else here">Something else here</a></li> <li class="divider"></li> <li><a href="javascript:void(0)" value="Separated link">Separated link</a></li>
4.選択された内容を保持、送信できるようにhidden項目を追加。
<input type="hidden" id="hiddenValue" value="">
5.選択された内容を反映する箇所を特定できるように、ulタグに要素を追加。
<ul class="dropdown-menu" role="menu" hiddenTag="#hiddenValue" visibleTag="#visibleValue">
6.最後に選択された内容を各要素に反映するよう、jQueryのメソッドを追加。
<script type="text/javascript"> $(function(){ $('.dropdown-menu a').click(function(){ //反映先の要素名を取得 var visibleTag = $(this).parents('ul').attr('visibleTag'); var hiddenTag = $(this).parents('ul').attr('hiddenTag'); //選択された内容でボタンの表示を変える $(visibleTag).html($(this).attr('value')); //選択された内容でhidden項目の値を変える $(hiddenTag).val($(this).attr('value')); }) }) </script>
全部あわせるとこんな感じ。
<!-- Split button --> <div class="btn-group"> <button type="button" class="btn"><span id="visibleValue">Action</span></button> <button type="button" class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button> <ul class="dropdown-menu" role="menu" hiddenTag="#hiddenValue" visibleTag="#visibleValue"> <li><a href="javascript:void(0)" value="Action">Action</a></li> <li><a href="javascript:void(0)" value="Another action">Another action</a></li> <li><a href="javascript:void(0)" value="Something else here">Something else here</a></li> <li class="divider"></li> <li><a href="javascript:void(0)" value="Separated link">Separated link</a></li> </ul> <input type="hidden" id="hiddenValue" value=""> </div> $(function(){ $('.dropdown-menu a').click(function(){ //反映先の要素名を取得 var visibleTag = $(this).parents('ul').attr('visibleTag'); var hiddenTag = $(this).parents('ul').attr('hiddenTag'); //選択された内容でボタンの表示を変える $(visibleTag).html($(this).attr('value')); //選択された内容でhidden項目の値を変える $(hiddenTag).val($(this).attr('value')); }) }) </script>

なかなかカッコいいのではなかろうか。
ぜんぜん関係ないけど、いつの間にかウチのサイトjavascriptエラーが出るようになってるね。
なんじゃろ?
この投稿へのトラックバック
-
-
[…] Bootstrapのdropdown-menuをドロップダウンリスト風に使ってみる doop /blog/archives/1064 […]
-
- トラックバック URL
この投稿へのコメント