jQuery Mobile

<ul data-role="listview">
 <li data-role="list-divider">欧洲</li>
  <li><a href="#">法国</a></li>
  <li><a href="#">德国</a></li>
</ul>

如果您的列表是字母顺序的（比如通讯录），jQuery Mobile 自动添加恰当的分隔符，通过在 <ol>或<ul>元素上设置 data-autodividers="true"属性

<ul data-role="listview" data-autodividers="true">
  <li><a href="#">Adam</a></li>
  <li><a href="#">Angela</a></li>
  <li><a href="#">Bill</a></li>
  <li><a href="#">Calvin</a></li>
  ...
</ul>

搜索过滤器

如需在列表中添加搜索框，请使用 data-filter="true"属性：
实例

<ul data-role="listview" data-filter="true"></ul>

默认地，搜索框中的文本是 "Filter items..."。

如需修改默认文本，请使用 data-filter-placeholder 属性：
实例

<ul data-role="listview" data-filter="true" data-filter-placeholder="搜索姓名">

jQuery Mobile 列表内容

jQuery Mobile 列表缩略图

对于大于 16x16px 的图像，请在链接中添加 <img>元素。

jQuery Mobile 将自动把图像调整至 80x80px：
实例

<ul data-role="listview">
  <li><a href="#"><img src="chrome.png"></a></li>
</ul>

请使用标准 HTML 来填充带有信息的列表：以便于信息能正确的嵌进去

<ul data-role="listview">
  <li>
    <a href="#">
    <img src="chrome.png">
    <h2>Google Chrome</h2>
    <p>Google Chrome 免费的开源 web 浏览器。发布于 2008 年。</p>
    </a>
  </li>
</ul>

jQuery Mobile 列表图标

如需向您的列表添加 16x16px 的图标，请向 <img> 元素添加 class="ui-li-icon" 属性：
实例

<li><a href="#"><img src="us.png" alt="USA" class="ui-li-icon">USA</a></li>

拆分按钮

如需创建带有垂直分隔栏的拆分列表，请在

jQuery Mobile 会自动为第二个链接添加蓝色箭头图标的样式，链接中的文本（如有）将在用户划过该图标时显示：
实例

<ul data-role="listview">
  <li>
    <a href="#"><img src="chrome.png"></a>
    <a href="#">Some Text</a>
  </li>
</ul>

计数泡沫

计数泡沫用于显示与列表项相关的数目，例如邮箱中的消息：

如需添加计数泡沫，请使用行内元素，比如<span>，设置 class "ui-li-count" 属性并添加数字：

<ul data-role="listview">
  <li><a href="#">Inbox<span class="ui-li-count">335</span></a></li>
  <li><a href="#">Sent<span class="ui-li-count">123</span></a></li>
  <li><a href="#">Trash<span class="ui-li-count">7</span></a></li>
</ul>

更改列表项的默认链接图标

直接修改data-icon即可

<ul data-role="listview" data-inset="true">    
      <li><a href="#">默认是右箭头</a></li>
      <li data-icon="plus"><a href="#">data-icon="plus"</a></li>
      <li data-icon="minus"><a href="#">data-icon="minus"</a></li>
      <li data-icon="delete"><a href="#">data-icon="delete"</a></li>
      <li data-icon="info"><a href="#">data-icon="info"</a></li>   
      <li data-icon="false"><a href="#">data-icon="false"</a></li>
    </ul>

可折叠列表

把data-role="collapsible"使用在标签中即可

 <div data-role="content">
    <div data-role="collapsible">
    <h4>A</h4>
    <ul data-role="listview">
      <li><a href="#">Adam</a></li>
      <li><a href="#">Angela</a></li>
    </ul>
  </div>

制作日历

<h2>我的日历</h2>
    <ul data-role="listview" data-inset="true">
      <li data-role="list-divider">星期三, 1 月 2 日, 2013 <span class="ui-li-count">2</span></li>
      <li><a href="#">   
        <h2>医生</h2>
        <p><b>To Peter Griffin</b></p>
        <p>Well, Mr. Griffin, I've looked into physical results.</p>
        <p>Ah, Mr. Griffin, I'm not quite sure how to say this. Kim Bassinger? Bass singer? Bassinger?</p>
        <p>But now, onto the cancer</p>
        <p>You are a Cancer, right? You were born in July? Now onto these test results.</p>
        <p class="ui-li-aside">Re: Appointment</p></a>
      </li>
      <li><a href="#">
        <h2>Glen Quagmire</h2>
        <p>Remember me this weekend!</p>
        <br>
        <p>- giggity giggity goo</p>
        <p class="ui-li-aside">Re: Camping</p></a>
      </li>

