jQuery Mobile セレクトメニューを設置する

セレクトメニューはリストの中から項目を選択するフォーム部品ですが、OS によって UI が違っています。jQuery Mobile では OS の UI を利用するセレクトメニューの他に、独自の UI を提供するカスタムセレクトメニューがあります。

«次の特集記事»
«前の特集記事»

【コンテンツ】

  1. 使用するデータ属性
  2. 基本的な設置方法
  3. オプショングループ
  4. 縦に並ぶメニューグループ
  5. 横に並ぶメニューグループ
  6. カスタムセレクトメニュー
  7. プレースホルダーの設定
  8. 複数選択可能なメニュー
  9. オプション指定

【記事執筆時の環境】
jQuery Mobile 1.4.4/1.4.5

使用するデータ属性

データ属性 説明
data-close-text string 閉じるボタンのテキスト
デフォルトは "Close"
data-corners true | false 角丸をつけるかどうか
data-disabled true | false 利用できないようにするかどうか
data-divider-theme swatch letter (a-z) 区切りに適用するスウォッチ
data-hide-placeholder-menu-items true | false プレースホルダ―に指定したメニュー項目を選択リストに表示するかどうか
data-icon アイコンリスト参照 セレクトメニューのアイコン
デフォルトは "carat-d"
data-iconpos left | right | top | bottom | notext アイコンの表示位置
data-inline true | false インライン要素にするかどうか
data-mini true | false 小さいサイズにするかどうか
data-native-menu true | false OS独自のセレクトメニューを使用するかどうか
data-overlay-theme swatch letter (a-z) jQuery Mobileのセレクトメニューに適用するスウォッチ
「data-native-menu="false"」の指定が必要
data-placeholder true | false メニューのヘッダーに表示するoption要素に指定
data-role none jQuery Mobile のスタイルを適用しない
data-shadow true | false ボタンに影をつけるかどうか
data-theme swatch letter (a-z) 適用するスウォッチ
data-type horizontal | vertical グループの並び方向

基本的な設置方法

jQuery Mobile のセレクトメニューウィジェットは、最初のセレクトボタンと外観のスタイルを設定していますが、デフォルトではセレクトボタンをクリックしたら、OSに実装されているメニューリストが開くようになっています。

jqm32-1

設置するには option要素を含んだ select要素を記述すれば、自動的に jQuery Mobile のセレクトメニューになります。data-role属性の指定は必要ありません。jQuery Mobile のセレクトメニューを適用したくない場合は、「data-role="none"」を select要素に指定します。

対応する label要素もあわせて記述し、label要素の for属性には select要素の idを指定します。

オプショングループ

選択項目がカテゴリに分かれている場合は、optgroup要素でカテゴリに含む option要素を囲むことにより、分類されたリストを作ることができます。

jqm32-2

縦に並ぶメニューグループ

複数のセレクトメニューをグループ化すると、角丸がついた1つのボックスとして表示されます。

jqm32-3

設置するにはすべてのセレクトメニューを fieldset要素で囲みます。
そして fieldset要素には「data-role="controlgroup"」を指定します。
グループのタイトルは、legend要素を設け記述します。

横に並ぶメニューグループ

セレクトメニューグループはデフォルトでは縦に並びますが、
fieldset要素に「data-type="horizontal"」を指定すると、横に並ぶグループになります。

jqm32-4

カスタムセレクトメニュー

異なるプラットフォーム間でメニューのスタイルを揃えたい場合は、jQuery Mobile で用意しているカスタムセレクトメニューを使います。カスタムセレクトメニューでは、プラットフォームによってはサポートしていない機能も実装することができます。例えば複数選択、オプショングループ、プレースホルダーなどです。

jqm32-5

選択項目が多くなった場合は、端末の画面にフィットするようにポップアップで表示されます。ポップアップには閉じるボタンが付加されます。

jqm32-6

ただしカスタムセレクトメニューには、オーバーヘッドが生じることも考慮しなければなりません。ページにたくさんのカスタムセレクトメニューがある場合はパフォーマンスの低下につながります。

設置するには、select要素に「data-native-menu="false"」を指定するだけです。

プレースホルダーの設定

セレクトメニューでは、初期状態のボタンにタイトルや選択してもらうための文章を表示させておくことがあります。そしてこの状態は何も選択されていない状態を示します。

OS搭載のメニューではプレースホルダーを設けても、他の項目と変わらずリストに出てきて選択できるようになっています。
jQuery Mobile ではプレースホルダーをリストのタイトルとして表示し、選択できない状態にすることができます。

jqm32-20

プレースホルダーを設置するには「data-native-menu="false"」を select要素に指定し以下のいずれかを行います。

  • value属性のないoption要素を設置する
  • テキストのないoption要素を設置する
  • 「data-placeholder="true"」を指定したoption要素を設置する

複数選択可能なメニュー

複数選択を可能にするには、select要素に「multiple」と「data-native-menu="false"」を指定します。
このときjQuery Mobile では以下の特徴をもった UIになります。

  • プレースホルダーに指定した option要素のテキストがリストのヘッダーとなり、ヘッダーの左には閉じるボタンが付加されます。プレースホルダーを設置しない場合はボタンとリストヘッダーにテキストは表示されません。
  • リスト内の選択項目をクリックしてもリストは閉じません。閉じる場合は閉じるボタンをクリックします。
  • 項目をクリックすると右側にあるボックスにチェックがトグルで付きます。
  • リストを閉じるとチェックした項目数がカウンターボックスに表示されます。

jqm32-21

オプション指定

メニューを無効にする

「data-disabled="true"」を指定するとボタンがグレイアウトし無効になります。

jqm32-11

ミニサイズにする

「data-mini="true"」を指定すると、ミニサイズになります。

jqm32-12

アイコンの種類を変更する

data-icon属性でアイコンの種類を変更できます。

jqm32-13

アイコンの表示位置を変更する

data-icon属性でアイコンの表示位置を変更できます。

jqm32-14

インラインメニューにする

「data-inline="true"」を指定すると、テキストの長さに応じたインラインメニューになります。

jqm32-15

テーマを変更する

data-theme属性でテーマ(スウォッチ)を変更できます。

jqm32-16

オーバーレイテーマを変更する

data-overlay-theme属性でオーバーレイのテーマ(スウォッチ)を変更できます。

jqm32-17

セレクトメニューは OSによって UIがかなり違いますので、Web制作者にとってはどのように実装すればよいか悩む部分です。jQuery Mobile で統一された UIが提供できるのはユーザーと制作者双方にとって大きなメリットとなりますね。

«次の特集記事»
«前の特集記事»

スポンサーリンク

jQuery Mobile 特集記事

基本的な使い方

ウィジェットの設置

フォームの設置

イベント・動作設定

カスタマイズ

使い方の応用

オンライン講座

Webの基礎マスター講座ページへのリンク


連載講座:WordPressで作る簡単Webサイトページへのリンク

提供しているサービス

WordPressサイト制作出張講座ページへのリンク

WordPress を利用した Webサイト制作の方法を、
あなたのオフィスにうかがいご説明いたします。
料金:¥45,000

サービス詳細ページ >>

申し込みフォーム >>


Webサイト1日公開サービスページへのリンク

一刻も早く Webサイトが必要な方のために、
一緒に作業し1日で公開までもっていきます。
料金:¥45,000

サービス詳細ページ >>

申し込みフォーム >>

スポンサーリンク

ページの先頭へ