フリーランス WEBデザイナー 【キングサイト】
最近のウェブ制作技術
WordPress(ワードプレス)で記事のアップと同時にFacebookやTwitterに共有させることが出来る「Jetpack」プラグインの設定方法
ソーシャルネットサービス【SNS】情報・活用方法
WordPress(ワードプレス)で記事のアップと同時にFacebookやTwitterに共有させることが出来る「Jetpack」プラグインの設定方法
WordPress(ワードプレス)で親カテゴリーを指定して子カテゴリ一覧(カテゴリーリスト)を表示させる方法
ブログツール【CMS】情報とWEBコンテンツ技術
WordPress(ワードプレス)で親カテゴリーを指定して子カテゴリ一覧(カテゴリーリスト)を表示させる方法
Webデザイナーになる為の第一歩(初級)
WEB屋になる為の知識と技術
Webデザイナーになる為の第一歩(初級)
WordPress(ワードプレス)でカテゴリー編集画面に新しい項目と画像アップロード機能を追加する設定方法
ブログツール【CMS】情報とWEBコンテンツ技術
WordPress(ワードプレス)でカテゴリー編集画面に新しい項目と画像アップロード機能を追加する設定方法
WordPress(ワードプレス)でカテゴリー編集画面に新しい項目を追加する設定方法
ブログツール【CMS】情報とWEBコンテンツ技術
WordPress(ワードプレス)でカテゴリー編集画面に新しい項目を追加する設定方法
ウェブ制作カテゴリ
Facebookの投稿
ウェブ制作技術 SNS・ブログ
おすすめウェブサイト
ウェブ制作のご注文は全国対応

北海道 青森 岩手 秋田 宮城 山形 福島 東京 神奈川 埼玉県 千葉 茨城 群馬 栃木 愛知 静岡 三重 岐阜 新潟 長野 山梨 石川 富山 福井 大阪 京都 奈良 兵庫 滋賀 和歌山 岡山 広島 鳥取 山口 島根 愛媛 徳島 高知 香川 福岡 佐賀 長崎 大分 熊本 宮崎 鹿児島 沖縄

jQuery Mobileを利用してヘッダー/フッターを設置する方法

17.11.15 17:40 | コメント(0)

jQuery Mobileでヘッダー/フッターを設置する方法

jQuery mobileではヘッダー、フッターなど、簡単な指定で設置することができます。 ヘッダーやフッターにボタンを追加したり位置を固定したりすることもjQuery mobile用のクラス要素を利用すれば簡単に設置することができます。

 1. ヘッダー/フッターにボタンを追加する
 2. ヘッダー/フッターを固定で配置する
 3. ボタンに指定するクラス要素の一覧
 4. ボタンに指定するデータ属性の一覧

ヘッダー/フッターにボタンを追加する

jQuery mobileでヘッダー/フッターにボタンを追加する場合、ボタンを指定する要素を使って追加ができます。

【ヘッダー】

ヘッダー タイトル

サンプルはこちら

【ボタンを追加したヘッダー】
Home

ヘッダー タイトル

About
サンプルはこちら

【フッター】

Copyright

サンプルはこちら

【ボタンを追加したフッター】
※デフォルトの状態のフッターにボタンを置くとボタンが左詰めの状態で余白が無い状態で設置されますので、フッター要素に対して「class="ui-bar"」属性を設定することで、ツールバーの表示に余白が設定されます。

サンプルはこちら

ヘッダー/フッターを固定で配置する

jQuery mobileでヘッダー/フッターの位置を固定で表示させたい場合、「data-position="fixed"」属性を追加することで表示が固定になります。

【固定で配置したヘッダー】
ヘッダータイトル
サンプルはこちら

【固定で配置したフッター】
フッタータイトル
サンプルはこちら

ボタンに指定するクラス要素の一覧

ヘッダー/フッターに配置したボタンに指定するクラス要素の一覧をご紹介します。
クラス 説明
ui-btn-left ボタンを左側に設置
ui-btn-right ボタンを右側に設置

ボタンに指定するデータ属性の一覧

ヘッダー/フッターに配置したボタンに指定するデータ属性の一覧をご紹介します。
属性 説明
data-add-back-btn true | false 戻るボタンをつける(つける、つけない)
data-back-btn-text string 戻るボタンのテキスト
data-back-btn-theme swatch letter (a-z) 戻るボタンに適用するスウォッチ
data-position fixed ヘッダーの固定
data-theme swatch letter (a-z) 適用するスウォッチ

以上がjQuery Mobileを利用してヘッダー/フッターを設置する方法になります。
カテゴリ:WEB屋になる為の知識と技術, jQuery Mobileの基礎, スマートフォン制作と作成方法, 使えるjQueryとJavaScript
  • このエントリーをはてなブックマークに追加
  • Facebookでコメントする

    コメントする

    おすすめの記事

    PAGE TOP