第九天 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

1. 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"/>

2. div的data-role属性

data-role="page" 是显示在浏览器中的页面
data-role="header" 创建页面上方的工具栏（常用于标题和搜索按钮）
data-role="content" 定义页面的内容，比如文本、图像、表单和按钮，等等
data-role="footer" 创建页面底部的工具栏
在这些容器中，您可以添加任意 HTML 元素 - 段落、图像、标题、列表等等。
提示：HTML5 data-* 属性用于通过 jQuery Mobile 为移动设备创建“对触控友好的”交互外观。

3. 在 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>
   

4. 为 jQuery Mobile 按钮添加图标
   如需向您的按钮添加图标，请使用 data-icon 属性：

<a href="#anylink" data-role="button" data-icon="search">搜索</a>

提示：您也可以在 <button> 或 <input> 元素中使用 data-icon 属性。
使用 data-iconpos 属性来规定位置: data-iconpos="top"

5. 页脚中的导航栏

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