jQuery Mobile

jQuery Mobile是jQuery 在手机上和平板设备上的版本。jQuery Mobile 不仅会给主流移动平台带来jQuery核心库，而且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。jQuery Mobile开发团队说：能开发这个项目，我们非常兴奋。移动Web太需要一个跨浏览器的框架，让开发人员开发出真正的移动Web网站。
jQuery一直以来都是非常流行的富客户端及Web应用程序开发中使用的JavaScript类库,然而一直以来它都是为桌面浏览器设计的，没有特别为移动应用程序设计。
jQuery Mobile是一个新的项目用来添补在移动设备应用上的缺憾。它是基本jQuery框架并提供了一定范围的用户接口和特性，以便于开发人员在移动应用上使用。使用该框架可以节省大量的js代码开发时间，尽管目前的版本还是不是一个稳定的版本。但它的应用效果已经备受瞩目。

要使用它开发第一步是引入我们的必要文件包括一个css和一个js文件(要注意引入的位置)

 <link  rel="stylesheet" type="text/css" href="stylesheets/jquery.mobile-1.4.5.min.css">
 <script type="text/javascript" src="javascripts/jquery-1.7.min.js"></script>
 <script type="text/javascript" src="javascripts/jquery.mobile-1.4.5.min.js"></script>  

案例1：
演示代码：

<div data-role="page" id="home">   //这里规定我们的data为页面信息
    <div data-role="header">
        <h1>Header</h1>
    </div>
    <div data-role="content">
        <p>Content goes here</p>
    </div>
    <div data-role="footer">
        <h4>Footer</h4>
    </div>
</div>  

注意：

div dat-role=”header”></div> 在页面的顶部建立导航工具栏，用于放置标题和按钮（典型的至少要放一个“返回”按钮，用于返回前一页）。通过添加额外的属性data-position=”fixed”，可以保证头部始终保持屏幕的顶部(<div data-role="header" data-position="fixed"></div>)

<div dat-role=”content”></div>包含一些主要内容，例如文本内容，图像，按钮，列表，表单等等

<div dat-role=”footer”></div> 在页面的底建立工具栏，添加一些功能按钮为了确保它始终保持在页面的底部，可以给其加上data-position=”fixed” 属性 <div data-role="footer" data-position="fixed"></div>

再注意一点：

<div data-role="header" data-position="fixed" data-fullscreen="true"></div>
<div data-role="footer" data-position="fixed" data-fullscreen="true"></div>  

案例2：
演示代码：

<div data-role="page" id="home">
    <div data-role="header"><h1>Home</h1></div>
    <div data-role="content"><p><a href="#about">About this app</a></p></div>
</div>

<div data-role="page" id="about">
    <div data-role="header"><h1>About This App</h1></div>
    <div data-role="content"><p>This app rocks!<a href="#home">Go home</a></p></div>
</div>  

注意在这个页面中包含了两个data-role ，并且他们的切换是使用了#home的方式，这就是说我们可以在一个html中包含了两个页面，点击的时候用jquerymobile的方式进行了切换。

除了这种切换之外，我们也可以使用jquerymobile提供给我们的跳转方式来跳转我们的页面：

演示代码：

 <div data-role="content">
        <a href="mobile2.html" data-transition="slideup">click me</a>  //尝试一下
    </div>  

slide 从右到左切换（默认）

slideup 从下到上切换

slidedown 从上到下切换

pop 以弹出的形式打开一个页面

fade 渐变退色的方式切换

flip 旧页面翻转飞出，新页面飞入

案例3：也可以把一个页面当作对话框的形式显示出来

演示代码：

<div data-role="page" id="home">
    <div data-role="header"><h1>页面1</h1></div>
    <div data-role="content"><p><a href="#about" data-rel="dialog">About this app</a></p></div>
</div>

<div data-role="page" id="about">
    <div data-role="header"><h1>About This App</h1></div>
    <div data-role="content"><p>This app rocks!<a href="#home">页面2</a></p></div>
</div>

官方案例：

<div data-role="page" id="pageone">
  <div data-role="content">
    <a href="#pagetwo" data-rel="dialog">转到页面二</a>
  </div>
</div>

<div data-role="page" id="pagetwo">
  <div data-role="content">
    <a href="#pageone">转到页面一</a>
  </div>
</div>  

1、关于jquery中的按钮 三种声明方式

 #login{
                 5em;
            }
  <button id="login">login</button>
  <input type="button" value="login">
  <a href="#" data-role="button">login</a>  

