jqueryMobile

1、引用
<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>

data-role="page" 是显示在浏览器中的页面
data-role="header" 创建页面上方的工具栏（常用于标题和搜索按钮）
data-role="content" 定义页面的内容，比如文本、图像、表单和按钮，等等
data-role="footer" 创建页面底部的工具栏；

2.包含大量内容的 web 应用程序会影响加载时间（比如文本、链接、图像和脚本等等）。如

果您不希望在内部链接页面，请使用外部文件；
<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>

<a href="externalfile.html">转到外部页面</a>

3.页面跳转
jQuery Mobile 拥有一系列关于如何从一页过渡到下一页的效果。
注释：如需实现过渡效果，浏览器必须支持 CSS3 3D 转换；

过渡描述
fade 默认。淡入淡出到下一页。
flip 从后向前翻动到下一页。
flow 抛出当前页面，引入下一页。
pop 像弹出窗口那样转到下一页。
slide 从右向左滑动到下一页。
slidefade 从右向左滑动并淡入到下一页。
slideup 从下到上滑动到下一页。
slidedown 从上到下滑动到下一页。
turn 转向下一页。
none 无过渡效果。
如果您希望页面从左向右滑动，而不是从右向左，请使用值为 "reverse" 的 data-direction

属性。在后退按钮上是默认的。

4.按钮
<button>按钮</button><br />
<input type="button" value="按钮"><br />
<a href="#" data-role="button">按钮</a><br />
jQuery Mobile 中的按钮会自动获得样式，这增强了他们在移动设备上的交互性和可用性。我

们推荐您使用 data-role="button" 的 <a> 元素来创建页面之间的链接，而 <input> 或

<button> 元素用于表单提交；
注意：链接外部html页面时要加上rel="external"；
使用jquery mobile创建dialog时出现加载错误，“Error Loading Page”，出现这个问题的

原因是因为jquery mobile不支持file://，也就是本地文件，所以要将其放到服务器上来运行

。
默认情况下，按钮会占据屏幕的全部宽度。如果您需要按钮适应其内容，或者如果您需要两个

或多个按钮并排显示，请添加 data-inline="true"：
jQuery Mobile 提供了对按钮进行组合的简单方法。

请将 data-role="controlgroup" 属性与 data-type="horizontal|vertical" 一同使用，以

规定水平或垂直地组合按钮：
<div data-role="content">
<div data-role="controlgroup" data-type="horizontal">
<p>水平分组：</p>
<a href="#" data-role="button">按钮 1</a>
<a href="#" data-role="button">按钮 2</a>
<a href="#" data-role="button">按钮 3</a>
</div><br>

<div data-role="controlgroup" data-type="vertical">
<p>垂直分组（默认）：</p>
<a href="#" data-role="button">按钮 1</a>
<a href="#" data-role="button">按钮 2</a>
<a href="#" data-role="button">按钮 3</a>
</div>
默认情况下，组合按钮是垂直分组的，彼此间没有外边距和空白。并且只有第一个和最后一个

按钮拥有圆角，在组合后就创造出了漂亮的外观。

data-corners true | false 规定按钮是否有圆角。
data-mini true | false 规定是否是小型按钮。
data-shadow true | false 规定按钮是否有阴影。
5.图标
jQuery Mobile 提供的一套图标可令您的按钮更具吸引力。
data-icon="search"
。。。。
您也能够规定图标被放置的位置：上、右、下或左。
请使用 data-iconpos 属性来规定位置；
如果只需显示图标，请将 data-iconpos 设置为 "notext"（不显示文字）；

6.页眉页脚：
如需向页眉标题的右侧添加按钮，请规定类名 "ui-btn-right"：class="ui-btn-right"；
页眉可包含一个或两个按钮，然而页脚没有限制。
与页眉相比，页脚更具伸缩性 - 它们更实用且多变，所以能够包含所需数量的按钮；
页脚与页眉的样式不同（它会减去一些内边距和空白，并且按钮不会居中）。如果要修正该问

题，请在页脚设置类名 "ui-btn"：
Inline - 默认。页眉和页脚与页面内容位于行内。
Fixed - 页面和页脚会留在页面顶部和底部。
Fullscreen - 与 fixed 类似;页面和页脚会留在页面顶部和底部，but also over the page

content. It is also slightly see-through；
如果需要启用全面定位，请使用 data-position="fixed"，并向该元素添加 data-fullscreen

