1、初始化移動瀏覽顯示 <meta?name=”viewport”?content=”width=device-width,initial-scale=1”/> 2、引入jquery?mobile的css文件和js文件? 3、HTML5?date=*屬性用于通過jquery?mobile為移動設備創建交互外觀 示例： ~~~ <div?date-role?=?“page”> <div?date-role?=?“header“> <h1>標題</h1> </div> <div?role?=?“main”?class=”ui-content”> <p>內容</p> </div> <div?data-role?=?“footer”> <h1>頁腳</h1> </div> </div> ~~~ 在一個html文件中可以放多個date-page，但默認顯示第一個data-page 可以通過href的形式進行跳轉，示例： ~~~ <div?date-role?=?“page”?id=”index1”> <a?href=”#index1”>頁面跳轉</a> </div> <div?date-role?=?“page”?id=”index2”></div> ~~~ 4、設置頁面過度效果data-transition ~~~ <div?date-role?=?“page”?id=”index1”> <a?href=”#index1”?data-transition=”slide”>頁面跳轉</a> </div> <div?date-role?=?“page”?id=”index2”></div> ~~~ 包括：slide/slideup/slidedown/pop/fade/flip/none 5、事件 (1)頁面初始化事件：pagebeforecreate,pagecreate,pageinit (2)頁面加載事件：pagebeforeload,pageload (3)頁面過度事件：pagebeforeshow,pageshow,pagebeforehide,pagehide 示例： ~~~ $(document).on(“pagebeforecreate”,function(){ //do?something }) $(document.on(“pagebeforehide”,”#index”,function(){ //do?something[index頁面消失時] }) ~~~ 6、jquery?moblie按鈕 示例：<a?class=”ui-btn”>按鈕</a> <input?type=”submit”?value=”按鈕”/>//JQM直接添加了一些樣式 讓多個按鈕并排顯示(ui-btn-inline)： <a?class=”ui-btn?ui-btn-inline”>按鈕</a><a?class=”ui-btn?ui-btn-inline”>按鈕</a> 此外還有不同樣式：ui-btn-a;ui-btn-b;ui-corner-all;ui-shadow 7、導航欄制作示例： ~~~ <div?data-role=”navbar”> <ul> <li><a?href=”#”?data-icon=”camera”>導航1</a></li> <li><a?href=”#”?data-icon=”carat-l”>導航2</a></li> <li><a?href=”#”?data-icon=”carat-2”>導航3</a></li> </ul> </div> ~~~ data-icon可以設置導航圖標，還可以自己制定 8、設置標題和當行藍位置固定 設置data-position=”fixed” 9、列表 ~~~ <ul?data-role=”listview?data-inset=true”> <li>列表1</li> <li><a?href=”#”?>列表2</a></li> <li><a?href=”#”?>列表3</a></li> </ul> ~~~ listview指定列表樣式；data-inset設置為true使列表留邊距顯示 復雜的列表：（詳情見api） ~~~ <ul?data-role=”listview?data-inset=true”> <li><a?href=”#”?> <h2>G1次</h2> <p>北京-大連</p> <p>大連-北京</p> <p?class=”ul-li-aside”>9:00開</p>//設置為右上角顯示 </li> </ul> ~~~ 10、表單：直接使用html的默認表單就可以 表單自適應功能：ui-feild-content ~~~ <form> <div?class=”ui-feild-content”><input?type=”text”/></div> <div?class=”ui-feild-content”><input?type=”text”/></div> </form> ~~~ 11、表格 ~~~ <table?data-role=”table”?data-mode=”reflow”?class=”ui-responsive?table-stroke”> <thead> <tr> <td></td> <td></td> <td></td> </tr> </thead> </table> ~~~