注意点：可以观察按钮默认多大？这么修改 jQuery Mobile 中的按钮会自动获得样式，这增强了他们在移动设备上的交互性和可用性。我们推荐您使用 data-role="button" 的 <a> 元素来创建页面之间的链接，而 <input> 或 <button> 元素用于表单提交。

为我们提供的图标 <a href="#anylink" data-role="button" data-icon="search">搜索</a> //观察是什么样子，大小根据什么来的

测试下这些都有什么样的效果:

    <a href="#anylink" data-role="button" data-icon="arrow-l">左</a>
    <a href="#anylink" data-role="button" data-icon="arrow-r">右</a>
    <a href="#anylink" data-role="button" data-icon="delete">删除</a>
    <a href="#anylink" data-role="button" data-icon="info">信息</a>
    <a href="#anylink" data-role="button" data-icon="home">首页</a>
    <a href="#anylink" data-role="button" data-icon="back">返回</a>
    <a href="#anylink" data-role="button" data-icon="grid">网格</a>
<a href="#" data-role="button" data-icon="plus">转播到 QQ 空间</a>  

2、可折叠性质的文本

看看效果，点击可以查看全部类容，再次点击可以让类容隐藏：

<div data-role="content">
        <div data-role="collapsible" data-state="collapsed">
            <h3>About this app</h3>
            <p>This app rocks!</p>
        </div>
    </div>  

案例2：可折叠嵌套

<div data-role="collapsible">
     <h1>点击我 - 我可以折叠！</h1>
     <p>我是被展开的内容。</p>
    <div data-role="collapsible">
           <h1>点击我 - 我是嵌套的可折叠块！</h1>
         <p>我是嵌套的可折叠块中被展开的内容。</p>
    </div>
</div>  

3、jquerymobile给我提供了非常方便使用的导航条目

演示代码：

<div data-role="header">
        <div data-role="navbar">
            <ul>
                <li><a href="#" class="ui-btn-active">页面1</a></li>   //注意这里，class="ui-btn-active"--代表当前激活状态，我们可以动态修改
                <li><a href="mobile2.html">页面2</a></li>
                <li><a href="#anylink">页面3</a></li>
            </ul>
        </div>
    </div>  

4、jqueryMobile的网格形式

首先用我们原始的table看能不能正常使用：

<div data-role="content"><br><br>
      <table>
          <tr>
              <td>张三</td>
              <td>18</td>
          </tr>
          <tr>
              <td>李四</td>
              <td>20</td>
          </tr>
      </table>  

关于jquerymobile的列表

Query Mobile 中的列表视图是标准的 HTML 列表：有序列表 (<ol>) 和无序列表 (<ul>)。

  <ol data-role="listview">
            <li><a href="#">选择1</a></li>
            <li><a href="#">选择2</a></li>
        </ol>
        <ul data-role="listview">
            <li><a href="#">选择1</a></li>
            <li><a href="#">选择2</a></li>
        </ul>  

注意看原生态的是不是很丑陋，我们可以美化一下，让圆角矩形

 .test{
             10em;
            height: 30em;
        }
  <div class="test">
        <ul data-role="listview" data-inset="true">
            <li><a href="#">选择1</a></li>
            <li><a href="#" >选择2</a></li>
        </ul>
        </div>  

注意我们也可以对我们不同的选项进行分组处理：

 <ul data-role="listview" data-inset="true">
            <li data-role="list-divider">测试</li>
            <li><a href="#" >选择1</a></li>
            <li><a href="#" >选择2</a></li>
            <li data-role="list-divider">测试2</li>
            <li><a href="#" >选择1</a></li>
            <li><a href="#" >选择2</a></li>
        </ul>  

当我们需要选取一些选项的时候jquerymobile也为我们提供了帮助

 <p>请选择</p>
            <ul data-role="listview" data-filter="true">   //data-filter-placeholder="搜索姓名"我们还可以给他搜索语句
                <li><a href="#">张三</a></li>
                <li><a href="#">李四</a></li>
                <li><a href="#">王五</a></li>
            </ul>  

当然除了处理这些列表之类的东西我们还可以在data-role="listview"中添加

案例1：
演示代码：

<ul data-role="listview" data-inset="true">
                <li>
                    <a href="mobile2.html"><img src="images/icon1.png"></a>
                </li>
                <li>
                    <a href="#"><img src="images/icon3.png"></a>
                </li>
            </ul>  

