Getting Started with jQuery Mobile
jQuery Mobileは、タッチ操作に便利なuiコンポーネントとajaxベースのナビゲーションシステムを提供し、アニメーションのページ回転をサポートしています.独自のjQuery Mobileページを構築するのは簡単です.
Create a basic page template
お気に入りのテキストエディタを開き、下のページテンプレートコードを貼り付けて保存し、ブラウザで開きます.あなたも今モバイル開発者です!
headではviewportのmetaタグが画面の幅をデバイスの幅と同じに設定し,CdnからjQuery,jQuery Mobile,jQuery Mobileのテーマスタイルシートを導入した.jQuery Mobile 1.1は、1.6.4または1.7.1バージョンのjQueryフレームワークの上で動作する必要があります.
bodyでは、data-role=「page」でタグ付けされたdivコンテナで、page、ページ、data-role=「header」でタグ付けされたdivコンテナでページのヘッダバーを定義し、data-role=「content」でタグ付けされたdivコンテナでページのコンテンツ領域を定義します.HTML 5のdata属性でタグ付けされたタグは、jQuery Mobileフレームワークを介して基本的なタグを自動的に部品に拡張します.
HTMLコード:
　 　 　 　 　 　
　

Add your content
contentコンテナでは、独自の標準的なHTML要素、

、

などを加えることができ、自分でスタイルを書いてカスタムレイアウトを作成することができますが、jQuery Mobileのスタイルシートの後に自分のスタイルを加えることに注意してください.
Make a listview
jQuery Mobileには、data-role=「listview」タグのulタグで定義できる一連の異なるリストが含まれています.data-inset=「true」のプロパティを追加して、リストが埋め込まれているように見えます.data-filter=「true」プロパティを追加して、動的検索フィルタを追加することもできます.
HTMLコード:

<ul data-role="listview" data-inset="true" data-filter="true"> <li><a href="#">Acura</a></li> <li><a href="#">Audi</a></li> <li><a href="#">BMW</a></li> <li><a href="#">Cadillac</a></li> <li><a href="#">Ferrari</a></li> </ul>

 Add a slider  


jquery mobileフレームワークには、フォーム要素のセットが含まれており、フォームを自動的にタッチしやすいスタイルに強化します.このスライドバーはhtml 5の新しいinputタイプ「range」で書かれており、data-roleプロパティは必要ありません.必ずformラベルに入れ、label要素に関連付けてください.

 html   : 



　 Input slider: 　

Make a button  


ボタンを作る方法はいくつかありますが、まずaラベルをボタンにし、aラベルにdata-role=「button」属性を追加するだけでいいです.data-iconプロパティでボタンにアイコンを追加し、data-iconposプロパティでアイコンの位置を制御します.

 html   : 


data-role="button"data-icon="star">Star button

Play with theme swatches  


jQuery Mobileは丈夫なテーマスタイルシステムを持っていて、最大26セット(英語のアルファベットが26個しかないため)のツールバー、内容とボタンのテーマをサポートしています.「swatch」と呼ばれています.(スワーキの時計....)ページの任意のコンポーネントにdata-theme=「e」のプロパティを追加するだけで、黄色のトピックスタイルに設計できます.