第九天 jQuery.Mobile前端框架
jQuery 官网 http://jquery.com/
jQueryMobile 官网 http://jquerymobile.com/
jQueryMobile 帮助 http://api.jquerymobile.com/
jQueryMobile w3school帮助 http://www.w3school.com.cn/jquerymobile/index.asp
jQuery Mobile
jQuery Mobile 是创建移动 web 应用程序的框架。
jQuery Mobile 适用于所有流行的智能手机和平板电脑。
jQuery Mobile 使用 HTML5 和 CSS3 通过尽可能少的脚本对页面进行布局。
jQuery Mobile 安装
创建一个html的静态页面
touch index.html
- head部分:
1). 引入jquery、jqueryMobile文件
<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>
2). 设置屏幕宽度
方式一：设置屏幕宽度为设备宽度，禁止用户手动调整缩放
<meta name="viewport" content="width=device-width,user-scalable=no" />
方式二：设置屏幕密度为高频，中频，低频自动缩放，禁止用户手动调整缩放
<meta name="viewport" content="width=device-width,target-densitydpi=high-dpi,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
- div的data-role属性
data-role="page" 是显示在浏览器中的页面
data-role="header" 创建页面上方的工具栏（常用于标题和搜索按钮）
data-role="content" 定义页面的内容，比如文本、图像、表单和按钮，等等
data-role="footer" 创建页面底部的工具栏
在这些容器中，您可以添加任意 HTML 元素 - 段落、图像、标题、列表等等。
提示：HTML5 data-* 属性用于通过 jQuery Mobile 为移动设备创建“对触控友好的”交互外观。
-
在 jQuery Mobile 中添加页面
在 jQuery Mobile，您可以在单一 HTML 文件中创建多个页面。 请通过唯一的 id 来分隔每张页面，并使用 href 属性来连接彼此实例
<div data-role="page" id="pageone"> <div data-role="content"> <a href="#pagetwo">转到页面二</a> </div> </div> <div data-role="page" id="pagetwo"> <div data-role="content"> <a href="#pageone">转到页面一</a> </div> </div> 为 jQuery Mobile 按钮添加图标
如需向您的按钮添加图标，请使用 data-icon 属性：
<a href="#anylink" data-role="button" data-icon="search">搜索</a>
提示：您也可以在 <button> 或 <input> 元素中使用 data-icon 属性。
使用 data-iconpos 属性来规定位置: data-iconpos="top"
- 页脚中的导航栏
<div data-role="footer">
<div data-role="navbar">
<ul>
<li><a href="#" data-icon="plus">更多</a></li>
<li><a href="#" data-icon="minus">更少</a></li>
<li><a href="#" data-icon="delete">删除</a></li>
<li><a href="#" data-icon="check">喜爱</a></li>
<li><a href="#" data-icon="info">信息</a></li>
</ul>
</div>
</div>
