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でコメントする

コメントする

おすすめの記事

Facebookの投稿
ウェブ制作技術 SNS・ブログ
おすすめウェブサイト
ウェブ制作のご注文は全国対応

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

PAGE TOP