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

结果页面：