属性；
fullscreen 对于照片、图像和视频非常理想。
提示：对于 fixed 和 fullscreen 定位，触摸屏幕将隐藏和显示页眉及页脚。

7.导航：
导航栏由一组水平排列的链接构成，通常位于页眉或页脚内部。
默认地，导航栏中的链接会自动转换为按钮（无需 data-role="button"）。
请使用 data-role="navbar" 属性来定义导航栏：
提示：按钮的宽度，默认地，与其内容一致。使用无序列表来均等地划分按钮：一个按钮占据

100% 的宽度，两个按钮各分享 50% 的宽度，三个按钮 33.3%，以此类推。不过，如果您在导

航栏中规定了五个以上的按钮，那么它会弯折为多行（参加页面底部的“更多实例”）。

当导航栏中的链接被敲击时，会获得选取外观（按下）。
如需在不敲击链接时实现此外观，请使用 class="ui-btn-active"；

对于多个页面，您也许需要为每个按钮设置“被选”外观，以表示用户正在浏览该页面。如果

要这么做，请向链接添加 "ui-state-persist" 类，以及 "ui-btn-active" 类；

8.可折叠的内容块；
可折叠（Collapsibles）允许您隐藏或显示内容 - 对于存储部分信息很有用。
如需创建可折叠的内容块，请向某个容器分配 data-role="collapsible" 属性。在容器（div

）中，添加一个标题元素（h1-h6），其后是您需要扩展的任意 HTML 标记：
默认地，该内容是关闭的。如需在页面加载时扩展内容，请使用 data-collapsed="false"：
可以嵌套可折叠内容块；
可折叠集合（Collapsible sets）指的是被组合在一起的可折叠块（常被称为手风琴）。当新

块被打开时，所有其他块会关闭。
创建若干内容块，然后通过 data-role="collapsible-set" 用新容器包装这个可折叠块：

9.jQuery Mobile 布局网格
jQuery Mobile 提供了一套基于 CSS 的列布局方案。不过，一般不推荐在移动设备上使用列

布局，这是由于移动设备的屏幕宽度所限。
但是有时您需要定位更小的元素，比如按钮或导航栏，就像在表格中那样并排。这时，列布局

就恰如其分。
网格中的列是等宽的（总宽是 100%），无边框、背景、外边距或内边距。
提示：在列容器中，根据不同的列数，子元素可设置类 ui-block-a|b|c|d|e。这些列将依次

并排浮动。
对于 ui-grid-a 类（两列布局），您必须规定两个子元素 ui-block-a 和 ui-block-b。
对于 ui-grid-b 类（三列布局），请添加三个子元素 ui-block-a、ui-block-b 和 ui-

block-c。
您可以通过使用 CSS 来定制列块：
实例
<style>
.ui-block-a,
.ui-block-b,
.ui-block-c
{
background-color: lightgray;
border: 1px solid black;
height: 100px;
font-weight: bold;
text-align: center;
padding: 30px;
}
</style>

10.jQuery Mobile 列表视图：

jQuery Mobile 中的列表视图是标准的 HTML 列表：有序列表 (<ol>) 和无序列表 (<ul>)。
如需创建列表，请向 <ol> 或 <ul> 元素添加 data-role="listview"。如需使这些项目可点

击，请在每个列表项（<li>）中规定链接：
如需为列表添加圆角和外边距，请使用 data-inset="true" 属性：
提示：默认地，列表中的列表项会自动转换为按钮（无需 data-role="button"）。
列表分隔符（List Dividers）用于把项目组织和组合为分类/节。
如需规定列表分隔符，请向 <li> 元素添加 data-role="list-divider" 属性：
提示：data-autodividers="true" 属性通过对列表项文本的首字母进行大写来创建分隔符。
如需在列表中添加搜索框，请使用 data-filter="true" 属性：
默认地，搜索框中的文本是 "Filter items..."。
如需修改默认文本，请使用 data-filter-placeholder 属性：

11.jQuery Mobile 列表缩略图
对于大于 16x16px 的图像，请在链接中添加 <img> 元素。
jQuery Mobile 将自动把图像调整至 80x80px：
如需向您的列表添加 16x16px 的图标，请向 <img> 元素添加 class="ui-li-icon" 属性：

如需创建带有垂直分隔栏的拆分列表，请在 <li> 元素内放置两个链接。
jQuery Mobile 会自动为第二个链接添加蓝色箭头图标的样式，链接中的文本（如有）将在用

户划过该图标时显示：

