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

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

jQuery Mobileを利用してナビゲーションを設置する方法

18.11.15 11:27 | コメント(0)

jQuery Mobileでナビゲーションを設置する方法

jQuery mobileではグローバルナビゲーションやメニュー一覧など、簡単な指定で設置することができます。 html + cssの設定とは全く異なる指定方法ではありますが、指定方法がわかるようになると簡単です。

 1. ナビゲーションの指定要素
 2. ナビゲーションにテーマ(スウォッチ)の指定要素

ナビゲーションの指定要素

グロバールナビゲーションは複数のボタンをグループ化してナビゲーションとして横並びや縦並びに配置します。
コンテナとなる「div」要素にデータ属性「data-role="navbar"」を指定し、「ul」要素で設定したリンクリストを配置します。
ナビゲーションの要素内では、ボタンに「class="ui-btn"」などの指定をしなくても自動的にボタンとして配置されます。
ページロード時にアクティブにしたい場合には、ボタンには「ui-btn-active」クラスを付加します。

【ナビゲーション】

サンプルはこちら

【複数のナビゲーション】
※ボタンが5個までは横に並びますが、6個以上になると2列に固定されます。

サンプルはこちら

【ヘッダー内に配置したナビゲーション】
※ヘッダー/フッター内にナビゲーションを配置すると2列にならずに横並びに設定されます。

サンプルはこちら

【アイコンを表示するナビゲーション】
※ボタンにアイコンを指定するには、データ属性「data-icon」、「ui-icon」クラスで指定します。
※アイコンの表示位置はコンテナ要素に「data-iconpos」属性を指定します。
 アイコンの設定方法

サンプルはこちら

ナビゲーションにテーマ(スウォッチ)の指定要素

ナビゲーションの背色や文字色を変更するにはjQuery mobile用のテーマ(スウォッチ)の要素を指定します。
テーマを設定する場合は、「ui-body-[a-z]」クラスを付与します。

【テーマを指定したナビゲーション】

サンプルはこちら

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

    コメントする

    おすすめの記事

    PAGE TOP