カスタムメニュー

jQuery Mobileでは select 要素のオプションリストを使ってカスタムメニューを生成することも可能です。特に複数選択が必要な場合や、メニューをCSSでスタイルしたいような場合にはお勧めです。

ネイティブなセレクトメニューではないカスタムメニューを使うことも出来ます。メニューにテーマを適用することにより、サイト全体の見た目や使い勝手にそろえたり、プラットフォーム間での一貫性を保つことができます。さらに、これは複数選択や、Androidなど特定のプラットフォームでなくなってしまった optgroup 、後述するようなプレースホルダーの機能をサポートしています。最後に、カスタムメニューはデスクトップブラウザ上でも見た目が良くなります。ネイティブなメニューはモバイル端末用のパーツに比べるとやや小さく、少し奇妙に見えてしまうかもしれません。

ただ、カスタムメニュー化することは、パフォーマンスに負荷をかけることに留意してください。ページ上に多くのセレクトメニューを配置したり、非常に長いリストを作ったりすると、パフォーマンスが悪化するかもしれません。その場合は、利用を控えた方が良いかもしれません。

特定の select だけでカスタムメニューを使う場合、そこに data-native-menu=“false” を指定して下さい。あるいは、プログラムから直接セレクトメニューの nativeMenu オプションを false にすることでも設定可能です。その場合、この処理は mobileinit イベント内で効果が発揮される前に実行されるようにしてください。次の例は、全ての select がカスタムメニューを使うようにします。この処理はjQueryがロードされ、jQuery Mobileがロードされる前に記述するようにしてください。

$(document).bind('mobileinit',function(){
        $.mobile.selectmenu.prototype.options.nativeMenu = false;
});

デバイスの画面に対して option が少なければ、小さなポップアップが重ねられます。

画面に収まりきれない量のリストがあれば、フレームワークはj動的にリスト専用の「ページ」を新規に作成して、切り替わるようにします。これによりリストの操作にページ全体のスクロール機能を使うことが出来、使い勝手が向上します。その際は label に指定した文字列がページのタイトルになります。

特定オプションを使用不可にする

jQuery Mobileは option 要素のうち disabled 属性が指定されたものに、自動的に使用不可のスタイルを設定します。以下の例では “Rush: 3 days” に disabled が設定されています。

プレースホルダー

開発者がよく使う手法として、選択肢に “null” を含めて、何も選択していない状態を作ることがあります。jQuery Mobileはこのようなプレースホルダーを見つけると、カスタムメニュー内からは選択肢を削除します。そして場合によってはメニューのヘッダにプレースホルダーのテキストを表示します。フレームワークがプレースホルダーを見分けるには、次のいずれかの方法で指定してください。

  • value属性を指定しない(あるいは空のvalue属性を作る) option を作る
  • テキストノードの無い option を作る
  • data-pleceholder=“true” を指定した option を作る (これによって value もテキストノードも設定されたプレースホルダーを作ることが可能になります)

また、この機能をプラグインの hidePlaceholderMenuItems オプションを false にすることで停止させることも出来ます。

$.mobile.selectmenu.prototype.options.hidePlaceholderMenuItems = false;

以下は、プレースホルダーの幾つかの使い方です。

複数選択

もし multiple 属性が指定されていた場合、jQuery Mobileは次のような挙動をします。

  • メニュー内にヘッダを作り、プレースホルダーのテキストと閉じるボタンを付ける
  • アイテムをクリックしても、メニューを自動的に閉じない
  • アイテムの後ろにチェックボックスが付けられる。仮に選択肢がひとつしかなくても同様。
  • 複数のアイテムがチェックされた場合、ボタン上に選択された数を表す数値が表示される。
  • ボタン内には複数の選択されたアイテムを示す文字列が表示される。スペースが不足している場合、省略される。
  • 何も選択されていない場合、プレースホルダーのテキストが表示される。
  • プレースホルダーが無い場合、ボタンのデフォルトは空白で、メニューのヘッダもブランク状態で閉じるボタンだけが表示される。これはユーザビリティを下げるので、複数選択利用時にはプレースホルダーを作成することをお勧めします。

セレクトメニューが新たなページが必要になるような大きさだった場合、プレースホルダーのテキストは何も選択されていない時はボタンに表示され、 label のテキストがメニューのヘッダに表示されます。小さなオーバーレイメニューが表示される場合は、プレースホルダーの文字列がボタンとメニューのヘッダに使われたのに対して、メニューが全画面になる場合はプレースホルダーは一切使われなくなります。

