スマートフォンの基本
カスタムデータ属性
《主なdata-属性一覧》
属性 | 説明 | 値の例 | |
---|---|---|---|
data-role | UIのパーツとしての役割を設定 | page、header、content、footer、button、slider、none、nojs、list-divider | |
data-rel | 要素の動作を設定 | back、dialog | |
data-url | URLを設定 | 任意のURL | |
data-transition | ページ遷移時のエフェクト | slide、slideup、slidedown、pop、fade、flip、none(defaultはslide) | |
data-direction | ページ遷移時のエフェクトの方向 | reverse | |
data-ajax | リンクのajaxの有効化、無効化 | true、false(defaultはtrue) | |
data-position | 固定位置にする等 | fixed | |
data-id\ | jQuery Mobile内部で扱うid名 | 任意のid | |
data-theme | テーマの種類を設定 | 現在はa、b、c、d、eの5つがデフォルトで用意されている | |
data-icon | アイコンの種類 | refresh、star、delete、plus、check、gear、arrow-r、arrow- | |
data-iconpos | アイコンの位置 | top、bottom、right、left、notext | |
data-title | ダイアログのタイトル | 任意のタイトル | |
data-inset | 角丸リストにする | true、false(defaultはfalse) |
単一ページ構築
単一ページを「data-role="page"」で記述する
- ヘッダー(data-role="header")
- コンテンツ(data-role="content")
- フッター(data-role="footer")
- ヘッダー・フッターは省略できる
ページの基本構造
<!DOCTYPE html> <html lang="ja"> <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/1.0.1/jquery.mobile-1.0.1.min.css"> <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.js"></script> </head> <body> <div data-role="page" id="page1"> <div data-role="header"> <h1>ヘッダー</h1> </div> <div data-role="content"> <p>コンテンツ</p> </div> <div data-role="footer"> <h4>フッター</h4> </div> </div> </body> </html>
HTML5要素での記述
<!DOCTYPE html> <html lang="ja"> <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/1.0.1/jquery.mobile-1.0.1.min.css"> <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.js"></script> </head> <body> <section data-role="page" id="page1"> <header data-role="header"> <h1>ヘッダー</h1> </header> <div data-role="content"> <p>コンテンツ</p> </div> <footer data-role="footer"> <h4>フッター</h4> </footer> </section> </body> </html>
単一HTMLファイル内に複数ページの記述
- 少数ページの場合は、複数の「data-role="page"」を記述することで、複数ページを単一HTMLファイル内に記述する
- 単一ページを「data-role="page"」で記述する
- ヘッダー(data-role="header")
- コンテンツ(data-role="content")
- フッター(data-role="footer")
- ヘッダー・フッターは省略できる
<!DOCTYPE html> <html lang="ja"> <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/1.0.1/jquery.mobile-1.0.1.min.css"> <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.js"></script> </head> <body> <div data-role="page" id="top"> <div data-role="header"> <h1>TOPページ</h1> </div> <div data-role="content"> <ul> <li><a href="#page2">ページ2へ</a></li> <li><a href="#page3">ページ3へ</a></li> </ul> </div> <div data-role="footer"> <h4>フッター</h4> </div> </div> <div data-role="page" id="page2"> <div data-role="header"> <h1>ページ2</h1> </div> <div data-role="content"> <p>ページ2の内容</p> </div> <div data-role="footer"> <h4>フッター</h4> </div> </div> <div data-role="page" id="page3"> <div data-role="header"> <h1>ページ3</h1> </div> <div data-role="content"> <p>ページ3の内容</p> </div> <div data-role="footer"> <h4>フッター</h4> </div> </div> </body> </html>