12.jQuery Mobile 表单结构
jQuery Mobile 使用 CSS 来设置 HTML 表单元素的样式，以使其更有吸引力更易用。
在 jQuery Mobile 中，您可以使用以下表单控件：
文本框
搜索框
单选框
复选框
选择菜单
滑动条
翻转切换开关
当您与 jQuery Mobile 表单打交道时，应该了解以下信息：
<form> 元素必须设置 method 和 action 属性
每个表单元素必须设置唯一的 "id" 属性。该 id 在站点的页面中必须是唯一的。这是因为

jQuery Mobile 的单页面导航模型允许许多不同的“页面”同时呈现。
每个表单元素必须有一个标记（label）。请设置 label 的 for 属性来匹配元素的 id。

如果需要 label 和表单元素在宽屏幕上显示正常，请用带有 data-role="fieldcontain" 属

性的 <div> 或 <fieldset> 元素来包装 label 或表单元素：
提示：fieldcontain 属性基于页面宽度来设置 label 和表单控件的样式。当页面宽度大于

480px 时，它会自动将 label 与表单控件放置于同一行。当小于 480px 时，label 会被放置

于表单元素之上。
提示：如需避免 jQuery Mobile 自动为可点击元素设置样式，请使用 data-role="none" 属

性：
提示：jQuery Mobile 会自动通过 AJAX 进行表单提交，并会尝试将服务器响应整合入应用程

序的 DOM 中。

13.jQuery Mobile 文本输入
输入字段是通过标准的 HTML 元素编写的，jQuery Mobile 会为它们设置专门针对移动设备的

美观易用的样式。您还可以使用新的 HTML5 <input> 类型：
提示：请使用 placeholder 来规定简短的提示，以描述输入字段的预期值：

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

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

单选按钮
当用户只选择有限数量选项中的一个时，会用到单选按钮。
如需创建一套单选按钮，请添加 type="radio" 的 input 元素以及相应的 label。在

<fieldset> 元素中包装单选按钮。您也可以增加一个 <legend> 元素来定义 <fieldset> 的

标题。
提示：请用 data-role="controlgroup" 属性来组合这些按钮：
如需对单选框或复选框进行水平分组，请使用 data-type="horizontal" 属性
您也可以使用域容器来包装 <fieldset>：

14.jQuery Mobile 选择菜单
<select> 元素创建带有若干选项的下拉菜单。
<select> 元素中的 <option> 元素定义列表中的可用选项；
自定义选择菜单
本页上方的图片，展示了移动平台显示选择菜单的独特方式。
如果您希望在所有移动设备上显示一致外观的选择菜单，请使用 jQuery 的自定义选择菜单，

data-native-menu="false" 属性：

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

15.jQuery Mobile 滑块控件
滑块允许您从一定范围内的数字中选取值：
如需创建滑块，请使用 <input type="range">：
使用下列属性来规定限定：
max - 规定允许的最大值
min - 规定允许的最小值
step - 规定合法的数字间隔
value - 规定默认值
提示：如果您希望突出显示截止滑块值的这段轨道，请添加 data-highlight="true"；

16.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" 主题（亮灰）。

不过，您能够自如地对主题进行混合。

添加新主题
jQuery Mobile 同时允许您向移动页面添加新主题。
请通过编辑 CSS 文件（如已下载 jQuery Mobile）来添加或编辑新主题。只需拷贝一段样式

，并用字母名（f-z）来对类进行重命名，然后调整为您喜欢的颜色和字体即可。
您也可以通过在 HTML 文档中使用主题类来添加新样式 - 为工具条添加类 ui-bar-(a-z)，并

为内容添加类 ui-body-(a-z)：

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

$(document).on("pageinit","#pageone",function(){

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

});
注释：jQuery on() 方法用于添加事件处理程序。
Touch 事件在用户触摸屏幕（页面）时触发。
tap 事件在用户敲击某个元素时触发。
taphold 事件在用户敲击某个元素并保持一秒时被触发：
swipe 事件在用户在某个元素上水平滑动超过 30px 时被触发：
swipeleft 事件在用户在某个元素上从左滑动超过 30px 时被触发：
swiperight 事件在用户在某个元素上从右滑动超过 30px 时被触发：
scrollstart 事件在用户开始滚动页面时被触发：
scrollstop 事件在用户停止滚动页面时被触发：

orientationchange 事件在用户垂直或水平旋转移动设备时被触发。
如需使用 orientationchange 事件，请把它添加到 window 对象：
$(window).on("orientationchange",function(){
alert("方向已改变！");
});
callback 函数可以设置一个参数，即 event 对象，它会返回移动设备的方向："portrait"