jQuery Mobile 表单

jQuery Mobile 会自动为 HTML 表单添加优异的便于触控的外观。

jQuery Mobile 表单结构

jQuery Mobile 使用 CSS 来设置 HTML 表单元素的样式，以使其更有吸引力更易用。

在 jQuery Mobile 中，您可以使用以下表单控件：

文本框
搜索框
单选框
复选框
选择菜单
滑动条
翻转切换开关

当您与 jQuery Mobile 表单打交道时，应该了解以下信息：

<form> 元素必须设置 method 和 action 属性
每个表单元素必须设置唯一的 "id" 属性。该 id 在站点的页面中必须是唯一的。这是因为 jQuery Mobile 的单页面导航模型允许许多不同的“页面”同时呈现。
每个表单元素必须有一个标记（label）。请设置 label 的 for 属性来匹配元素的 id。

实例

<form method="post" action="demoform.asp">
  <label for="fname">First name:</label>
  <input type="text" name="fname" id="fname">
</form>

如需隐藏 label，请使用类 ui-hidden-accessible。这很常用，当您需要元素的 placeholder 属性充当 label 时：
实例

<form method="post" action="demoform.asp">
  <label for="fname" class="ui-hidden-accessible">姓名：</label>
  <input type="text" name="fname" id="fname" placeholder="姓名...">
</form>

域容器

如果需要 label 和表单元素在宽屏幕上显示正常，请用带有 data-role="fieldcontain"属性的 <div> 或 <fieldset> 元素来包装 label 或表单元素：
实例

<form method="post" action="demoform.asp">
  <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>
</form>

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

如需避免 jQuery Mobile 自动为可点击元素设置样式，请使用 data-role="none" 属性：
实例

<label for="fname">First name:</label>
<input type="text" name="fname" id="fname" data-role="none">

jQuery Mobile 表单输入元素

jQuery Mobile 文本输入

输入字段是通过标准的 HTML 元素编写的，jQuery Mobile 会为它们设置专门针对移动设备的美观易用的样式。您还可以使用新的 HTML5 <input> 类型：

<!DOCTYPE html>
<html>
<head>
<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">
    <form method="post" action="demoform.asp">
      <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>
      <input type="submit" data-inline="true" value="提交">
    </form>
  </div>
</div>
</body>
</html>

请使用 placeholder 来规定简短的提示，以描述输入字段的预期值：
<input placeholder="sometext">

文本框

请使用 <textarea> 来实现多行文本输入。
注释：文本框会自动扩大，以适应您输入的文本行。

<form method="post" action="demoform.asp">
  <div data-role="fieldcontain">
    <label for="info">Additional Information:</label>
    <textarea name="addinfo" id="info"></textarea>
  </div>
</form>

搜索框

输入类型 type="search" 是 HTML5 中的新类型，用于定义供输入搜索词的文本字段：

<form method="post" action="demoform.asp">
  <div data-role="fieldcontain">
    <label for="search">Search:</label>
    <input type="search" name="search" id="search">
  </div>
</form>

单选按钮

当用户只选择有限数量选项中的一个时，会用到单选按钮。
如需创建一套单选按钮，请添加 type="radio" 的 input元素以及相应的 label。在 <fieldset> 元素中包装单选按钮。您也可以增加一个 <legend> 元素来定义<fieldset> 的标题。
提示：请用data-role="controlgroup" 属性来组合这些按钮：

<form method="post" action="demoform.asp">
  <fieldset data-role="controlgroup">
    <legend>Choose your gender:</legend>
      <label for="male">Male</label>
      <input type="radio" name="gender" id="male" value="male">
      <label for="female">Female</label>
      <input type="radio" name="gender" id="female" value="female"> 
  </fieldset>
</form>

复选框

当用户选择有限数量选项中的一个或多个选项时，会用到复选框：
和单选我唯一的不同是：复选是input type="checkbox"单选是input type="radio"

