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

時間 2019-11-11

標籤 jquery mobile 搭建一個簡單手機頁面欄目 JQuery 简体版

原文原文鏈接

1.新增html頁面。css

2.聲明html5Document。html

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

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

向網頁中添加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庫ide

從 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。

代碼示例：spa

<!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>