jQuery Mobileを利用してポップアップを設置する方法
18.11.15 17:53 | コメント(0)
jQuery Mobileでポップアップを設置する方法
html + cssの設定とは全く異なる指定方法ではありますが、指定方法がわかるようになると簡単です。
1. ポップアップの指定要素
2. ポップアップに属性要素
3. ポップアップに動作を加えた要素
4. ポップアップ表示の位置を示す要素一覧
5. ポップアップの属性として利用するパラメーター一覧
ポップアップの指定要素
」要素で指定して配置します。
「href」属性に「#id」要素を利用して表示されるポップアップを指定します。
また、呼び出し先がポップアップであることを「data-rel="popup"」属性で指定します。
【ポップアップ】
「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を利用してポップアップを設置する方法になります。コメントする
おすすめの記事
自作パソコンの組み立て方法②(パソコンを組み立てる方法)
自作パソコンの組み立てについて 自作でパソコンを組み立てる方もいますが、まだ組み...WordPress(ワードプレス)でユーザー情報を取得する関数コードを利用して情報を表示させる方法
ユーザー情報の内容をWebサイトへ表示させる方法 WordPress(ワードプレ...WordPress(ワードプレス)でユーザー情報を取得する関数コードを利用して管理画面プロフィールを編集する方法
管理画面プロフィールを編集する方法 WordPress(ワードプレス)管理画面で...WordPress(ワードプレス)で投稿記事内の最初の画像を表示させる方法
投稿記事内の最初の画像を表示させる方法 WordPress(ワードプレス)を利用...WordPress(ワードプレス)権限グループ別(管理者、編集者、投稿者、寄稿者、購読者)のLevelと所有権限
管理者、編集者、投稿者、寄稿者、購読者のLevelと所有権限 WordPress...WordPress(ワードプレス)管理画面記事投稿画面の内容を固定で「表示・非表示」する設定方法
管理画面記事投稿画面の内容を「表示・非表示」する設定方法 WordPress(ワ...使えるjQueryとJavaScript の最新一覧
Facebookでコメントする