jQuery Mobile學(xué)習(xí)筆記案例實(shí)現(xiàn)
jQuery Mobile學(xué)習(xí)筆記是本文要介紹的內(nèi)容，主要是來(lái)了解jQuery Mobile的使用，通過案例的實(shí)現(xiàn)可以學(xué)習(xí)到jQuery Mobile應(yīng)用，具體內(nèi)容的實(shí)現(xiàn)來(lái)看本文詳解。
1、jQuery Mobile 重點(diǎn)講解：列表(listview)的操作
jQuery Mobile有一個(gè)列表控件(listview)，可能會(huì)根據(jù)需要在后臺(tái)加載該列表控件，可以通過以下方法加載：
HTML中的List控件：
- <ul data-role="listview" id="list" data-inset="true">
- </ul>
代碼中加入一個(gè)列表項(xiàng)：
- var list = $("<li><a href='mission/mission.html>新增項(xiàng)</a></li>");
- $("#list").append(list).find("li:last").hide();
- $('ul').listview('refresh');
- $("#list").find("li:last").slideDown(300);
2、jQuery Mobile 頁(yè)面切換動(dòng)畫的使用（data-transition）
頁(yè)面中頁(yè)面切換動(dòng)畫：
jQuery Mobile可以實(shí)現(xiàn)頁(yè)面的切換效果。在同一個(gè)Html文件里面，可以定義多個(gè)page，切換時(shí)直接使用超鏈接就可以了。
- <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)動(dòng)畫定義。jQuery Mobile實(shí)現(xiàn)了上下左右滑動(dòng)，淡出，彈出，反轉(zhuǎn)等動(dòng)畫。
如果需要轉(zhuǎn)到的HTML是其他鏈接，不是內(nèi)部page，需要加上rel='external'屬性，此時(shí)動(dòng)畫效果無(wú)效。
小結(jié)：jQuery Mobile學(xué)習(xí)筆記案例實(shí)現(xiàn)的內(nèi)容介紹完了，希望通過本文的學(xué)習(xí)能對(duì)你有所幫助！
