jQueryMobile リンク先を設定したり、アイコンを利用する。
リンク(link)とは、次の画面に表示するコンテンツを表すもので、HTMLではaタグで表します。jQueryMobileを利用しないならaタグで囲まれたリンク先を示す文字列は青色で、文字列の下にアンダーバーが引かれています。
下記の表...
2016-04
jQueryMobile jQueryMobile class属性によりレイアウトとテーマを設定する
ウィジェットが画面に表示されるとき、HTMLタグには様々なclass属性が追加されます。これらはCSSの設定を反映してレイアウトやテーマを表示するのに利用されます。今回は、前回までの記事で紹介したdata-属性とは異なる設定で追加できるcl...
jQueryMobile ページのURLを設定する
ユーザーにページのURLを知らせる時に使用するのがdata-url属性です。
data-url属性を使用したサンプルコードの実行結果はこちら
サンプルコードの実行結果を確認すると、初めに表示されるページにはページ２へのリン...
jQueryMobile 移動しないヘッダ、フッタにIDを設定する
MozillaやWebkitベースのブラウザでは、リンクにdata-transition="slide"などのアニメーションが設定されていると、ページ遷移時に、サンプルコードの実行結果のようにヘッダ、フッタも同じアニメーションで切り替わりま...
jQueryMobile コンテンツをフルスクリーンで表示する
ヘッダ、フッタにdata-position="fixed"とdata-fullscreen="true"を設定すると、表示されるコンテンツの周囲に余白が全くないフルスクリーンで表示されます。これは動画、画像など画面全体で楽しむコンテンツを表...
jQueryMobile data-属性により、ヘッダとフッタを常時表示する
前回の記事の続きです。
ヘッダとフッタを常時表示
ページのヘッダとフッタにdata-position="fixed"を書くと、ページの縦の長さが画面より大きく、その画面をスクロールさせた後でも、常に画面の上部にヘッダ、下部にフッタを...
jQueryMobile data-属性によるウィジェットの設定
テーマの他にもウィジェットにdata-属性を追加して、色々な事ができます。
ウィジェット
名称=設定値(太字は初期値)
説明
ページ、ダイアログ
data-title="文字列"
タイトルの設定で...
jQueryMobile テーマを設定する
テーマとは、統一化された各ウィジェットの外観などのデザインの事で、それぞれに名前がついています。同じ画面に表示される別々のウィジェットに対して同じ名前のテーマを設定して表示すると、画面全体のデザインに統一感がでます。
テーマの種類
...
jQueryMobile ポップアップを表示する
ポップアップ(popup)とは、pageの上に付加情報や画像などのコンテンツを重ねて表示するウィジェットのことです。ウィジェットの隅にはアイコンを表示することができます。ダイアログと似ている点もありますが、それとは違い、ヘッダは表示しなくて...
jQueryMobile ダイアログ
ダイアログは、ユーザーに対して警告や注意をひくために、伝えたいことを表示します。ダイアログが表示されると、デフォルトでは背景が別の色に変わってダイアログ以外のウィジェットが操作できなくなります。これを閉じるには左上の「×」か、ブラウザの戻る...