<form method="post" action="demoform.asp">
  <fieldset data-role="controlgroup">
    <legend>Choose as many favorite colors as you'd like:</legend>
      <label for="red">Red</label>
      <input type="checkbox" name="favcolor" id="red" value="red">
      <label for="green">Green</label>
      <input type="checkbox" name="favcolor" id="green" value="green">
      <label for="blue">Blue</label>
      <input type="checkbox" name="favcolor" id="blue" value="blue"> 
  </fieldset>
</form>

为选项设置预选

如果您希望“预选”其中一个按钮，请使用 HTML<input> 标签的 checked 属性：

<input type="radio" checked>
<input type="checkbox" checked>

jQuery Mobile 表单选择菜单

<select> 元素创建带有若干选项的下拉菜单。
<select> 元素中的 <option> 元素定义列表中的可用选项：

<form method="post" action="demoform.asp">
  <fieldset data-role="fieldcontain">
    <label for="day">选择日期</label>
    <select name="day" id="day">
      <option value="mon">星期一</option>
      <option value="tue">星期二</option>
      <option value="wed">星期三</option>
    </select>
  </fieldset>
</form>

如果列表中包含了一长列相关的选项，请在<select>中使用 <optgroup> 元素：

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

如果您希望在所有移动设备上显示一致外观的选择菜单，请使用 jQuery 的自定义选择菜单(说实话，我并不认为这种样式好看)，data-native-menu="false"属性：

<select name="day" id="day" data-native-menu="false">

Multiple Selections

如需在选择菜单中选取多个选项，请在 <select> 元素中使用 multiple 属性：

<select name="day" id="day" multiple data-native-menu="false">

注意：在这里multiple相当于multiple="multiple"

预选选项

add selected

<div data-role="content">
    <form method="post" action="demoform.asp">
      <fieldset data-role="fieldcontain">
        <label for="day">选择日期</label>
        <select name="day" id="day">
          <option value="mon">Monday</option>
          <option value="tue">Tuesday</option>
          <option value="wed" selected>Wednesday</option>
          <option value="thu">Thursday</option>
          <option value="fri">Friday</option>
          <option value="sat">Saturday</option>
          <option value="sun">Sunday</option>
        </select>
      </fieldset>
      <input type="submit" data-inline="true" value="提交">
    </form>
  </div>
</div>

水平地组合选择菜单

  <div data-role="content">
    <form method="post" action="demoform.asp">
      <div data-role="fieldcontain">
        <fieldset data-role="controlgroup" data-type="horizontal">
          <legend>安排会议：</legend>
            <label for="day">选择日期：</label>
            <select name="day" id="day">
              <option value="mon">Monday</option>
              <option value="tue">Tuesday</option>
              <option value="wed">Wednesday</option>
              <option value="thu">Thursday</option>
              <option value="fri">Friday</option>
              <option value="sat">Saturday</option>
              <option value="sun">Sunday</option>
            </select>
            <label for="time">选择时间：</label>
            <select name="time" id="time">
              <option value="08">08:00</option>
              <option value="09">09:00</option>
              <option value="10">10:00</option>
              <option value="11">11:00</option>
              <option value="12">12:00</option>
              <option value="13">13:00</option>
              <option value="14">14:00</option>
              <option value="15">15:00</option>
              <option value="16">16:00</option>
            </select>
        </fieldset>
      </div>
      <input type="submit" data-inline="true" value="提交">
    </form>
  </div>
</div>

jQuery Mobile 表单 - 滑块

jQuery Mobile 滑块控件

滑块允许您从一定范围内的数字中选取值：
如需创建滑块，请使用 <input type="range">：

<form method="post" action="demoform.asp">
  <div data-role="fieldcontain">
    <label for="points">Points:</label>
    <input type="range" name="points" id="points" value="50" min="0" max="100">
  </div>
</form>

使用下列属性来规定限定：
max - 规定允许的最大值
min - 规定允许的最小值
step - 规定合法的数字间隔
value - 规定默认值

<!DOCTYPE html>
<html>
<head>
<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">
    <form method="post" action="demoform.asp">
      <div data-role="fieldcontain">
        <label for="points">Points:</label>
        <input id="value"  type="range" name="points" id="points" value="50" min="0" max="100">
      </div>
      <input  type="submit" onclick="demo()" data-inline="true" value="提交">
    </form>
  </div>
</div>
<script>
function demo(){
    var val = document.getElementById("value").value;
    alert(val);
}
</script>
</body>
</html>