看看这个家伙，图文交互效果
演示代码：

   <ul data-role="listview" data-inset="true">
                <li>
                    <a href="#">
                        <img src="images/icon1.png">
                        <h2>hello</h2>
                        <p>这本书很好看</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/icon1.png">
                        <h2>这也是一本书</h2>
                        <p>这本书也不错</p>
                    </a>
                </li>
            </ul>  

这里注意： 对于大于 16x16px 的图像，请在链接中添加  元素。 <li><a href="#"><img src="chrome.png"></a></li>

如需向您的列表添加 16x16px 的图标，请向  元素添加 class="ui-li-icon" 属性： <li><a href="#"><img src="us.png" alt="USA" class="ui-li-icon">USA</a></li>

二、关于jquerymobile表单的操作

jquerymobile对表单的操作中
文本框
搜索框
单选框
复选框
选择菜单
滑动条
翻转切换开关

案例1：

 <form method="post" action="#">
            <label for="userName">姓名:</label>   //注意这里的for要和下边的id相对应  class="ui-hidden-accessible"这句话是做什么的呢?
            <input type="text" name="userName" id="userName">
        </form>  

注意： fieldcontain 属性基于页面宽度来设置 label 和表单控件的样式。当页面宽度大于 480px 时，它会自动将 label 与表单控件放置于同一行。当小于 480px 时，label 会被放置于表单元素之上。
演示代码：

<div data-role="fieldcontain">
    <label for="fname">First name:</label>
    <input type="text" name="fname" id="fname">
    <label for="lname">Last name:</label>
    <input type="text" name="lname" id="lname">
  </div>  

data-role="none"---如果不喜欢jquerymobile提供的这个样式，可以在输入单中用这个语句，将不会使用默认的东西

<div data-role="fieldcontain">
                <label for="search">需要查找什么？</label>
                <input type="search" name="search" id="search" value="" placeholder="搜索内容"/>  //这里可以做一个搜索框
</div>  

自动帮我们完成日期控件，由jQuerymobile提供：

 <div data-role="fieldcontain">
                <label for="date">今天的日期：</label>
                <input type="date" name="date" id="date" value="">
            </div>  

注意，比较好玩的选择框：
演示代码：

<div data-role="fieldcontain">
                <label for="colors">选择喜爱的颜色：</label>
                <select id="colors" name="colors">
                    <option value="red">红色</option>
                    <option value="green">绿色</option>
                    <option value="blue">蓝色</option>
                </select>
            </div>  

注意，如果我们的表单类容比较多可以分组显示一下：
演示代码：

<select name="day" id="day">
   <optgroup label="Weekdays">
    <option value="mon">Monday</option>
    <option value="tue">Tuesday</option>
    <option value="wed">Wednesday</option>
   </optgroup>
   <optgroup label="Weekends">
    <option value="sat">Saturday</option>
    <option value="sun">Sunday</option>
   </optgroup>
</select>  

可以通过开关切换做一些事情：

<div data-role="fieldcontain">
                    <label for="switch">切换开关：</label>
                    <select name="switch" id="switch" data-role="slider">
                        <option value="on">开</option> 
                        <option value="off">关</option> //这样做呢 <option value="off" selected>Off</option>
                    </select>
                </div>   

checkbox选择框：

 <div data-role="controlgroup">
                <legend>选择喜爱的电影：</legend>
                <label for="mov1">蜘蛛侠</label>
                <input type="checkbox" name="mov1" id="mov1" />
                <label for="mov2">变形金刚</label>
                <input type="checkbox" name="mov2" id="mov2" />
                <label for="mov3">碟中谍</label>
                <input type="checkbox" name="mov3" id="mov3" />
            </div>   

注意你如果觉得每次都写data-role="fieldcontain" 比较麻烦，可以这样简写：

 <div data-role="fieldcontain">
        <label for="fullname">全名：</label>
        <input type="text" name="fullname" id="fullname">       
        <label for="bday">生日：</label>
        <input type="date" name="bday" id="bday">
        <label for="email">电邮：</label>
        <input type="email" name="email" id="email" placeholder="您的邮箱地址..">
      </div>  

jQuery Mobile 提供了五种不同的样式主题，从 "a" 到 "e" - 每种主题带有不同颜色的按钮、栏、内容块，等等。jQuery Mobile 中的一种主题由多种可见的效果和颜色构成。

<div data-role="page" data-theme="a|b|c|d|e">

 <div data-role="header" data-theme="b">  //
        列表视图测试
    </div>