1，jQuery Mobile 主题与组件
在jQuery Mobile中，由于每一个页面中的布局和组件都被设计成一个全新的面向对象的CSS框架，整个站点或应用的视觉风格可以通过这个框架得到统一。很显然，jQueryMobile是用CSS来控制在屏幕中的显示效果的，而在CSS框架中包括两个重要组成部分：
- 结构：用于控制元素的屏幕中显示的位置、填充效果和内外边距等。
- 主题：用于控制元素的颜色、渐变、字体、圆角和阴影等视觉效果，并包含了多套的色板，每套色板中都定义了列表项、按钮、表单、工具栏、内容块和页面全部视觉效果。
在jQuery Mobile中，CSS样式中结构和主题是分离的！
jQuery Mobile页面主题有4个特点：
- 轻量级的文件：在jQueryMobile中全面支持CSS3和HTML5，页面中的圆角、阴影、渐变颜色和动画过渡效果等都是通过CSS3和HTML5实现，由于没有使用图片，大大减轻了服务器的负担。
- 轻量级的图标：在整个JQM主题框架中，使用了一套简化的图标集，它包含绝大部分在移动设备中使用的图标，极大地减轻了服务器对图标处理的负荷。
- 灵活的主题：JQM主题框架系统提供了多套可供选择的主题和色调，并且每套主题之间可以混搭。
- 便捷的自定义主题：在JQM中除了可以使用系统框架提供的主题外，还允许开发者自定义主题框架。
jQueryMobile中的每一个主题都可以包含一个或多个调板。调板主要用于设置工具栏、页面区块、按钮和列表的颜色。调板可以很方便的切换主题中的配色方案。
- jQuery Mobile 1.4.5版本中提供了两套主题样式，分别用字母a和b进行引用；
- jQuery Mobile 1.1.1版本中提供了五套主题样式，分别用字母a、b、c、d和e进行引用。
按照惯例，a是优先级最高的调板，默认为黑色（如下图）： 以下是默认主题所规定的五种调板和其含义：
- a：最高优先级，黑色
- b：优先级次之，蓝色
- c：基准优先级，灰色
- d：可选优先级，灰白色
- e：表示强调，黄色
<div id="page1" data-role="page" data-theme="a"></div> <div id="page2" data-role="page" data-theme="b"></div>
使用默认调板：jQueryMobile内建了主题控制相关模块。调板可以使用data-theme属性来控制。如果你不指定data-theme属性，将默认采用a调板。以下代码定义了一个采用默认调板的页面：
<div data-role="page" id="page"> <div data-role="header"> <h1>Sample Page</h1> </div> </div>使用不同的调板：默认情况下页面上所有的控件都会继承page上设置的调板，这意味着你只需设置一次便可以更改整个page。
<div data-role="page" id="page" data-theme="e"> <div data-role="header"> <h1>Sample Page</h1> </div> </div>当然你也可以独立设置不同元素的调板，同样设置元素的data-theme属性来实现：
<div data-role="page" id="page"> <div data-role="header" data-theme="c"> <h1>Header</h1> </div> <div data-role="content" data-theme="d"> <ul data-role="listview" data-theme="b"> <li><a href="#page1">Page 1</a></li> </ul> </div> </div>
2，按钮
在 jQuery Mobile 中，按钮可通过三种方式创建：
- 使用 <button> 元素
- 使用 <input> 元素
- 使用带有 data-role="button" 的 <a> 元素
2.1，内联按钮
默认情况下，按钮都是块状，占满整个屏幕宽度。如果你想要一个仅是与内容一样宽的按钮，或者如果您想要并排显示两个或多个按钮，请添加 data-inline="true"：
- 如果在按钮元素中添加 data-inline=“true”，该按钮会根据内容中文字和图片的宽度自动进行缩放，形成一个紧凑型的按钮。
- 如果想要将缩放后的按钮在同一行显示，可以在多个按钮的外层增加一个<div>容器，在该容器中将设置data-inline属性值为true，这样就可以使容器中的按钮样式自动缩放至最小宽度，并且以浮动效果在一行显示。
在内联按钮中，如果想让两个以上按钮显示在同一行，且自动均分页面宽度，可以使用网格分栏的方式，将多个按钮放置在分栏后的同一行中。
使用<a>元素创建按钮：<a href="#" data-role="button" data-inline="true" class="ui-btn-active">确定</a> 使用 <button> 元素创建按钮：<input type="button" data-icon="delete" value="取消">
2.2，组合按钮
jQuery Mobile 提供了一个简单的方法来将按钮组合在一起。data-role=“controlgroup” 属性和 data-type=“horizontal|vertical” 一起使用来规定是否水平或垂直组合按钮。
默认情况下，组合按钮是垂直组合，它们之间没有外边距和空间。并且只有第一个和最后一个按钮是圆角，以便它们组合在一起的时候创建一个漂亮的外观。
2.3，覆盖按钮默认设置
圆角设置：
data-corners true | false 规定按钮是否有圆角。 ui-corner-all 为按钮添加圆角 默认情况下 <input> 按钮有圆角及阴影效果。 <a> 和 <button> 元素没有。小按钮设置：
data-mini true | false 规定是否是小型按钮。 ui-mini 制作小按钮阴影设置：
data-shadow true | false 规定按钮是否有阴影。 ui-shadow 为按钮添加阴影
2.4，给按钮添加图标
【使用内置的图标集】
（1）为 jQuery Mobile 按钮添加图标
使用 data-icon 属性： <a href="#anylink" data-role="button" data-icon="search">搜索</a> 使用 ui-icon 类将图标添加到按钮上 <a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left">Search</a>（2）定位图标
使用 data-iconpos 属性来规定位置： <a href="#link" data-role="button" data-icon="search" data-iconpos="top">上</a> <a href="#link" data-role="button" data-icon="search" data-iconpos="right">右</a> <a href="#link" data-role="button" data-icon="search" data-iconpos="bottom">下</a> <a href="#link" data-role="button" data-icon="search" data-iconpos="left">左</a> 请使用 ui-btn-icon 属性来指定位置： <a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-top">顶部</a> <a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-right">右侧</a> <a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-bottom">底部</a> <a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left">左侧</a>（3）只显示图标
如果只需显示图标，请将 data-iconpos 设置为 "notext"： <a href="#link" data-role="button" data-icon="search" data-iconpos="notext">搜索</a> 如果你只想显示图标，可以使用 "notext": <a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-notext">搜索</a>（4）移除圆圈
默认情况下，所有的图标都有一个灰色的圆圈。如果你不需要它，可以在元素中使用 "ui-nodisc-icon" 类： <a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left">使用圆圈 (默认)</a> <a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left ui-nodisc-icon">去掉圆圈</a>（5）黑色、白色按钮
默认情况下，所有图标都是白色的。 如果需要改变图标颜色为黑色，可以在元素添加 "ui-alt-icon"： <a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left">白色</a> <a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left ui-alt-icon">黑色</a>【使用自定义图标集】必须为18*18或36*36像素。图标本身必须是白色的，并且为PNG格式。首先传入一个自定义的data-icon=""属性值，然后JQM使用传入的值来给按钮应用一个自定义的类，接着可以通过使用CSS来给这个按钮应用自定义的图标。
3，列表
创建标准列表：jQuery Mobile 中的列表视图是标准的HTML 列表，包括有序(<ol>) 和 无序(<ul>)。应用方法就是在ul或ol标签中添加data-role=“listview”属性。在每个项目(<li>)中添加链接，用户可以点击它。
<ul data-role="listview"> <li><a href="#">星期五音乐餐吧</a></li> <li><a href="#">恋爱转角情人西餐厅</a></li> <li><a href="#">成都印象</a></li> <li><a href="#">美食家私房菜馆</a></li> </ul>
创建嵌入列表：嵌入式列表的列表样式将呈现圆角边缘 要创建一个嵌入型列表，首先创建一个标准列表，然后给ul元素添加data-inset="true"属性。
创建嵌套列表：如果定义嵌套列表，只需要在简单列表视图的基础上嵌套新的一层列表即可，而下一级的嵌套列表会继承上一级的属性设置。
创建分类列表：将包含有分类提示的文字放置于<li data-role="list-divider">标签中，然后将分类标签插入到列表项目之间，分隔不同类别的列表项目。如果你有一个字母顺序排列的列表，(例如一个电话簿)通过 <ol> 或者<ul> 元素的 data-autodividers=“true” 属性设置可以配置为自动生成的项目的分隔。data-autodividers="true" 可以配置为自动生成的项目的分隔。默认情况下，创建的分隔文本是列表项文本的第一个大写字母。
<ul> <li data-role="list-divider" class="list01">中餐厅</li> <li><a href="#"><img src="images/174404.jpg" /> <h2>外婆家私房菜馆</h2> <p>主营精致的创新私房菜为主打，特别适合年青人</p> </a> </li> <li><a href="#"><img src="images/174405.jpg" /> <h2>成都印象</h2> <p>主营川菜，一起领略川菜的麻、辣、鲜、香</p> </a> </li> </ul>
<ul data-role="listview" data-autodividers="true" data-inset="true"> <li><a href="#">Adele</a></li> <li><a href="#">Agnes</a></li> <li><a href="#">Albert</a></li> <li><a href="#">Billy</a></li> <li><a href="#">Bob</a></li> <li><a href="#">Calvin</a></li> <li><a href="#">Cameron</a></li> <li><a href="#">Chloe</a></li> <li><a href="#">Christina</a></li> <li><a href="#">Diana</a></li> <li><a href="#">Gabriel</a></li> <li><a href="#">Glen</a></li> <li><a href="#">Ralph</a></li> <li><a href="#">Valarie</a></li> </ul>
拆分按钮列表：在拆分按钮列表中，每个列表视图被分为两部分，前半部分是普通的列表内容，后半部分位于列表内容右侧，作为独立的一列，包含图标按钮等。列表视图前半部分的文字和后半部分的图标可以是相同的超链接，也可以是不同的超链接。定义方法：在列表视图中，为每个<li>标签包含两个<a>标签。
列表缩略图与图标：缩略图是指在列表项的前面包含一个缩略图，实现时只需要在列表项文字之前加入一个缩略图即可，即在列表项目前面添加<img>标签，作为<li>标签的第一个子元素，则JQM会将图片自动缩放成边长为80px的正方形。如果<img>导入的是一个图标，则需要给该标签添加一个ui-li-icon的类样式，才能在列表的最左侧正常显示该图标。
气泡提示：在列表视图中，可以加入提示数据或者一段小的提示信息，它们将被JQM以气泡形式进行显示。实现气泡提示时，需要在列表的基础上完成两个步骤：
- 将列表内容文字置于超链接标签<a>之中。
- 在超链接标签<a>内部，列表文字之后添加气泡提示标签<span class=”ui-li-count”>和气泡提示内容</span>。
列表过滤：在列表视图容器中声明data-filter属性为true。声明之后JQM将自动在列表开始的位置添加一个输入框，使用者可以基于这个输入框过滤列表中的内容，可以自定义一个输入框作为搜索输入框。
- 创建 <input> 元素并指定 id，元素上加上 data-type="search" 属性。这样就能创建基本的搜索字段。将 <input> 元素放置于一个表单中，表单 <form> 元素使用 "ui-filterable" 类 - 该类会调整搜索字段与过滤元素的外边距。
- 接着为过滤的元素添加 data-input 属性。该值需要是 <input> 元素的 id。
自定义过滤：一般的插入到各个列表项的文本就是作为过滤的文本使用(如 A 对应 "Adele" 或 "B" 对应 "Billy")。 但是，如果想指定自定义的过滤的文本，需要在子元素中使用 data-filtertext 属性 <li data-filtertext="fav"><a href="#">Adele</a></li>。
折叠列表：在列表视图之外增加一个data-role为collapsible的div容器。
4，表单组件
jQuery Mobile表单是完全基于HTML原始代码且适合触摸操作的框架。在表单中各元素通过原始HTML自动升级为jQuery Mobile组件。要使用原始的HTML表单只需要将该表单元素的data-role属性值设置为none即可。
jQuery Mobile表单各个元素类型一般需要配合label元素，并对label元素的for属性设置和input元素相同的ID值。 如果需要 label 和表单元素在宽屏幕上显示正常，请用带有 data-role=“fieldcontain” 属性的 <div> 或 <fieldset> 元素来包装 label 或表单元素。"ui-field-contain" 类基于页面宽度来设置 label 和表单控件的样式。当页面宽度大于 480px 时，它会自动将 label 与表单控件放置于同一行。当小于 480px 时，label 会被放置于表单元素之上。
如需隐藏 label，请使用类 ui-hidden-accessible。此时，可以用placeholder 属性充当 label <label for="fname" class="ui-hidden-accessible">姓名:</label> <input type="text" name="fname" id="fname" placeholder="姓名...">。
可以使用 data-clear-btn="true" 属性来添加清除输入框内容的按钮 (一个在输入框右侧的 X 图标)。清除输入框的按钮可以在 <input> 元素中使用，但不能在 <textarea> 中使用。 搜索框中 data-clear-btn 默认值为 "true" ，你可以使用 data-clear-btn="false" 移除该图标。
3.1，文本输入框&文本域
输入字段是通过标准的 HTML 元素编码的，jQuery Mobile 将为它们添加样式使其看起来更具吸引力，在移动设备上更易使用。您也能使用新的 HTML5 的 <input> 类型：
<input type="text" name="username" id="username" placeholder="请输入用户名" data-clear-btn="true"/><br />
对于多行文本输入可使用 <textarea> 。 注意：当键入一些文本时，文本域会自动调整大小以适应新增加的行。
<textarea></textarea>
3.2，单选按钮&复选按钮
为了创建一系列单选按钮，请添加带有 type="radio" 的 input 以及相应的 label。把单选按钮包围在 <fieldset> 元素内。也可以添加一个 <legend> 元素来定义 <fieldset> 的标题。 提示：请使用 data-role="controlgroup" 来把按钮组合在一起。
<fieldset data-role="controlgroup"> <legend>地图模式:</legend> <label for="map1">街道</label> <input type="radio" name="map" id="map1" value="Map" checked="checked" /> <label for="map2">卫星</label> <input type="radio" name="map" id="map2" value="Satellite" /> <label for="map3">鸟瞰</label> <input type="radio" name="map" id="map3" value="Hybrid" /> </fieldset><fieldset data-role="controlgroup" data-type="horizontal"> <legend>类型:</legend> <input type="checkbox" name="genre" id="c1" /> <label for="c1" >古装</label> <input type="checkbox" name="genre" id="c2" /> <label for="c2" >言情</label> <input type="checkbox" name="genre" id="c3" /> <label for="c3" >警匪</label> </fieldset>
3.3，下拉框
使用<select>标签形成的选择菜单在jQuery Mobile中样式发生了很大的变化。它分为两种类别：一种是原生菜单类型，这种类型继续保持了原来PC端浏览器的样式，单击右端的向下箭头会出现一个下拉列表，可以选择其中的某一选项；另一种类型是自定义菜单类型，该类型专用于移动设备的浏览器显示。
<select> <option value="mon">星期一</option> <option value="tue">星期二</option> <option value="wed">星期三</option> <option value="thu">星期四</option> <option value="fri">星期五</option> <option value="sat">星期六</option> <option value="sun">星期日</option> </select>
- 自定义选择菜单：需要在<select>标签中添加data-native-menu=false，当data-native-menu=“false”时，选择菜单就不采用平台内置选择器，而采用由jQuery Mobile自定义的弹出浮动层窗口。自定义类型的菜单由按钮和菜单两部分组成。
<select data-native-menu="false"> <option value="">选择年份</option> <option value="2019">2019年</option> <option value="2020">2020年</option> <option value="2021">2021年</option> <option value="2022">2022年</option> <option value="2023">2023年</option> </select>
- 数据项分组的选择菜单：在select元素内指定optgroup元素并设置其label属性，jQuery Mobile会自动创建一个分隔符的分组标题，label属性就是该分隔符的标题文本。
<select name="delivery" id="delivery" data-native-menu="false"> <option value="standard">地面</option> <optgroup label="Digital"> <option value="barcode" selected>E-Ticket</option> <option value="nfc">NFC</option> </optgroup> </select>
- 禁用指定Option数据项的选择菜单：jQuery Mobile中通过设置option元素的disabled属性，可以实现只允许数据项在菜单选项中显示不能直接选择的功能。
<option value="jQuery Mobile" disabled>jQueryMobile</option>
- 多选的选择菜单：只需要在select元素中指定multiple属性，就可以实现多选功能。在内置选择器中，每当选择一个数据项时，其菜单按钮就会实时显示已选中项的值，如果选择的数据项超过两个以上，按钮中的文本会用一个逗号分隔两个数据项的值。如果按钮中的文本无法完全显示，则多余的部分会变成省略号。
<select name="day" id="day" multiple="multiple" data-native-menu="false"> <option>天</option> <option value="mon">星期一</option> <option value="tue">星期二</option> <option value="wed">星期三</option> <option value="thu">星期四</option> <option value="fri">星期五</option> <option value="sat">星期六</option> <option value="sun">星期日</option> </select>
- 含有占位符的选择菜单：在使用jQuery Mobile自定义的选择器浮动层时，占位符的功能才会生效。而调用平台内置的选择器不会因为该占位符的出现，而改变选择项时的文本内容显示。如果在option元素中存在一个占位符，jQuery Mobile会尝试在弹出选择菜单层中隐藏该option元素，只显示可用的选项值，并将选择菜单层的页眉标题栏显示该占位符文本内容。如果不想使用占位符功能，可以通过插件的hidePlaceholderMenuItems选项禁用该功能，用法如下：
$.mobile.selectmenu.prototype.options.hidePlaceholderMenuItems=false;当option元素中存在以下几种情况时，jQuery Mobile会添加一个占位符：（1）空值的option元素 当单击该按钮时，该占位符的option元素会因为jQuery Mobile自动隐藏掉而无法选择。 （2）没有文本内容的option元素 当option元素中的文本内容不为空时，例如输入“请选择你的兴趣”等字后，菜单按钮的文本就默认填充该字符串，但实际上该选择菜单按钮的值依然为空值。（3）带有data-placeholder属性的option元素 当使用data-placeholder属性时，无论option元素的value值或文本内容是否为空，都被jQuery Mobile当作一个占位符。
3.4，扩展INPUT元素
【滑块】jQuery Mobile允许添加一个range类型的范围选择性控件。该类型可以通过定义value、min、max等属性来确定可选择的范围及初始默认值，允许从一定范围内的数字中选取值。jQuery Mobile针对Slider类型的input元素，优化了其显示效果风格，提供一个文本输入框和一个可拖拉滑动条，用户可以通过拖拉滑动条更新文本框数值。
<input type="range" name="points" id="points" value="50" min="0" max="100">
- 如果想在滑动按钮上显示进度（类似一个小弹窗）可以使用 data-popup-enabled="true" 属性：
<input type="range" data-popup-enabled="true">
- 如果想要高亮突出显示滑动条的值，可添加 data-highlight="true"：
<input type="range" data-highlight="true">
【翻转切换开关】<select>标签中设置data-role属性值为slider，可以将下拉列表元素中的两个<option>选项转变为一个翻转切换开关，其中第一个<option>选项为"开"，取值true或1。
使用 <input type="checkbox"> 元素并指定 data-role 为 "flipswitch" 来创建开关: – 默认情况下，开关切换的文本为 "On" 和 "Off"。你可以使用 data-on-text 和 data-off-text 属性来修改它：
<input type="checkbox" data-role="flipswitch" name="switch" id="switch" data-on-text="True" data-off-text="False">翻转开关
<select id="slider" data-role="slider"> <option value="1">开</option> <option value="0">关</option> </select>切换开关
<input type="checkbox" data-role="flipswitch" name="switch" id="switch" data-on-text="打开" data-off-text="关闭">
5，表单提交
通过AJAX提交表单：默认情况下所有的表单提交都是使用AJAX进行处理，意味着表单的返回结果被插入DOM中，并且触发页面的转换，把页面的当前视图转到表单的结果。
不使用AJAX提交表单：有时需要在提交一个表单时，重新加载整个页面，而不是发送一个AJAX请求并把结果插入到DOM中。只需要在form元素添加data-ajax="false"属性。
- 手工填写所有表单数据
data:{ 'p1':$('#p1'), 'p2':$('#p2') }
- $(‘#myform’).serialize( );
$('#myform').ajaxSubmit({ type: 'GET/POST', url: 'xx.php', dataType: 'json', success: fn, clearForm: true, resetForm: true }); //此函数会自动把选定的表单进行序列化并异步提交 jquerymobile 下面 form 表单提交 和普通html没区别，最主要是 <form 要加一个 data-ajax='false' 否则 上传会失败 <form action="../servlet/phonegapUp" method="post" enctype="multipart/form-data" data-ajax="false">
6，jQuery Mobile事件
jQuery Mobile 事件：在jQuery Mobile你可以使用任何标准的 jQuery 事件 。除此之外, jQuery Mobile 也提供了针对移动端浏览器的事件：
- 触摸事件 - 当用户触摸屏幕时触发。
- 滑动事件 - 当用户上下滑动时触发。
- 定位事件 - 当设备水平或垂直翻转时触发。
- 页面事件 - 当页面显示，隐藏，创建，加载或未加载时触发。
6.1，设置jQuery Mobile
jQuery Mobile不仅可以采用HTML5标准的data属性来驱动元素生成各种界面组件，还在JavaScript可编程方面提供更多的可配置、可定制的参数和方法。jQuery Mobile 会有一些默认的设置，如之前介绍过的 Ajax 导航形式，可以选择在默认配置中关闭，这样整个网站都会关闭 jQuery Mobile Ajax 导航。
jQuery Mobile 把所有这些配置都封装在 $.mobile 中，作为它的属性，因此改变这些属性值就可以改变 jQuery Mobile 的默认配置。当 jQuery Mobile 开始执行时，它会在 document 对象上触发 mobileinit 事件，并且这个事件远早于 document.ready 发生，因此开发者需要通过如下的形式重写默认配置：
$(document).bind("mobileinit", function(){ // 新的配置 });由于 mobileinit 事件会在 jQuery Mobile 执行后马上触发，因此开发者需要在 jQuery Mobile 加载前引入这个新的默认配置，若这些新配置保存在一个名为 custom-mobile.js 的文件中，你按如下顺序引入 jQuery Mobile 的各个文件：
<script src="jquery.min.js"></script> <script src="custom-mobile.js"></script> <script src="jquery-mobile.min.js"></script>
jQuery Mobile 是以 Ajax 的方式驱动网站，若某个链接不需要 Ajax ，可以为某个链接添加 data-ajax=”false” 属性，这是局部的设置，如果开发者需要取消默认的 Ajax 方式（即全局取消 Ajax），可以自定义默认配置：
$(document).bind("mobileinit", function(){ $.mobile.ajaxEnabled = false; });除了通过$.mobile.foo的点语法对某个属性值进行初始化以外，由于jQuery Mobile 是基于 jQuery 的，还可以使用jQuery自带的方法$.extend通过继承方式对属性值进行初始化。
$(document).bind("mobileinit", function(){ $.extend($.mobile, { ajaxEnabled: false }); });
6.2，相关配置项
NS 字符串 默认：""：该属性可以改变 jQurey Mobile 的命名空间，jQuery Mobile 按 data-NS 属性值安排命名空间，默认为空，则直接 data-role ，举个简单的例子，若设置 NS 的值为 "custom" ，则此时需要定义一个 jQuery Mobile 头部的话需要从原来的 data-role="header" 改为 data-custom-role="header" ，其他 data-role 也要改成为 data-custom-role 。这样开发者可以创建属于自己的命名空间，避免与 jQuery Mobile 原有的属性发生冲突， 便于制作自定义主题。
需要注意的是，当你使用了 data-命名空间后，你需要更新 jQuery Mobile css 文件的选择器，格式如下：
.ui-mobile [data-custom-role=page], .ui-mobile [data-custom-role=dialog] ......utoInitializePage 布尔型 默认值：true：当 DOM 加载完毕后，jQuery Mobile 会自动调用 $.mobile.initializePage 方法。如果设置该属性为 false ，则页面不进行初始化，即页面空白。
activePageClass 字符串 默认值："ui-page-active"：为当前页面分配 class 值。
activeBtnClass 字符串 默认值："ui-btn-active"：为激活状态的按钮分配 class 值。
ajaxEnabled 布尔型 默认值：true：该选项参数的作用是设置当单击链接或提交表单或按钮时，是否使用Ajax方式加载页面或提交数据。默认情况下，jQuery Mobile采用Ajax方式处理请求。当选项参数为false时，jQuery Mobile会忽略这些链接或表单提交的Ajax请求，而采用传统的HTTP方式请求跳转或提交方式。控制是否禁止默认的 Ajax 链接点击和表单提交，并停止 hash 的监听，然后以常规的 HTTP 方式进行。
buttonMarkup.hoverDelay 整型 默认值：200：设置触摸某一个 jQuery Mobile 按钮后添加 hover 和 down 的 class 的延时。该数值越小，延时越小，触摸越灵敏，但同时很有可能错误的触发页面滚动条滚动。因此建议数值不要太小。解决按钮按下/划过的状态感觉反应有些迟钝：$.mobile.buttonMarkup.hoverDelay = "false";
defaultDialogTransition 字符串 默认值："pop"：设置使用 Ajax 方式的对话框的默认过场动画。
defaultPageTransition 字符串 默认值：fade：设置使用 Ajax 方式跳转的页面的默认过场动画。
gradeA 布尔型 默认值："true"：设置 $.support.mediaquery 的返回值，默认为符合全部 grade A 等级的移动设备的支持条件才会返回 true 。jQueryMobile 等级设置，http://www.jquerymobile.com/gbs
hashListeningEnabled 布尔型 默认值：true：设置是否监听和处理 location.hash 的改变。
loadingMessageTextVisible 布尔值 默认值：false：设置当页面加载中的时候是否显示提示文字。
loadingMessage 字符串 默认值："loading"：设置当页面显示加载提示时，加载提示文字的内容。
loadingMessageTheme 字符串 默认值："A"：设置当页面显示加载提示时，加载提示的默认主题。
minScrollBack 整型 默认值：250：设置页面最小滚动距离。
pageLoadErrorMessage 字符串 默认值："Error Loading Page"：设置当 Ajax 加载页面错误时显示的提示信息。
pageLoadErrorMessageTheme 字符串 默认值："e" ：设置当 Ajax 加载页面错误时错误提示框的主题样式。
pushStateEnabled 布尔型 默认值：true：在支持的浏览器中开启 history.replaceState 这个增强特性，把哈希值（hash-based）的 Ajax 请求转化为完整的文档路径。jQuery Mobile 建议在关闭 Ajax 导航和大量使用外部链接的情况下关闭这个特性。Hash和Ajax页面驱动模型： 通过Ajax形式来跳转页面时，会触发hashchange 事件，jquerymobile在处理这个事件时会修改location.href的值。 jquerymobile利用 history.replaceState函数将基于hash的长的url转换为更加简洁的完整的文档地址。如果浏览器不支持history.replaceState，或者禁用了这一特性，地址栏就会显示基于hash的url（就是带#的url）。
subPageUrlKey 字符串 默认值："ui-page"：URL 参数用来指向由组件生成的子页面(如嵌套列表页)，该 URL 会被解释成如 example.html&ui-page=subpageIdentifier 的形式，而在 &ui-page= 之前的哈希值会被 jQuery Mobile 向此 URL 地址做 Ajax 请求。
touchOverflowEnabled 布尔型 默认值：false：设置是否使用设备的原生区域滚动特性，除了 iOS5 之外大部分的设备到目前还不支持原生的区域滚动特性，因此在 jQuery Mobile 1.1.0 中不建议修改该属性。
6.3，使用jQuery Mobile事件
Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解：
- .bind()是直接绑定在元素上，新添加的元素没有被绑定事件；.bind()方法将事件类型和一个事件处理函数直接注册到了被选中的DOM元素中，它不仅在所有匹配的元素中隐含地迭代附加事件处理函数，而且这些操作非常多余，因为这些相同的事件处理函数是被一遍一遍的重复的添加到所有匹配的标签上。
- .live()则是通过冒泡的方式来绑定到元素上的。更适合列表类型的，绑定到document DOM节点上。和.bind()的优势是支持动态数据。.live()方法将与事件处理函数关联的选择器和事件信息一起附加到文档的根级元素（即document）。通过将事件信息注册到document上，这个事件处理函数将允许所有冒泡到document的事件调用它（例如委托型、传播型事件）。一旦有一个事件冒泡到document元素上，Jquery会根据选择器或者事件的元数据来决定哪一个事件处理函数应该被调用，如果这个事件处理函数存在的话。支持动态。
- .delegate()则是更精确的小范围使用事件代理，性能优于.live()；.delegate()方法与live()方式实现方式相类似，它不是将选择器或者事件信息附加到document，而是让你指定附加的元素。
- .on()则是最新的1.9版本整合了之前的三种方式的新事件绑定机制。
// Bind $( "#members li a" ).on( "click", function( e ) {} ); $( "#members li a" ).bind( "click", function( e ) {} ); // Live $( document ).on( "click", "#members li a", function( e ) {} ); $( "#members li a" ).live( "click", function( e ) {} ); // Delegate $( "#members" ).on( "click", "li a", function( e ) {} ); $( "#members" ).delegate( "li a", "click", function( e ) {} ); 如何使用.on()方法决定了它如何调用其他方法
6.4，页面事件
在jQuery Mobile中触发所有页面事件：$("document").on("pageshow",function(event){...})
触发指定页面事件： $("document").on("pageshow","page",function(event,data){...})
【过渡事件】
- 页面过渡涉及两个页面：一张"来"的页面和一张"去"的页面 - 这些过渡使当前活动页面（"来的"页面）到新页面（"去的"页面的改变过程变得更加动感。
- 在jQuery Mobile中，当不同页面间或同一个页面不同容器间相互切换时，将触发页面中的显示或隐藏事件。
- 在jQuery Mobile里，无论一个page在什么时候处于显示或者隐藏状态，这两个事件都会在这个page触发.事件的触发依赖于该page是否正在显示或者隐藏，所以，当一个page过渡发生，会有4个事件被触发:每个page触发两个。
pagebeforeshow 页面显示前事件，当页面显示之前，实际切换正在进行时触发 pagebeforehide 页面隐藏前事件，当页面隐藏之前，实际切换正在进行时触发 pageshow 页面显示完成事件，当页面切换完成时触发 pagehide 页面隐藏完成事件，当页面隐藏完成时触发 <script> $('div').bind('pagebeforehide', function(event, ui) { console.log('1. ' + ui.nextPage + ' 正在显示中... '); }); $('div').bind('pagebeforeshow', function(event, ui) { console.log('2. ' + ui.prevPage + ' 正在隐藏中... '); }); $('div').bind('pagehide', function(event, ui) { console.log('3. ' + ui.nextPage+ ' 显示完成！ '); }); $('div').bind('pageshow', function(event, ui) { console.log('4. ' + ui.prevPage + ' 隐藏完成！ '); }) </script>
【页面加载事件】页面加载事件属于外部页面，无论外部页面何时载入 DOM，将触发两个事件。第一个是 pagebeforeload，第二个是 pageload （成功）或 pageloadfailed（失败）。
<script> $(document).on("pagecontainerload", function(event, data) { alert("pagecontainerload 事件触发!\nURL: " + data.url); }); $(document).on("pagecontainerloadfailed", function(event, data) { alert("抱歉，被请求页面不存在。"); }); </script>
【页面初始化事件】当 jQuery Mobile 中的一张典型页面进行初始化时，它会经历三个阶段：
- 在页面创建前
- 页面创建
- 页面初始化
每个阶段触发的事件都可用于插入或操作代码。Jquery Mobile会自动基于page"内的增强的约定自动初始化一些插件。例如：给一个input输入框约定了type=range属性会自动生成一个自定义滑动条。这些自动初始化的行为是受"page"插件控制的，它在执行前后部署事件，允许你在初始化前后操作页面，或者甚至自己提供初始化行为，禁止自动初始化。注以下的页面初始化事件在每个“page”只被触发一次，与每次页面在显示或者隐藏的show/hide事件刚刚相反。
pagebeforecreate 当页面即将初始化，并且在 jQuery Mobile 开始增强页面之前，触发该事件。 pagecreate 当页面已创建，但增强完成之前，触发该事件。 pageinit 当页面已初始化，并且在 jQuery Mobile 已完成页面增强之后，触发该事件。 $(document).on("pagebeforecreate", function() { console.log("pagebeforecreate 事件触发 - 页面即将初始化。jQuery Mobile 还未增强页面"); }); $(document).on("pagecreate", function() { console.log("pagecreate 事件触发 - 页面已经创建，但还未增强完成"); }); $(document).on("pageinit", function() { console.log("pagecreate 事件触发 - 页面已经创建，已增强"); });
【触摸事件】
- tap(轻击)事件：用户完成一次快速完整的轻击页面屏幕时触发 tap事件和tapload事件必须在document.ready()函数或pageinit事件内进行绑定。
- taphold(轻击不放)事件：用户完成一次轻击页面屏幕且保持不放时（大约一秒）后触发。
$(document).on("pageinit", function() { $("#home").on('tap', '#image', function(event, ui) { var tapCaption = $(this).data("tap"); $("#caption").addClass("comment").html(tapCaption); }); $("#home").on('taphold', '#caption', function(event, ui) { var tapholdCaption = $(this).data("appTaphold"); $(this).html(tapholdCaption); }); });
【屏幕滑动事件】
- swipe (滑动)事件：用户在1秒内水平拖拽屏幕距离大于30px或垂直拖拽屏幕距离小于20px时触发。
- swipeleft(向左滑动)事件：用户向左侧滑动屏幕时触发该事件。
- swiperight(向右滑动)事件：用户向右侧滑动屏幕时触发该事件。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>通过滑动屏幕浏览图片</title> <meta name="viewport" content="width=device-width,initial-scale=1"> <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> <style> * { margin: 0px; padding: 0px; } .ifrswipt { position: relative; height: 470px; margin: 0 auto; } .ifrswipt ul { position: absolute; width: 3000px; overflow: hidden; top: 0px; left: 0px; } .ifrswipt li { list-style-type: none; display: inline-block; float: left; position: relative; margin: 0px 8px 0px 7px; } .imgswipt{ cursor: pointer; border: solid 5px #FFF; } </style> </head> <body> <div id="page1" data-role="page" data-theme="b"> <div data-role="header" data-position="fixed"> <h1>平面设计作品欣赏</h1> </div> <div data-role="content"> <div class="ifrswipt"> <ul id="ifrswipt"> <li><img src="images/182401.jpg" alt="" class="imgswipt"></li> <li><img src="images/182402.jpg" alt="" class="imgswipt"></li> <li><img src="images/182403.jpg" alt="" class="imgswipt"></li> <li><img src="images/182404.jpg" alt="" class="imgswipt"></li> <li><img src="images/182405.jpg" alt="" class="imgswipt"></li> <li><img src="images/182406.jpg" alt="" class="imgswipt"></li> </ul> </div> </div> <div data-role="footer" data-position="fixed"> <h4>CopyRight © 2017 设计工作室</h4> </div> </div> <script type="text/javascript"> // 全局命名空间 var swiptimg = { $index: 0, $width: 352, $swipt: 0, $legth: 6 } var $imgul = $("#ifrswipt"); $(".imgswipt").each(function() { $(this).swipeleft(function() { if (swiptimg.$index < swiptimg.$legth) { swiptimg.$swipt = -swiptimg.$index * swiptimg.$width; swiptimg.$index++; $imgul.animate({ left: swiptimg.$swipt }, "slow"); } }).swiperight(function() { if (swiptimg.$index > 0) { swiptimg.$index--; swiptimg.$swipt = -swiptimg.$index * swiptimg.$width; $imgul.animate({ left: swiptimg.$swipt }, "slow"); } }) }) </script> </body> </html> 【屏幕滚动事件】
- scrollstart：开始滚动时触发该事件。需要注意的是，目前在iOS设备上该事件并不稳定，原因是当iOS设备在滚动时会禁止DOM操作，并将DOM操作放入队列中，待滚动结束后才执行这些操作。
- scrollend：当滚动结束时触发该事件。
<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <meta name="viewport" content="width=device-width,initial-scale=1" /> <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> <style> body { background-image: url(images/2.jpg); } h2 { height: 600px; color: blue; font-size: 30px; text-align: center; -webkit-text-shadow: 4px 4px 4px #938484; text-shadow: 4px 4px 4px #938484; } </style> </head> <body> <div data-role="page" id="page"> <script> $('div[data-role="page"]').on('pageinit', function(event, ui) { var div = $('div[data-role="content"]'); var h2 = $('h2'); $(window).on('scrollstart', function() { h2.text("开始滚动屏幕").css("color", "red"); div.css('background-image', 'url(images/3.jpg)'); }) $(window).on('scrollstop', function() { h2.text("停止滚动屏幕").css("color", "blue"); div.css('background-image', 'url(images/4.jpg)'); }) }) </script> <div data-role="header"> <h1>标题</h1> </div> <div data-role="content"> <h2>内容</h2> </div> <div data-role="footer" class="ui-footer-fixed"> <h4>脚注</h4> </div> </div> </body> </html>
【翻转事件】orientationchange事件函数当移动设备的方向发生变化时触发。在事件的回调函数内的第二个参数返回一个用于识别当前方向的参数。该参数只会返回两种值：portrait（纵向）和landscape（横向）。
并不是所有的浏览器都支持orientationchange事件，在项目开发过程中，如无实际必要，一般不需要定义该事件函数。如需使用方向改变（orientationchange）事件，附加它到 window 对象。回调函数可有一个参数，event 对象，返回移动设备的方向："纵向"（设备保持在垂直位置）或"横向"（设备保持在水平位置）。由于方向改变（orientationchange）事件绑定到 window 对象，可以使用 window.orientation 属性来设置不同的样式，以便区分纵向和横向的视图。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>判断移动设备手持方向</title> <meta name="viewport" content="width=device-width,initial-scale=1"> <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> <script type="text/javascript"> $(document).on("pageinit",function(event){ $(window).on("orientationchange",function(event){ if(event.orientation=="landscape") { //判断当前屏幕方向是否是水平方向 $("#msg").text("现在是水平模式！"); //为元素赋予文本内容 $("#page1").css("background-color","#004485"); //改变元素背景颜色 $("#page1").css("color","#CCFFFF"); //改变元素文本颜色 } if(event.orientation=="portrait") { //判断当前屏幕方向是否是垂直方向 $("#msg").text("现在是垂直模式！"); //为元素赋予文本内容 $("#page1").css("background-color","#F4F4F4"); //改变元素背景颜色 $("#page1").css("color","#333"); //改变元素文本颜色 } }); }) </script> <style> * { margin: 0px; padding: 0px; } #page1 { background-color: #F4F4F4; color: #333; text-shadow: none; } .bar01 { background-color: #fff !important; font-size: 0.8em !important; } #btn { position: absolute; width: 2em; height: 1.25em; left: 1em; top: 2em; } .ui-content { margin: 0px; padding: 0px; } #banner { width: 100%; height: auto; overflow: hidden; } #banner img { width: 100%; height: auto; } #main { padding: 1em; height: auto; overflow: hidden; font-family: 微软雅黑; font-size: 1em; } #main h3 { font-size: 1.2em; } #main p { text-indent: 2em; padding: 1em 0 1em 0; } #msg { display: block; text-align: center; background-color: rgba(0,0,0,0.4); font-size: 1em; color: #FFF; line-height: 1.5em; margin: 1em 0; } </style> </head> <body> <div id="page1" data-role="page"> <div data-role="header" class="bar01"> <div id="btn"><img src="images/182502.png" alt=""></div> <h1><img src="images/182501.png" alt=""></h1> </div> <div data-role="content"> <div id="msg"></div> <div id="banner"><img src="images/182503.jpg" alt=""></div> <div id="main"> <h3>关于我们</h3> <p>我们是专业从事互联网相关业务开发的设计工作室。专门提供全方位的优质服务和最专业的网站建设方案为企业打造全新电子商务平台。本工作室成立于1999年，已经成为国内著名的网站建设提供商。八年的风雨历程已成功的为中国教育部、中国文化部、国有资监督管理委员会......</p> <h3>我们的团队</h3> <p>成员都具有多年的实际设计工作经验，更好的满足客户的国际化需求。设计师由正规美院毕业，创意的思维模式，高超的设计技能，为您提供最适合您的设计方案。</p> <h3>我们的承诺</h3> <p>本工作室设计与制作的网站均属原创、不套用网上的任何模板，根据每个公司的行点，设计出属于客户.....</p> <p><em>更多>></em></p> </div> </div> <div data-role="footer" class="bar01"><h4>CopyRight © 2017 设计工作室</h4></div> </div> </body> </html>
2248
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
