セレクトメニュー

セレクトメニューは、ネイティブな select 要素から派生したものですが、実際の select 要素は見た目から消え、完全に新しいjQuery Mobileによって生成された使い勝手のインターフェースに置き換わります。置換されるコントロールはARIA互換となっており、デスクトップ上ではキーボードによる操作にも対応しています。セレクトメニューに設定可能な属性についてはdata属性リファレンスを参照してください。

セレクトボタンがクリックされると、OSのネイティブなセレクトメニューが開きます。メニューが選択されると、選択された値にボタンが切り替わります。

このセレクトウィジェットを作成するには、まず option 要素を抱えた通常の select 要素を記述します。そして label 要素の for 属性に select のIDを指定して、セマンティックに結び付けます。もしページレイアウト的な理由からラベルを表示したくない場合、ラベルを隠すことも可能です。しかしセマンティックな、そしてアクセシビリティの観点から、かならずラベルを作成するようにしまし>ょう。

フレームワークは全ての select 要素を見つけて、自動的にこのカスタムメニューに置き換えます。この自動初期化を止めるには select 要素に data-role=“none” 属性を指定します。

<label for="select-choice-0" class="select">Shipping method:</label>
<select name="select-choice-0" id="select-choice-1">
   <option value="standard">Standard: 7 day</option>
   <option value="rush">Rush: 3 days</option>
   <option value="express">Express: next day</option>
   <option value="overnight">Overnight</option>
</select>

このコードにより、基本的なセレクトメニューがつくられます。デフォルトでセレクトメニューは親要素の横幅いっぱいのサイズになりますので、ラベルは別の行に表示されます。

Shipping method:

ミニバージョン

ツールバー内など狭いスペースでは、よりコンパクトな大きさのボタンが便利です。ボタンに data-mini=“true” 属性を追加することで、ミニサイズにできます。

<label for="select-choice-min" class="select">Shipping method:</label>
<select name="select-choice-min" id="select-choice-1" data-mini="true">
   <option value="standard">Standard: 7 day</option>
   <option value="rush">Rush: 3 days</option>
   <option value="express">Express: next day</option>
   <option value="overnight">Overnight</option>
</select>

Shipping method:

フィールドコンテナ

これらをコンテナ要素で囲み、そこに data-role=“fieldcontain” 属性を指定することで、見た目を制御することも可能です。

<div data-role="fieldcontain">
        <label for="select-choice-1" class="select">Choose shipping method:</label>
        <select name="select-choice-1" id="select-choice-1">
                <option value="standard">Standard: 7 day</option>
                <option value="rush">Rush: 3 days</option>
                <option value="express">Express: next day</option>
                <option value="overnight">Overnight</option>
        </select>
</div>

このセレクトメニューは次のように表示されます。

Choose shipping method:

こちらは、非常に長い選択肢の例です。

Your state:

縦方向にグループ化されたセレクトメニュー

グループ化されたセレクトメニューをつくるには、まず select 要素と対応する label を用意します。そして label の for 属性を、対応する select 要素の id と一致させます。

ラベル( label )は各セレクトメニューに使われているため、ここではセレクトメニュー群を囲む fieldset の中に legend を置くことをお勧めします。

最後に fieldset を div で囲み data-role=“controlgroup” 属性を指定することで、グループ化できます。

<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
        <legend>Date of Birth:</legend>

    <label for="select-choice-month">Month</label>
<select name="select-choice-month" id="select-choice-month">
        <option>Month</option>
        <option value="jan">January</option>
        <!-- etc. -->
</select>

  <label for="select-choice-day">Day</label>
<select name="select-choice-day" id="select-choice-day">
        <option>Day</option>
        <option value="1">1</option>
        <!-- etc. -->
</select>

<label for="select-choice-year">Year</label>
<select name="select-choice-year" id="select-choice-year">
        <option>Year</option>
        <option value="2011">2011</option>
        <!-- etc. -->
</select>
</fieldset>
</div>

Date of Birth: Month Day Year

横方向にグループ化されたセレクトメニュー

セレクトメニューは、複数を集めてグループ化することも可能です。横方向にグループ化するには fieldset に data-type=“horizontal” 属性を指定します。セレクトメニューを表示させるボタンの横幅は、現在選択されているオプションの文字列長によるので注意してください。また、ブラウザが display: inline-block; という指定をサポートしていない場合、前項にあるような縦方向のグループになります。

<fieldset data-role="controlgroup" data-type="horizontal">

Date of Birth: Month Day Year

セレクトメニュープラグインの呼び出し

セレクトメニューは data-role 属性の指定を必要とせず、自動的に初期化されます。しかし、もし他のjQueryプラグイン同様に手動で特定の要素に textinput プラグインを適用したい場合、次のようにします。

$('select').selectmenu();

テーマ設定

jQuery Mobileのボタンで使うことの出来る data 属性は、全てセレクトメニューでも利用可能です。次のサンプルでは、テーマとアイコンを設定しています。

Actions

セレクト要素に data-overlay-theme 属性を追加することも可能です。これは、ダイアログベースのカスタムセレクトメニュー表示時のオーバーレイや、小さなカスタムメニューの外枠線に使われる指定です。デフォルトで、この値はスウォッチAになっています。

Size

Choose state(s):

このセレクトメニューを更に拡張して、フレームワークはカスタムメニューを作成することも行います。これにより、OSネイティブの選択メニューではなく独自スタイルのセレクトメニューを使うことが可能です。カスタムメニューは disable オプションと複数選択(どちらもモバイルOSがネイティブに実装しているはずであるが、いずれも上手く動作しない)をサポートしています。また、プレースホルダーをエレガントに実装し、更にはAndroidなど特定のプラットフォームでは実装されていない optgroup もサポートします。

オプション

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

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" });

mini boolean

default: false

要素のサイズを、よりコンパクトなミニバージョンにする。このオプションは、data属性でも指定可能: data-mini="true"

$('select').selectmenu({ mini: "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) { ... }
});

[PR] jQuery Mobileリファレンスが書籍になりました

森直彦 (著)

2012年1月20日発売

新品￥2,709