jQuery Mobile是一個基于JavaScript和HTML5技術的開源移動網頁開發框架,它可以幫助我們快速地創建出美觀、易用的移動網頁,而且它還可以做到跨平臺兼容。其中,jQuery Mobile版本的更新速度比較快,已經推出了最新的版本1.5.0-alpha.1。
在jQuery Mobile的開發中,我們主要使用以下幾個組件:頁面(page)、對話框(dialog)、按鈕(button)、列表(listview)、表單(form)、導航條(navbar)、工具條(toolbar)、面板(panel) 等等。下面我們看一下如何使用jQuery Mobile來創建列表(listview)。
<ul data-role="listview"> <li> <a href="#"> <img src="image1.jpg"> <h2>標題1</h2> <p>描述1</p> </a> </li> <li> <a href="#"> <img src="image2.jpg"> <h2>標題2</h2> <p>描述2</p> </a> </li> </ul>
以上代碼就是一個典型的列表(listview)組件的創建方式,其中 data-role 屬性指明了這是一個列表(listview)組件,然后使用 ul 和 li 標簽來定義列表項。
jQuery Mobile框架的使用相比其他移動網頁開發框架來說更加簡單、易用,尤其是在兼容性和界面效果方面做得非常不錯。所以,在移動網頁開發中嘗試使用jQuery Mobile框架是一個不錯的選擇。