2012年9月22日土曜日

[改造版] jQueryのiPod風メニュープラグイン『jQuery iPod-style Drilldown Menu』をちょっと改造

jQueryを利用したメニューを実現するプラグインで、
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