iPod風に深い階層をスライドして表現するプラグインがあります。
『jQuery iPod-style Drilldown Menu』 http://filamentgroup.com/lab/jquery_ipod_style_and_flyout_menus/
結構有名なプラグインのようで、「jQuery menu ipod」あたりで検索すると
多くの紹介ページがヒットします。
しかしながら、実際に利用しようとした際にバグがあったり、
手を入れたいと思った部分がありました。
そこで、バグ修正および若干の機能追加を行ったものを作成しました。
変更点は以下の通りです。
- サブメニュー項目数が親メニューより多い場合に、Backボタンの表示が崩れるのを修正
(本家ページのDenis Shaposhnikov氏のコメントより) - 速いスピードでメニューを開閉すると、表示が崩れることがあるのを修正
(本家ページのtim氏のコメントより) - ウィンドウサイズを変更した際、メニューの位置がずれるのを修正
- 初期化時のcontentオプションにjQeuryオブジェクトを指定できるようにした
- メニュー内のボタン以外の部分をクリックした際、メニューが閉じないようにした
- オプションの"backLinkText"がパンくずリストを使用しない時に反映されなかったのを修正
初期化時のcontentオプションにjQueryオブジェクトを指定できるようにした理由は、
メニュー内部の要素にイベントを設定していた場合、元コードではメニューはcontentオプションに指定した要素内のHTMLをコピーして作成しており、イベントはコピーされず意図した動作にならない可能性があるためです。
contentオプションにjQueryオブジェクトを指定することにより、イベントを維持したままメニューを構成できます。
メニュー内のボタン以外の部分をクリックした際、メニューが閉じないようにした理由は、
例えばラジオボタンや入力欄などのinput要素をメニュー内に設置した時に、クリックした瞬間にメニューが閉じられては困るからです。
※Bloggerの仕様変更なのか、この投稿内でのサンプルは動かなくなったので削除しました。
ダウンロードはGitHubに本家からforkしたものがあるのでそちらからどうそ。
https://github.com/takaaki-kasai/jQuery-Menu
0 件のコメント:
コメントを投稿