data属性リファレンス

Data属性 リファレンス

jQuery MobileフレームワークはHTML5の data- で始まる属性値を使ってマークアップを基本としたウィジェットの初期化を行います。これらの属性値は、全て省略可能です。プラグインの初期化を手動で行い、そこに各オプションを渡す方法もまた、サポートされています。他のプラグインやフレームワークと衝突することを避けるため、必要に応じて data- 属性に名前空間を与えることも出来ます。詳しくはグローバル設定を参照してください。

ボタン

リンクに data-role=“button” を指定したものです。Inputを用いたものやbutton要素では data-role 属性の指定が無くても自動的に最適化されます。

data-corners	true | false
data-icon	home | delete | plus | arrow-u | arrow-d | check | gear | grid | star | custom | arrow-r | arrow-l | minus | refresh | forward | back | alert | info | search
data-iconpos	left | right | top | bottom | notext
data-iconshadow	true | false
data-inline	true | false
data-shadow	true | false
data-theme	swatch letter (a-z)

複数のボタンを data-role=“controlgroup” 属性を指定したコンテナで囲むと、縦方向にグループ化することができます。そこに data-type=“horizontal” 属性を指定すると、ボタンは横方向に並べられます。

チェックボックス

ラベルと type=“checkbox” 属性を指定した input 要素の組み合わせで自動的に最適化されます。この時 data-role の指定は不要です。

data-role	none (prevents auto-enhancement to use native control)
data-theme	swatch letter (a-z) - Added to the form element

開閉式コンテンツ

コンテナ要素に data-role=“collapsible” 属性を指定し、ヘッダとコンテンツを囲んだものです。

data-collapsed	true | false
data-content-theme	swatch letter (a-z)
data-theme	swatch letter (a-z)

アコーディオン式コンテンツ

複数の開閉式コンテンツをコンテナで囲み data-role=“collapsible-set” を指定したものです。

data-content-theme	swatch letter (a-z) - Sets all collapsibles in set
data-theme	swatch letter (a-z) - Sets all collapsibles in set

ダイアログ

コンテナに data-role=“page” もしくは “dialog” が指定され、アンカーに data-rel=“dialog” が指定されたものによってリンクされたものです。

data-close-btn-text	string (text for the close button, dialog only)
data-dom-cache	true | false
data-id	string (unique id for the page)
data-fullscreen	true | false (used in conjunction with fixed toolbars)
data-overlay-theme	swatch letter (a-z) - overlay theme when the page is opened in a dialog
data-theme	swatch letter (a-z)
data-title	string (title used when page is shown)

コンテンツ

コンテナに dasta-role=“content” が指定されたものです。

data-theme	swatch letter (a-z)

フィールドコンテナ

ラベルとフォーム要素の組み合わせをコンテナで囲み data-role=“fieldcontain” を指定したものです。

フリップスイッチ

Select要素に data-role=“slider” 属性を指定し、オプションを2つだけにしたものです。

data-role	none (prevents auto-enhancement to use native control)
data-theme	swatch letter (a-z) - Added to the form element
data-track-theme	swatch letter (a-z) - Added to the form element

フッタ

コンテナに data-role=“footer” を指定したものです。

data-id	string (unique id, useful in persistent footers)
data-position	fixed
data-theme	swatch letter (a-z)

ヘッダ

コンテナに data-role=“header” を指定したものです。

data-add-back-btn	true | false (auto add back button, header only)
data-back-btn-text	string
data-back-btn-theme	swatch letter (a-z)
data-position	fixed
data-theme	swatch letter (a-z)
data-title	string (title used when page is shown)

リンク

アンカーリンクです。属性に data-role=“button” を指定したものを含みます。また submit ボタンも同じものを持ちます。

data-ajax	true | false
data-direction	reverse (reverse page transition animation)
data-dom-cache	true | false
data-prefetch	true | false
data-rel	back (to move one step back in history) dialog (to open link styled as dialog, not tracked in history) external (for linking to another domain)
data-transition	slide | slideup | slidedown | pop | fade | flip

リストビュー

リスト(ol, ul)に data-role=“listview” を指定したものです。

data-count-theme	swatch letter (a-z)
data-dividertheme	swatch letter (a-z)
data-filter	true | false
data-filter-placeholder	string
data-filter-theme	swatch letter (a-z)
data-inset	true | false
data-split-icon	home | delete | plus | arrow-u | arrow-d | check | gear | grid | star | custom | arrow-r | arrow-l | minus | refresh | forward | back | alert | info | search
data-theme	swatch letter (a-z)

リストビューアイテム

リストビューに含まれるリストアイテム(li)です。

data-icon	home | delete | plus | arrow-u | arrow-d | check | gear | grid | star | custom | arrow-r | arrow-l | minus | refresh | forward | back | alert | info | search
data-role	list-divider
data-theme	swatch letter (a-z) - can also be set on individual LIs

ページ

コンテナに data-role=“page” 属性が指定されたものです。

data-close-btn-text	string (text for the close button, dialog only)
data-dom-cache	true | false
data-id	string (unique id for the page)
data-fullscreen	true | false (used in conjunction with fixed toolbars)
data-overlay-theme	swatch letter (a-z) - overlay theme when the page is opened in a dialog
data-theme	swatch letter (a-z)
data-title	string (title used when page is shown)

ラジオボタン

ラベルと type=“radio” 属性を指定した input 要素の組み合わせで自動的に最適化されます。この時 data-role の指定は不要です。

data-role	none (prevents auto-enhancement to use native control)
data-theme	swatch letter (a-z) - Added to the form element

セレクトメニュー

セレクト要素( select )です。この時 data-role の指定は不要です。

data-icon	home | delete | plus | arrow-u | arrow-d | check | gear | grid | star | custom | arrow-r | arrow-l | minus | refresh | forward | back | alert | info | search
data-iconpos	left | right | top | bottom | notext
data-inline	true | false
data-native-menu	true | false
data-overlay-theme	swatch letter (a-z) - overlay theme for non-native selects
data-placeholder	true | false - Add to the Option
data-role	none (prevents auto-enhancement to use native control)
data-theme	swatch letter (a-z) - Added to the form element

複数のセレクトメニューを data-role=“controlgroup” 属性を指定したコンテナで囲むと、縦方向にグループ化することができます。そこに data-type=“horizontal” 属性を指定すると、セレクトメニューは横方向に並べられます。

スライダー

Input要素に type=“range” を指定したものです。この時 data-role の指定は不要です。

data-role	none (prevents auto-enhancement to use native control)
data-theme	swatch letter (a-z) - Added to the form element
data-track-theme	swatch letter (a-z) - Added to the form element

テキスト入力

Input要素に type=“text” や “number” 、 “search” などを指定したもの、あるいは textarea 要素です。この時 data-role の指定は不要です。

data-role	none (prevents auto-enhancement to use native control)
data-theme	swatch letter (a-z) - Added to the form element