jQuery Mobile學(xué)習(xí)筆記案例實(shí)現(xiàn)
作者：佚名
jQuery Mobile學(xué)習(xí)筆記是本文要介紹的內(nèi)容，主要是來了解并學(xué)習(xí)jQuery Mobile的使用方法，具體內(nèi)容的實(shí)現(xiàn)來看本文詳解。
jQuery Mobile學(xué)習(xí)筆記是本文要介紹的內(nèi)容，主要是來了解jQuery Mobile的使用，通過案例的實(shí)現(xiàn)可以學(xué)習(xí)到jQuery Mobile應(yīng)用，具體內(nèi)容的實(shí)現(xiàn)來看本文詳解。
1、jQuery Mobile 重點(diǎn)講解：列表(listview)的操作
jQuery Mobile有一個列表控件(listview)，可能會根據(jù)需要在后臺加載該列表控件，可以通過以下方法加載：
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可以實(shí)現(xiàn)頁面的切換效果。在同一個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>
系統(tǒng)默認(rèn)顯示page的內(nèi)容，不顯示page2的內(nèi)容，點(diǎn)擊鏈接后切換到page2的內(nèi)容。通過“data-transition”實(shí)現(xiàn)動畫定義。jQuery Mobile實(shí)現(xiàn)了上下左右滑動，淡出，彈出，反轉(zhuǎn)等動畫。
如果需要轉(zhuǎn)到的HTML是其他鏈接，不是內(nèi)部page，需要加上rel='external'屬性，此時動畫效果無效。
小結(jié)：jQuery Mobile學(xué)習(xí)筆記案例實(shí)現(xiàn)的內(nèi)容介紹完了，希望通過本文的學(xué)習(xí)能對你有所幫助！
責(zé)任編輯：zhaolei
來源：
互聯(lián)網(wǎng)
