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

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

jQuery Mobileを利用して開閉メニューを設置する方法

18.11.15 16:10 | コメント(0)

jQuery Mobileで開閉メニューを設置する方法

jQuery mobileではタイトル領域やメニュー領域をタップするとコンテンツが開く開閉メニューが簡単な指定で設置することができます。
html + cssの設定とは全く異なる指定方法ではありますが、指定方法がわかるようになると簡単です。

 1. リストビューの指定要素
 2. 開閉メニューに属性を加える

開閉メニューの指定要素

コンテンツが開く開閉メニューを配置したい場合は、「Collapsible」要素を指定して配置します。
開閉メニューリストをグループ化して配置したい場合は、「Collapsibleset」ウィジェットを指定して配置します。

【開閉メニュー】

サンプルはこちら

【開閉メニューリスト】
※「data-collapsed="false"」属性で指定すればアクセスした時点で最初から開いている状態になります。

開閉メニューをクリック

こちらの枠にコンテンツ内容や説明等を入力します。

開閉メニューをクリック

こちらの枠にコンテンツ内容や説明等を入力します。

開閉メニューをクリック

こちらの枠にコンテンツ内容や説明等を入力します。

サンプルはこちら

【色を変更した開閉メニューリスト】

開閉メニューをクリック

こちらの枠にコンテンツ内容や説明等を入力します。

開閉メニューをクリック

こちらの枠にコンテンツ内容や説明等を入力します。

開閉メニューをクリック

こちらの枠にコンテンツ内容や説明等を入力します。

サンプルはこちら

開閉メニューに属性を加えてアイコンを変更

開閉メニューリストを配置し、デフォルトではアイコンが設定されています。アイコンを変更する場合は「data-collapsed-icon」と「data-expanded-icon」パラメーターを利用してアイコンを指定します。

【アイコンを変更した開閉メニュー】

開閉メニューをクリック

こちらの枠にコンテンツ内容や説明等を入力します。

開閉メニューをクリック

こちらの枠にコンテンツ内容や説明等を入力します。

開閉メニューをクリック

こちらの枠にコンテンツ内容や説明等を入力します。

サンプルはこちら

Collapsiblesetウィジェットで利用可能なパラメーター一覧

Collapsiblesetウィジェットに付随して利用可能なパラメーター一覧をご紹介します。

パラメーター 説明 デフォルト値
data-collapsed-icon パネルが閉じているときのアイコン plus
data-expanded-icon パネルが開いているときのアイコン minus
data-iconpos アイコンの表示位置 left
data-theme ヘッダー部分のテーマ
data-content-theme コンテンツ部分のテーマ
data-inset インセットモードで表示するか true
data-mini コンパクトバージョンで表示するか false

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

    コメントする

    おすすめの記事

    PAGE TOP