オプショングループ

セレクトメニューが optgroup 要素を含んでいた場合、jQuery Mobileは自動的にカスタムメニュー内を label 要素に従ってグループ分けします。
h3. data 属性

オプション

セレクトメニュープラグインは、次のオプションを持っています。

corners boolean

default: true

ここにtrueを設定した場合、テーマで設定された角の丸みが適用されます。このオプションは、次のようなdata属性でも設定可能です: data-corners="false"

$('select').selectmenu({ corners: "false" });
icon string

default: "arrow-down"

ボタンに表示するアイコンを アイコンセット から指定します。この>オプションは、次のようなdata属性でも指定可能です: data-icon="star"

$('select').selectmenu({ icon: "star" });
iconpos string

default: "right"

ボタン上のアイコン位置を指定します。指定可能な値は、left, right, none, notextのいずれかです。notextを指定すると、テキスト表示の無>いアイコンだけのボタンになります。このオプションは、次のようなdata属性でも指定可能です: data-iconpos="left"

$('select').selectmenu({ iconpos: "left" });
iconshadow boolean

default: true

ここにtrueを設定した場合、ボタンのアイコンにテーマで設定された影がつけられます。このオプションは、次のようなdata属性でも設定可能です: data-iconshadow="false"

$('select').selectmenu({ iconshadow: "false" });
initSelector CSS selector string

default: "select:not(:jqmData(role='slider'))"

ここには、フォームボタンとして自動初期化する対象をあらわすセレクタ(要素やdata-roleなど)を定義します。この記述は mobileinit イベン>トで行います。

$( document ).bind( "mobileinit", function(){
        $.mobile.selectmenu.prototype.options.initSelector = ".myselect";
});
inline boolean

default: null (false)

ここに true がセットされると、セレクトボタンはテキストにあわせた横幅のインラインボタンのような動作になります。初期値は null(false) なので、セレクトボタンは横幅いっぱいになっています。この設定はdata属性でも可能です: data-inline="true"

$('select').selectmenu({ inline: "true" });
nativeMenu boolean

default: true

ここに true がセットされると、カスタムスタイルになるはずのセレクトメニューをクリックした場合でも、ネイティブなセレクトメニューが使われるようになります。これはパフォーマンス的には最良です。ここに false が指定されれば、ネイティブメニューではなくカスタムセレクトメニューが使われます。この設定はdata属性でも可能です: data-native-menu="false"

$('select').selectmenu({ nativeMenu: "false" });
shadow boolean

default: true

ここにtrueを設定した場合、ボタンが影付きになります。このオプションは、次のようなdata属性でも設定可能です: data-shadow="false"

$('select').selectmenu({ shadow: "false" });
theme string

default: null, inherited from parent

>ウィジェットの色(スウォッチ)を指定します。テーマで定義されたスウォッチをあらわすaからzまでのアルファベットが指定できます。デフォルトでは、個別に設定されない場合、親要素のスウォッチ指定を引き継ぐようになっています。このオプションは、次のようなdata属性でも設定可能です: data-theme="a"

$('select').selectmenu({ theme: "a" });

メソッド

セレクトメニュープラグインは、次のようなメソッドを持っています。

close 開いているセレクトメニューを閉じる。
$('select').selectmenu('close');
enable 使用不可状態のセレクトメニューを、使用可能にする。
$('select').selectmenu('enable');
disable セレクトメニューを使用不可状態にする。
$('select').selectmenu('disable');
open 閉じているセレクトメニューを開く。
$('select').selectmenu('open');
refresh カスタムスタイルに値の更新を通知する。
ネイティブな select 要素が更新された場合、それを反映するために refresh メソッドを実行する必要があります。もしセレクト内にある幾つかのオプションの状態が実際に表示されているものとは異なった場合、カスタムメニューを再構築しましょう。 
//refresh value                      
$('select').selectmenu('refresh');
//refresh and force rebuild
$('select').selectmenu('refresh', true);

イベント

jQuery Mobileによる仮想的なイベント、もしくは change, focus, blur などのような標準的なJavaScriptのイベントにバインドできます。

$(".mySelect").bind( "change", function(event, ui) {
  ...
});

セレクトメニュープラグインは、次のようなメソッドを持っています。

create セレクトメニューが生成された際に発生します。
$( ".selector" ).selectmenu({
   create: function(event, ui) { ... }
});