*

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

ページ遷移時にアニメーションを付けてたり、Ajaxによるアクセスを禁止する

リンクを操作し、あるページから別のページに飛ぶときに、MozillaやWebkitベースのブラウザで

記事を読む

no image

ボタンを配置する

リンクを表すaタグに「data-role="button"」を追加すると、画面にはボタンが表示されま

記事を読む

no image

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

年月日など、複数のリストから同時に選択したいとき、ウィジェットのグループ化が有効です。グループ化され

記事を読む

no image

リンク先を設定したり、アイコンを利用する。

リンク(link)とは、次の画面に表示するコンテンツを表すもので、HTMLではaタグで表します。jQ

記事を読む

no image

ヘッダ内、フッタ内にボタンを表示する

ヘッダ内にボタンを表示してみる ヘッダ内にリンクであるaタグを作成すると、それがボタンとして表示さ

記事を読む

no image

data-属性により、ヘッダとフッタを常時表示する

前回の記事の続きです。 ヘッダとフッタを常時表示 ページのヘッダとフッタにdata-posi

記事を読む

no image

ページのURLを設定する

ユーザーにページのURLを知らせる時に使用するのがdata-url属性です。 data-url属性

記事を読む

no image

<select>により項目選択

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

記事を読む

no image

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

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

記事を読む

no image

アイコンとサムネイルを表示する

各項目のレイアウトを設定する <li>の中には、色々なレイアウトを設定できます。いずれ

記事を読む

スポンサードリンク

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 ↑