横道ついでに、前回に引き続きBootstrapネタ。BootstrapはかっちょいいUIが色々そろっているけど、ドロップダウンリストはイマイチな感じがする。こんなのそこで、標準で用意されているボタンとドロップダウンメニューを利用して、Bootstrap風のデザインのドロップダウンメニューを作ってみた。</ul></div>セパレータ付ならこんな感じ。</ul></div>ただ、このままだと単なるメニューとしてしか使えないので、以下の修正を加える。id="visibleValue">Action</span></button>2.選択リスト内の値を渡せるように、value要素を追加。3.リンクを選択してもページ遷移しないように、href要素に「javascript:void(0)」を定義。link</a></li>4.選択された内容を保持、送信できるようにhidden項目を追加。value="">5.選択された内容を反映する箇所を特定できるように、ulタグに要素を追加。visibleTag="#visibleValue">6.最後に選択された内容を各要素に反映するよう、jQueryのメソッドを追加。})})</script>全部あわせるとこんな感じ。})})</script>なかなかカッコいいのではなかろうか。関係ないけど、いつの間にかウチのサイトjavascriptエラーが出るようになってるね。関連記事01BootstrapのイベントをフックするDjember関連。悩んだ挙句、編集機能をモーダルウィンドウに変更してみた。一応、いろいろとチューニングもしてみたんだけどね。技術15BootstrapのGlyphiconがすごく便利で感動したちょっと横道。Bootstrap(3.0.0以降)に標準で用意されていた。使い方が簡単でかなり感動したと言う話。現在開発中のアプリをiPhoneで表示させる時にハマったんで備忘録。iPhoneのsafariで表示中のWebページの向きを横に変えると、解像度が変わって画面が拡大してしまう(ように見える)。技術この投稿へのコメントコメントはありません。コメントをキャンセルメールアドレスが公開されることはありません。*サイト上に表示された文字を入力してください。コメントデータの処理方法の詳細はこちらをご覧ください。