use data-higtlight to control heighlight

<input type="range" data-hightlight="true">

切换开关

切换开关常用于开/关或对/错按钮：

如需创建切换，请使用 data-role="slider" 的 <select> 元素，并添加两个 <option> 元素：

<form method="post" action="demoform.asp">
  <div data-role="fieldcontain">
    <label for="switch">Toggle Switch:</label>
    <select name="switch" id="switch" data-role="slider">
      <option value="on">On</option>
      <option value="off">Off</option>
    </select>
  </div>
</form>

jQuery Mobile 主题

jQuery Mobile 主题

jQuery Mobile 提供了五种不同的样式主题，从 "a" 到 "e" - 每种主题带有不同颜色的按钮、栏、内容块，等等。jQuery Mobile 中的一种主题由多种可见的效果和颜色构成。
如需定制应用程序的外观，请使用data-theme 属性，并为该属性分配一个字母：

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

默认地，jQuery Mobile 为页眉和页脚使用 "a" 主题，为页眉内容使用 "c" 主题（亮灰）。不过，您能够自如地对主题进行混合

主题化的对话框

用data-overlay-theme控制背景颜色

<!DOCTYPE html>
<html>
<head>
<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" id="pageone">
  <div data-role="header">
    <h1>欢迎来到我的主页</h1>
  </div>
  <div data-role="content">
    <p>这是一张标准页面。</p>
    <a href="#pagetwo" data-rel="dialog">转到主题化的对话页面</a>
  </div>
  <div data-role="footer">
    <h1>页脚文本</h1>
  </div>
</div> 
<div data-role="page" id="pagetwo" data-overlay-theme="b">
  <div data-role="header" data-theme="b">
    <h1>我是主题化的对话框</h1>
  </div>
  <div data-role="content" data-theme="a">
    <p>data-overlay-theme 属性规定对话框出现在其上的页面的背景色。</p>
    <a href="#pageone">转到页面一</a>
  </div>
  <div data-role="footer" data-theme="e">
    <h1>页脚文本</h1>
  </div>
</div> 
</body>
</html>

添加新主题

jQuery Mobile 同时允许您向移动页面添加新主题。
请通过编辑 CSS 文件（如已下载 jQuery Mobile）来添加或编辑新主题。只需拷贝一段样式，并用字母名（f-z）来对类进行重命名，然后调整为您喜欢的颜色和字体即可。
您也可以通过在 HTML 文档中使用主题类来添加新样式 - 为工具条添加类 ui-bar-(a-z)，并为内容添加类 ui-body-(a-z)：

<style>
.ui-bar-f
{
color:green;
background-color:yellow;
}
.ui-body-f
{
font-weight:bold;
color:purple;
}
</style>

jQuery Mobile 事件

jQuery Mobile 事件

您能够在 jQuery Mobile 中使用任何标准的 jQuery 事件。
此外，jQuery Mobile 还提供若干种为移动浏览定制的事件：
触摸事件 - 当用户触摸屏幕时触发（敲击和滑动）
滚动事件 - 当上下滚动时触发
方向事件 - 当设备垂直或水平旋转时触发
页面事件 - 当页面被显示、隐藏、创建、加载以及/或卸载时触发

在 jQuery Mobile 中，我们使用 pageinit 事件，该事件在页面已初始化并完善样式设置后发生（当第一个界面初始化后触发pageinit事件，若进入第二个页面后，再回到第一个页面，不会触发pageinit事件）
第二个参数指向 ("#pageone") 指向页面的 idpoints to the id of the page to specify the events for:
jQuery Mobile pageinit 事件

<script>
$(document).on("pageinit","#pageone",function(){
   // 此处是 jQuery 事件...
});
</script>

jQuery on()方法用于添加事件处理程序。

jQuery Mobile Touch 事件

Touch 事件在用户触摸屏幕（页面）时触发。
在桌面环境下等价于鼠标点击。

jQuery Mobile Tap

tap 事件在用户敲击某个元素时触发。
下面的例子当 <p>元素上触发 tap 事件时，隐藏当前 <p>元素：

$("p").on("tap",function(){
  $(this).hide();
});

