用jQuery Mobile搭建一個簡單的手機頁面

標籤：

1.新增html頁面。

2.聲明html5Document。

3.載入jQuery Mobile Css、jQuery與jQuery Mobile連結庫。

4.使用jQuery Mobile定義的html標準、編寫網頁架構及內容。

 

向網頁中添加jQuery Mobile,添加方法如下：

         從CDN引用jQuery Mobile(推薦)　

　　 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>    <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>

　　　從jQuerymobile.com下載jQuery Mobile庫

           從 jQuerymobile.com 下載檔案。　　　　

　　<link rel=stylesheet href=jquery.mobile-1.3.2.css>　　<script src=jquery.js></script>　　<script src=jquery.mobile-1.3.2.js></script>

• data-role="page" 是顯示在瀏覽器中的頁面
• data-role="header" 建立頁面上方的工具列（常用於標題和搜尋按鈕）
• data-role="content" 定義頁面的內容，比如文本、映像、表單和按鈕，等等
• data-role="footer" 建立頁面底部的工具列

在寫移動端的網站的時候， 一定要寫一個meta的name為viewport的屬性， 因為該屬性代表著網站頁面的自適應。簡單的寫法為：<meta name="viewport" content="width=device-width, initial-scale=1">代表著網站為驅動裝置的寬度。

• width:控制寬度，可以指定一個寬度值，或輸入device-width，表示寬度隨著裝置寬度自動調整
• height:控制高度，或輸入device-height。
• initial-scale:初始縮放比例，最小為0.25，最大為0.5。
• minimum-scale:允許使用者縮放的最小比例，最小為0.25，最大為0.5。
• maximum-scale:允許使用者縮放的最大比例，最小為0.25，最大為0.5。
• user-scalable:是否允許使用者手動縮放，可以輸入0或者1，也可以是輸入yes或no。

程式碼範例：

<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1"><!--自適應頁面-->    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>    <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script></head><body><div data-role="page" >    <div data-role="header">        <h1>我的網站</h1>    </div>    <div data-role="content">        <p>這是本文部分</p>        <ul data-role="listview">            <li data-role="list-divider">我的目標</li>            <li><a href="http://www.baidu.com">精彩內容即將呈現</a></li>            <li><a href="http://www.baidu.com">百度一下，就知道</a></li>            <li><a href="http://www.baidu.com">堅持才能成功</a></li>        </ul>    </div>    <div data-role="footer">        <h1>這個是頁尾文本</h1>    </div></div></body></html>

結果頁面：

 

用jQuery Mobile搭建一個簡單的手機頁面