jQuery Mobile 是一個基于 jQuery 的移動端 Web 開發框架,提供豐富的移動 UI 組件和事件。下面是一份 jQuery Mobile 的入門教程。
首先,在頭部引入以下文件:
<link rel="stylesheet" > <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
然后,我們需要一個基本的頁面結構。jQuery Mobile 推薦使用以下結構:
<div data-role="page"> <div data-role="header"> <h1>標題</h1> </div> <div data-role="main" class="ui-content"> <p>內容</p> </div> <div data-role="footer"> <h4>頁腳</h4> </div> </div>
上面的代碼中,data-role 屬性定義了頁面的角色,例如 header(頁眉)、main(主內容區域)、footer(頁腳)等。
接下來,我們可以使用 jQuery Mobile 提供的各種組件。比如一個按鈕:
<a href="#" class="ui-btn">按鈕</a>
按鈕的樣式已經定義好了,只需要添加 .ui-btn 就行。其他常用的組件還有滑動菜單、彈出框、表單組件等。
以上就是一個簡單的 jQuery Mobile 教程。想要深入了解,可以查看官方文檔。