jQuery Mobileの基礎
スマホのサイトを作成する際に便利な jQuery Mobile を簡単に紹介。
jQuery Mobileの使い方
基本となるHTMLは以下の通り。文字コードセットや viewportを指定し、jQueryや jQuery Mobile のライブラリをロードします。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>ページのタイトル</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" /> <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script> </head> <body> <div data-role="page" id="home"> <div data-role="header"> <h1>ヘッダー</h1> </div> <div data-role="content"> <p>コンテンツ</p> </div> <div data-role="footer"> <p>フッター</p> </div> </div> </body> </html>
- data-role
- カスタムデータ属性といい要素の役割(role)を示します。
ページ遷移
jQuery Mobileのページ遷移方法は3種類あります。
ひとつの HTML ページで、複数ページを実現する。(アンカーのような記述でページ遷移を実現)
<div data-role="page" id="home"> <div data-role="header"> <h1>メインページ</h1> </div> <div data-role="content"> <a href="#about" data-role="button" data-transition="slide">このサイトについて</a> </div> <div data-role="footer"> <p>Copyright(C) FOO, All Rights Reserved.</p> </div> </div> <div data-role="page" id="about"> <div data-role="header"> <h1>このサイトについて</h1> </div> <div data-role="content"> <p>あーでもない、こーでもない</p> </div> <div data-role="footer"> <p>Copyright(C) FOO, All Rights Reserved.</p> </div> </div>
※ data-transitionで指定されたエフェクトで画面が遷移します。
ひとつの HTML ページで、ひとつのページを実現する。(通常の Webページの遷移と同じだがエフェクトがある)
<div data-role="page" id="home"> <div data-role="header"> <h1>メインページ</h1> </div> <div data-role="content"> <a href="about.html" data-role="button" data-transition="slide">このサイトについて</a> </div> <div data-role="footer"> <p>Copyright(C) FOO, All Rights Reserved.</p> </div> </div>
※ data-transitionで指定されたエフェクトで画面が遷移します。
通常の Webページの遷移と同じ
<div data-role="page" id="home"> <div data-role="header"> <h1>メインページ</h1> </div> <div data-role="content"> <a href="about.html" data-role="button" rel="external">このサイトについて</a> </div> <div data-role="footer"> <p>Copyright(C) FOO, All Rights Reserved.</p> </div> </div>
ポップアップ ダイアログ
ポップアップ ダイアログの利用は、リンクに data-rel="dialog"
を追加するだけです。
<a href="about.html" data-rel="dialog">Pop Up!</a>
テーマ
jQuery Mobileには、デフォルトを含め 6種類のテーマが用意されています。data-theme を利用して a〜e の5種類が指定できます。
独自のテーマを指定する場合、用意されているテーマをコピーして必要な部分を書き換えているのが簡単です。用意されているテーマをコピーして css/jquery.mobile_my_theme.css
として保存し、テーマa を利用して テーマm を作成した場合には以下のように指定します。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>ページのタイトル</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" /> <link rel="stylesheet" href="css/jquery.mobile_my_theme.css" /> <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script> </head> <body> <div data-role="page" id="home" data-theme="m"> <div data-role="header"> <h1>ヘッダー</h1> </div> <div data-role="content"> <p>コンテンツ</p> </div> <div data-role="footer"> <p>フッター</p> </div> </div> </body> </html>
TIPS
Ajaxナビゲーションの停止
Ajaxに対応したナビゲーションはスマートフォン上で不具合を与える場合があるため、Ajaxナビゲーションを停止しナビゲーションのリンクを有効にします。
<script> $(function(){ $.mobile.ajaxLinksEnabled = false; }); </script>
リストアイテムの省略を無効
jQuery Mobileのデフォルトでは、リストのアイテムやタイトル、フッターの文字数が多いと省略されます。これをスタイルシートで無効にします。
body .ui-li .ui-li-desc { overflow: visible; white-space: normal; } body .ui-footer .ui-title { overflow: visible; white-space: normal; }
フォーム利用時の注意点
フォームを利用する場合、action はフルパスで指定します。
<form action="/current-directory/form-handler.php" method="get">