こんにちは。All About ホームページ作成ガイドの西村文宏です。
前回は、スマートフォンらしいデザインを簡単に作れる「jQuery Mobile」を使って、別のHTMLを（ページ移動することなく）「ダイアログ」として表示させる方法をご紹介いたしました。
今回は、ダイアログを表示する際に、さまざまな表示効果（切替効果）を加える方法をご紹介いたします。前回に掲載したソースと合わせてご参照ください。
様々なページ切替効果を加える方法
あるページ（たとえば dialog.html）をダイアログとして表示されるようにリンクを記述する方法は、前回ご紹介した通り以下のようなソースです。
<a href="dialog.html" data-role="button" data-rel="dialog">ダイアログを表示</a>
このa要素に、さらに「data-transition」属性を付加すると、閲覧者がリンクをタップしたときに、ダイアログの表示効果（ページ切替効果）が出せます。
効果には、以下の10種類が用意されています。
- ※スマートフォンではなくパソコンで表示確認をしたい場合は、Internet Explorer（IE）ではなく、Chromeの最新版などをご使用ください。IEだと（リンク自体は機能しますが）表示効果は再現できません。
また、ローカル（HDD上）に置いたHTMLでは、リンクが機能しません。必ずHTMLファイルをウェブサーバ上に置いてから表示させてください。
┃fade
data-transition属性に、値「fade」を指定すると、ダイアログがフェイドインする形で表示されます。
<a href="dialog.html" data-role="button" data-rel="dialog" data-transition="fade"> ダイアログをfadeで表示</a>
┃pop
data-transition属性に、値「pop」を指定すると、ダイアログがポップアップする形で表示されます。
<a href="dialog.html" data-role="button" data-rel="dialog" data-transition="pop"> ダイアログをpopで表示</a>
┃flip
data-transition属性に、値「flip」を指定すると、現在のページとダイアログが真横にくるりと回転するような形で表示されます。
<a href="dialog.html" data-role="button" data-rel="dialog" data-transition="flip"> ダイアログをflipで表示</a>
┃turn
data-transition属性に、値「turn」を指定すると、現在のページとダイアログが大きく跳ねて横方向に回転するような形で表示されます。
<a href="dialog.html" data-role="button" data-rel="dialog" data-transition="turn"> ダイアログをturnで表示</a>
続きは後半にご紹介します。
ぜひご覧ください。
続きはアクセストレードに
ログインしてご覧ください。
ログインしてご覧ください。
SHARE
ご注意ください
- 本記事の内容は、2015/04/13更新時点の情報です。更新日より期間が経過している場合など、状況により現在の情報とは異なる可能性があります。
- 一部、体験談などの執筆者の個人的な意見、株式会社インタースペース(アクセストレード)以外が提供するサービスの紹介が含まれる場合もあります。情報の内容には十分に注意しておりますが、万が一、損害やトラブルが生じた場合も責任を負いかねますので、内容をご確認の上ご自身の判断のもとでご利用ください。
- 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載等を禁じます。
関連記事
カテゴリーから探す
タグから探す
- アフィリエイトをはじめよう！
- 無料新規パートナー登録
- 広告出稿を希望のかたはこちら
- 無料資料請求はこちら