*

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

公開日: : 最終更新日:2016/04/24 jQueryMobile

テーマの他にもウィジェットに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んおブラウザならウィンドウの左上かタグで確認できます。
1ページがはじめてっ表示sれた時は<title>~</title>で囲まれた文字列がそのページのタイトルとなります。そして別のページから1ページ目に遷移すると、data-title属性の属性値(文字列)が反映されます。

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

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

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

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

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

スポンサードリンク

関連記事

no image

ダイアログ

ダイアログは、ユーザーに対して警告や注意をひくために、伝えたいことを表示します。ダイアログが表示され

記事を読む

no image

ボタンを設定する

前回の記事では<a data-role="button">によるボタンを取り上げましたが

記事を読む

no image

トグルスイッチを設定する

トグルスイッチ(toggle switch)とは、〇型のつまみを左右にドラッグして2つの値のうちどち

記事を読む

no image

折りたたみを設定する

おりたたみ(collapse)は、予め概要を示す文字列が表示されている領域をクリックかタップすると、

記事を読む

no image

<select>により項目選択

ボタンによる選択では、1つの項目だけ選択するか、複数を同時に選択するかで、ラジオボタンかチェックボッ

記事を読む

no image

ポップアップを表示する

ポップアップ(popup)とは、pageの上に付加情報や画像などのコンテンツを重ねて表示するウィジェ

記事を読む

no image

項目リストを設定する

項目リスト(listview)は、ふくすうの項目を列挙するためのウィジェットで、項目には文字列や、画

記事を読む

no image

ページ(page)とは

jQueryMobileでは、スマートフォンの画面に表示するページ(page)というウィジェットで構

記事を読む

no image

jQueryMobileカテゴリーで出てくる用語集

jQueryMobileの記事で登場する用語を下記の表にまとめました。学習するときの助けになるかも。

記事を読む

no image

バルーンを表示、項目を分割、折り畳みやポップ内にlistviewを作成する。

バルーンとは、円形の囲みのことで、jQueryMobileでは、その内部に文字列を表示するために、実

記事を読む

スポンサードリンク

Message

メールアドレスが公開されることはありません。

CAPTCHA


次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">



スポンサードリンク

jQueryMobile
トグルスイッチを設定する

トグルスイッチ(toggle switch)とは、〇型のつまみを左右に

jQueryMobile
項目選択の複数ウィジェットをグループ化する

年月日など、複数のリストから同時に選択したいとき、ウィジェットのグルー

jQueryMobile
<select>により項目選択

ボタンによる選択では、1つの項目だけ選択するか、複数を同時に選択するか

jQueryMobile
値を選択するボタンを表示する

値を選択するボタンは以下の2つがあります。 ・複数の値から1つだ

jQueryMobile
ボタンを設定する

前回の記事では<a data-role="button">

→もっと見る

  • スポンサーリンク

PAGE TOP ↑