jQuery Mobileを利用してポップアップを設置する方法

18.11.15 17:53 | コメント(0)

jQuery Mobileでポップアップを設置する方法

jQuery mobileではポップアップといった動作的に動くツールが簡単な指定で設置することができます。
html + cssの設定とは全く異なる指定方法ではありますが、指定方法がわかるようになると簡単です。

 1. ポップアップの指定要素
 2. ポップアップに属性要素
 3. ポップアップに動作を加えた要素
 4. ポップアップ表示の位置を示す要素一覧
 5. ポップアップの属性として利用するパラメーター一覧

ポップアップの指定要素

ポップアップ表示を行いたい場合は、ポップアップとして表示すべき領域に「
」要素で指定して配置します。
href」属性に「#id」要素を利用して表示されるポップアップを指定します。
また、呼び出し先がポップアップであることを「data-rel="popup"」属性で指定します。
【ポップアップ】
テキストをクリック

ポップアップで表示されます

サンプルはこちら

【位置を指定したポップアップ】
※「data-tolerance」パラメーターを利用してポップアップの表示位置を指定する。
※デフォルトではラメーターは適用されず、設定値は「none」の状態です。
テキストをクリック

ポップアップで表示されます

サンプルはこちら

【テキストのアイコンに指定したポップアップ】

右のアイコンをクリックLearn more

ポップアップで表示されます

サンプルはこちら

ポップアップに属性要素

ポップアップ表示を吹き出し付きにしたい場合は、ポップアップ「data-arrow」属性で吹き出しを指定します。
値は、「"t"、"r"、"b"、"l"」で指定します。「"true"」を設定すると、いずれかの辺が自動的に選ばれて表示されます。
その他、閉じるボタンを配置するには、a要素に「data-rel="back"」属性を指定し、クラス要素でアイコン種類を指定します。

【吹き出し付きポップアップ】

右のアイコンをクリックLearn more

ポップアップで表示されます

サンプルはこちら

【角丸を解除したポップアップ】
※角丸を解除するには「data-corners="false"」を指定します。

ポップアップを表示 »

ポップアップでのメッセージ

サンプルはこちら

【影を解除したポップアップ】
※影を解除するには「data-shadow="false"」を指定します。

ポップアップを表示 »

ポップアップでのメッセージ

サンプルはこちら

【閉じるボタンをつけたポップアップ】
閉じるボタンを表示させる場合、a要素に「data-rel="back"」を指定し、ボタンになるアイコンを配置すれば表示されます。

ポップアップを表示 »

Close

ポップアップでのメッセージ

サンプルはこちら

【背景色をグレーにするオーバーレイポップアップ】
ポップアップで表示された際、背景にグレーあうとが掛かるようにオーバーレイの設定をする場合は「data-overlay-theme」属性を指定します。

ポップアップを表示 »

Close

ポップアップでのメッセージ

サンプルはこちら

ポップアップに動作を加えた要素

ポップアップ表示に動作を加えたい場合は、「data-transition」属性で「fade, flip, flow, pop, slide, slidedown, slidefade, slideup, turn, none」の値を指定することで動作が加わります。
デフォルトの場合は「"none"」で指定されており何も起きない状態になっています。

【フェードインするポップアップ】

ポップアップを表示(フェードイン) »

ポップアップでのメッセージ

サンプルはこちら

【フリップするポップアップ】

ポップアップを表示(フリップ) »

ポップアップでのメッセージ

サンプルはこちら

【横からフローするポップアップ】

ポップアップを表示(フリップ) »

ポップアップでのメッセージ

サンプルはこちら

【ポップに表示するポップアップ】

ポップアップを表示(ポップ) »

ポップアップでのメッセージ

サンプルはこちら

【スライドダウンするポップアップ】

ポップアップを表示(スライドダウン) »

ポップアップでのメッセージ

サンプルはこちら

【スライドフェードインするポップアップ】

ポップアップを表示(スライドフェードイン) »

ポップアップでのメッセージ

サンプルはこちら

【スライドアップするポップアップ】

ポップアップを表示(スライドアップ) »

ポップアップでのメッセージ

サンプルはこちら

【ターンするポップアップ】

ポップアップを表示(ターン) »

ポップアップでのメッセージ

サンプルはこちら

ポップアップ表示の位置を示す要素一覧

ポップアップ表示の位置を指定する際に利用する要素一覧をご紹介します。
パラメーター 説明
セレクター式 指定された要素の中央
origin リンクの中央に指定(デフォルト値)
window ウィンドウの中央に指定

ポップアップの属性として利用するパラメーター一覧

ポップアップ表示の属性として利用するパラメーター一覧をご紹介します。
パラメーター 説明 デフォルト値
data-corners 角丸を指定 false
data-shadow 影効果を付与 true
data-theme テーマを指定 null
data-overlay-theme ページ全体を覆うテーマ null
data-tolerance テーマを指定 位置を指定(top, right, bottom, left)

以上がjQuery Mobileを利用してポップアップを設置する方法になります。
カテゴリ:WEB屋になる為の知識と技術, jQuery Mobileの基礎, スマートフォン制作と作成方法, 使えるjQueryとJavaScript

Facebookでコメントする

コメントする

おすすめの記事

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

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

PAGE TOP