<!DOCTYPE html>
<html>
<head>
<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>
<script>
$(document).on("pageinit","#pageone",function(){
  $("p").on("tap",function(){
    $(this).hide();
  });                       
});
</script>
</head>
<body>
<div data-role="page" id="pageone">
  <div data-role="header">
    <h1>tap 事件</h1>
  </div>
  <div data-role="content">
    <p>敲击我，我会消失。</p>
    <p>敲击我，我会消失。</p>
    <p>敲击我，我也会消失。</p>
  </div>
  <div data-role="footer">
    <h1>页脚文本</h1>
  </div>
</div> 
</body>
</html>

taphold事件

同样的 taphold 事件在用户持续点击某个元素（1秒）时触发，使用方法和tap事件相同。

$("p").on("taphold",function(){
  $(this).hide();
});

jQuery Mobile Swipe

swipe 事件在用户在某个元素上水平滑动超过 30px 时被触发：

$("p").on("swipe",function(){
  $("span").text("Swipe detected!");
});

jQuery Mobile Swipeleft

swipeleft 事件在用户在某个元素上从左滑动超过 30px 时被触发：

$("p").on("swipeleft",function(){
  alert("You swiped left!");
});

jQuery Mobile Swiperight

swiperight 事件在用户在某个元素上从右滑动超过 30px 时被触发：

$("p").on("swiperight",function(){
  alert("You swiped right!");
});

jQuery Mobile 滚动事件

jQuery Mobile 提供两种滚动事件：在滚动开始和当滚动结束。

jQuery Mobile Scrollstart

scrollstart 事件在用户开始滚动页面时被触发：

$(document).on("scrollstart",function(){
  alert("开始滚动！");
});

iOS 设备会在滚动事件发生时冻结 DOM 操作，这意味着当用户滚动时无法改变任何事物。

jQuery Mobile Scrollstop

scrollstop 事件在用户停止滚动页面时被触发：

$(document).on("scrollstop",function(){
  alert("结束滚动！");
});

jQuery Mobile 方向事件

jQuery Mobile orientationchange 事件

orientationchange 事件在用户垂直或水平旋转移动设备时被触发。
Mobile
如需使用 orientationchange 事件，请把它添加到 window 对象：

$(window).on("orientationchange",function(){
  alert("方向已改变！");
});

callback 函数可以设置一个参数，即 event 对象，它会返回移动设备的方向："portrait" （设备被握持的方向是垂直的）或 "landscape" （设备被握持的方向是水平的）：

$(window).on("orientationchange",function(event){
  alert("方向是：" + event.orientation);
});

jQuery Mobile 页面事件

在 jQuery Mobile 中与页面打交道的事件被分为四类：
Page Initialization - 在页面创建前，当页面创建时，以及在页面初始化之后
Page Load/Unload - 当外部页面加载时、卸载时或遭遇失败时
Page Transition - 在页面过渡之前和之后
Page Change - 当页面被更改，或遭遇失败时
如需关于所有 jQuery Mobile 事件的完整信息，请访问我们的 jQuery Mobile 事件参考手册。

jQuery Mobile Initialization 事件

当 jQuery Mobile 中的一张典型页面进行初始化时，它会经历三个阶段：
在页面创建前
页面创建
页面初始化
每个阶段触发的事件都可用于插入或操作代码。

$(document).on("pagebeforecreate",function(event){
  alert("触发 pagebeforecreate 事件！");
}); 
$(document).on("pagecreate",function(event){
  alert("触发 pagecreate 事件！");
});
$(document).on("pageinit",function(event){
  alert("触发 pageinit 事件！")
});

jQuery Mobile Load 事件

页面加载事件属于外部页面。
无论外部页面何时载入 DOM，将触发两个事件。第一个是 pagebeforeload，第二个是 pageload （成功）或 pageloadfailed（失败）。
下表中解释了这些事件：

jQuery Mobile 过渡事件

我们还可以在从一页过渡到下一页时使用事件。
页面过渡涉及两个页面：一张“来”的页面和一张“去”的页面 - 这些过渡使当前活动页面（“来的”页面）到新页面（“去的”页面的改变过程变得更加动感。

path.get() 确定URL中的目录部分

jQuery.mobile.path.get( url )

<script>
$(document).ready(function() { 
   $( ".myButton" ).on( "click", function() { 
      var dirName = $.mobile.path.get( $( this ).attr( "value" ) ); 
    $( "#myResult" ).html( String( dirName ) );
 }) 
});
</script>