jQueryMobile

data-属性によるウィジェットの設定

テーマの他にもウィジェットにdata-属性を追加して、色々な事ができます。

ウィジェット 名称=設定値(太字は初期値) 説明
ページ、ダイアログ data-title="文字列" タイトルの設定で文字列を指定する。
戻るボタン data-add-btn-back="true|false" 戻るボタンを追加する
data-back-btn-text="文字列" 戻るボタンに表示する文字列
data-back-btn-theme="a～z" 戻るボタンのテーマ
ヘッダ、フッタ data-position="fixed" ヘッダ、フッタの表示位置
data-fullscreen="true|false" コンテンツをフルスクリーンで表示する。
フッタ data-id="ID文字列" ページが遷移するときに移動しないフッタのIDを設定
ページ data-url="URL文字列" ページのURLの設定
data-dom-cache="true|false" 読み込んだページの内容(DOM)を記憶しておく
ポップアップ data-corners="true|false" ウィジェットを角丸で表示する
data-shadow="true|false" ウィジェットの周囲に影を付ける
data-tolerance"top,right,bottom,left" ウィジェットの周囲の余白
数値の数で設定方法が変わります。
ポップアップへのリンク data-position-to="origin|window|セレクタ" ポップアップを表示する位置の基準
data-transition="fade|flip|flow|pop|slide|slidedown|slidefade|slideup|turn|none" ウィジェットの表示・消去のアニメーション

data-属性を利用してページやダイアログに対するに設定は以下のものがあります。
・ページやダイアログのタイトル
・ボタン「戻る」の追加
・ヘッダ、フッタを常に表示
・コンテンツををフルスクリーンで表示
・ページのURL
・DOMキャッシュを行うか否か
・移動しないフッタ

data-title属性を使ってみる

それぞれのページやダイアログにタイトルを設定する際に使用するのが、data-title属性です。この属性が設定されたページやダイアログが画面に表示されると、HTML文書の<head>内の<title>～</title>で囲まれた文字列が一時的にこの属性の値が変更されます。それに付随してブラウザ画面に表示されるHTML文書のタイトルも変更されます。タイトルの設定gは、GUIんおブラウザならウィンドウの左上かタグで確認できます。
１ページがはじめてっ表示sれた時は<title>～</title>で囲まれた文字列がそのページのタイトルとなります。そして別のページから１ページ目に遷移すると、data-title属性の属性値(文字列)が反映されます。

ボタン「戻る」を追加してみる。

ページのふっだの左端に、ブラウザの戻るボタンと同じ機能を持つボタンを表示させたいときに使用するのが、data-add-btn-back属性です。ボタンを表示させるにはこの属性の値を"true"を設定します。ダイアログでは、この属性と属性値をせっていしてもボタンは表示されません。

この設定をするとボタンに"Back"という文字列が表示されます。このボタンに表示される文字列を変更したいときはdata-back-btn-text属性で値を設定します。この属性の属性値を"戻る"と設定すれば、"戻る"が表示されます。

このボタンに直接テーマを設定する時は、data-back-btn-theme属性を追加します。デフォルトはヘッダのテーマの設定と同じです。

サンプルコードの実行結果はこちら

-jQueryMobile
-