（设备被握持的方向是垂直的）或 "landscape" （设备被握持的方向是水平的）：
实例
$(window).on("orientationchange",function(event){
alert("方向是：" + event.orientation);
});
由于 orientationchange 事件与 window 对象绑定，我们能够使用 window.orientation 属

性来，例如，设置不同样式以区分 portrait 和 landscape 视图：

18.jQuery Mobile 页面事件
在 jQuery Mobile 中与页面打交道的事件被分为四类：
Page Initialization - 在页面创建前，当页面创建时，以及在页面初始化之后
Page Load/Unload - 当外部页面加载时、卸载时或遭遇失败时
Page Transition - 在页面过渡之前和之后
Page Change - 当页面被更改，或遭遇失败时；

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

，触发该事件。
pagecreate 当页面已创建，但增强完成之前，触发该事件。
pageinit 当页面已初始化，并且在 jQuery Mobile 已完成页面增强之后，触发该事

件。

页面加载事件属于外部页面。
无论外部页面何时载入 DOM，将触发两个事件。第一个是 pagebeforeload，第二个是

pageload （成功）或 pageloadfailed（失败）。
下表中解释了这些事件：
事件描述
pagebeforeload 在任何页面加载请求作出之前触发。
pageload 在页面已成功加载并插入 DOM 后触发。
pageloadfailed 如果页面加载请求失败，则触发该事件。默认地，将显示 "Error Loading

Page" 消息。

我们还可以在从一页过渡到下一页时使用事件。
页面过渡涉及两个页面：一张“来”的页面和一张“去”的页面 - 这些过渡使当前活动页面

（“来的”页面）到新页面（“去的”页面的改变过程变得更加动感。
事件描述
pagebeforeshow 在“去的”页面触发，在过渡动画开始前。
pageshow 在“去的”页面触发，在过渡动画完成后。
pagebeforehide 在“来的”页面触发，在过渡动画开始前。
pagehide 在“来的”页面触发，在过渡动画完成后。

jqueryMobile相关推荐

php移动端网页上传图片,[PHP]移动端网页如何使用JqueryMobile+PHP实现上传图片的功能 | 学步园...
保存被上传的文件上面的例子在服务器的 PHP 临时文件夹创建了一个被上传文件的临时副本. 这个临时的复制文件会在脚本结束时消失.要保存被上传的文件,我们需要把它拷贝到另外的位置: if ((($_F ...
JqueryMobile Demo
http://demos.jquerymobile.com/1.4.5/
{HTML5}JQueryMobile页面跳转参数的传递解决方案
在JQueryMobile开发手机端应用使用可能需要考虑相关的页面跳转带来的参数问题.因为JQueryMobile其实也是HTML5实践的结果.HTML5中有localStorage和sessionS ...
JqueryMobile链接一个页面，而链接页面中图片需刷新才显示的问题
当在first.html中,有个链接如:<a href="second.html" data-role="button" id="submit& ...
jquerymobile从index.html跳转到另外一个xxxx.html文件,js不执行的解决
遇到这样一个问题,index.html文件跳转到xxxx.html文件的时候,xxxx.html文件中js无法执行. 后来才知道,在jquerymobile中,跳转到另外一个页面的时候,只加载第一个p ...
jQueryMobile引入文件后样式无法正常显示
jQueryMobile引入文件后样式无法正常显示解决方法: jQuery文件必须放在jQueryMobile文件之前 eg: 转载于:https://www.cnblogs.com/yingww/p ...
jq调用android方法,Android端JQueryMobile使用教程(一)
标签(空格分隔): Android JQueryMobile 工程构建新建一个Android工程在工程中创建目录assets/www 从官网(http://jquerymobile.com/)上下 ...
Jquerymobile 简单安装
需要导入三个文件jquery,jquerymobile,css(jquerymobile地址:http://jquerymobile.com/) <script src="js/jqu ...
小强的HTML5移动开发之路（43）——JqueryMobile页眉、工具栏和标签栏导航
一.页眉 1.添加页眉和页脚 <div data-role="header"><h1>第 1 页</h1></div> <di ...
android 运行jquery,Android端JQueryMobile使用教程(一)
一. 通过Javascript访问Android的Java代码 1. 其实WebApp这个版块已经放置一段时间了,但是一直没有写文章,那是因为我还在学习中. iscrollview下载地址:https ...

jqueryMobile

jqueryMobile相关推荐

最新文章

热门文章