jQuery Mobile 前端框架

jQuery Mobile 是创建移动 web 应用程序的框架。

jQuery Mobile 适用于所有流行的智能手机和平板电脑。
jQuery Mobile 使用 HTML5 和 CSS3 通过尽可能少的脚本对页面进行布局。
jQueryMobile 官网 http://jquerymobile.com/
jQueryMobile 帮助 http://api.jquerymobile.com/
w3school http://www.w3school.com.cn/jquerymobile/index.asp
jQuery 官网 http://jquery.com/

jQuery Mobile 安装

创建一个静态页面文件
touch index.html

head头部引入

从 CDN 中加载 jQuery Mobile 百度CDN：

<!-- 网上加载 -->
<head>
  <!-- 引入 jQuery Mobile 样式 -->
  <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
  <!-- 引入 jQuery 库 -->
  <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
  <!-- 引入 jQuery Mobile 库 -->
  <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

下载 jQuery Mobile
将 jQuery Mobile 放于你的主机中,可以从 jQuerymobile.com下载该文件。

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

设置屏幕宽度(两种)

    1. <!-- meta使用viewport以确保页面可自由缩放 -->
     <meta name="viewport" content="width=device-width, initial-scale=1">
    2. <!-- 设置屏幕密度为高频，中频，低频自动缩放，禁止用户手动调整缩放 -->
     <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="main" 定义了页面的内容，比如文本，图片，表单，按钮等。
"ui-content" 类用于在页面添加内边距和外边距。
data-role="footer" 用于创建页面底部工具条。
提示：在这些容器中你可以添加任何 HTML 元素 - 段落, 图片, 标题, 列表等。

在 jQuery Mobile 中添加页面

在 jQuery Mobile，您可以在单一 HTML 文件中创建多个页面。请通过唯一的 id 来分隔每张页面，并使用 href 属性来连接彼此在 jQuery Mobile，您可以在单一 HTML 文件中创建多个页面。请通过唯一的 id 来分隔每张页面，并使用 href 属性来连接彼此

例子：

<div data-role="page" id="pageone">
  <div data-role="main" class="ui-content">    
      <a href="#pagetwo">跳转到第二个页面</a> 
  </div>
</div>
<div data-role="page" id="pagetwo">  
  <div data-role="main" class="ui-content">    
     <a href="#pageone">跳转到第一个页面</a> 
  </div>
</div>

为 jQuery Mobile 按钮

在 jQuery Mobile 中，按钮可通过三种方式创建：
使用 <button> 元素
使用 <input> 元素
使用带有 data-role="button" 的 <a> 元素

普通按钮：data-role="button"
<a href="#" data-role="button">按钮</a>
<a href="#pagetwo" data-role="button">转到页面二</a>
行内按钮：
如果需要按钮适应其内容，或者如果需要两个或多个按钮并排显示，请添加 data-inline="true"
<a href="#pagetwo" data-role="button" data-inline="true">转到页面二</a>
组合按钮：

<div data-role="controlgroup" data-type="horizontal">
<a href="#anylink" data-role="button">按钮 1</a>
<a href="#anylink" data-role="button">按钮 2</a>
<a href="#anylink" data-role="button">按钮 3</a>
</div>
后退按钮：
<a href="#" data-role="button" data-rel="back">返回</a>
更多用于按钮的 data-* 属性：值都是 true/false
data-corners 规定按钮是否有圆角
data-mini 规定是否是小型按钮
data-shadow 规定按钮是否有阴影

jQuery Mobile 页面切换效果

页面切换效果可被应用于任何使用 data-transition 属性的链接或表单提交：

<a href="#anylink" data-transition="slide">切换到第二个页面</a>

过度	描述
fade	默认。淡入到下一页
flip	从后向前翻转到下一页
flow	抛出当前页面，引入下一页
pop	像弹出窗口那样转到下一页
slide	从右向左滑动到下一页
slidefade	从右向左滑动并淡入到下一页
slideup	从下到上滑动到下一页
slidedown	从上到下滑动到下一页
turn	转向下一页
none	过渡无效果

想要页面从左向右滑动，而不是从右向左滑动，请使用带有 "reverse" 值的 data-direction 属性。在后退按钮上这是默认的。

<a href="#pagetwo" data-transition="slide" data-direction="reverse">切换</a>

** 页面底部的导航栏**

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