jQuery Mobile學習筆記案例實現
作者：佚名
jQuery Mobile學習筆記是本文要介紹的內容，主要是來了解并學習jQuery Mobile的使用方法，具體內容的實現來看本文詳解。
jQuery Mobile學習筆記是本文要介紹的內容，主要是來了解jQuery Mobile的使用，通過案例的實現可以學習到jQuery Mobile應用，具體內容的實現來看本文詳解。
1、jQuery Mobile 重點講解：列表(listview)的操作
jQuery Mobile有一個列表控件(listview)，可能會根據需要在后臺加載該列表控件，可以通過以下方法加載：
HTML中的List控件：
- <ul data-role="listview" id="list" data-inset="true">
- </ul>
代碼中加入一個列表項：
- var list = $("<li><a href='mission/mission.html>新增項</a></li>");
- $("#list").append(list).find("li:last").hide();
- $('ul').listview('refresh');
- $("#list").find("li:last").slideDown(300);
2、jQuery Mobile 頁面切換動畫的使用（data-transition）
頁面中頁面切換動畫：
jQuery Mobile可以實現頁面的切換效果。在同一個Html文件里面，可以定義多個page，切換時直接使用超鏈接就可以了。
- <body>
- <div data-role="page" id="main" data-transition="pop">
- <a href="#page2" >鏈接2</a>
- </div>
- <div data-role="pag" id="page2">
- </div>
- </body>
系統默認顯示page的內容，不顯示page2的內容，點擊鏈接后切換到page2的內容。通過“data-transition”實現動畫定義。jQuery Mobile實現了上下左右滑動，淡出，彈出，反轉等動畫。
如果需要轉到的HTML是其他鏈接，不是內部page，需要加上rel='external'屬性，此時動畫效果無效。
小結：jQuery Mobile學習筆記案例實現的內容介紹完了，希望通過本文的學習能對你有所幫助！
責任編輯：zhaolei
來源：
互聯網
