jQuerymobile学习笔记 本文关键词：学习笔记，jQuerymobile
jQuerymobile学习笔记 本文简介：jQuerymobile学习笔记1、利用JQuerymobile技术必须引用以下文件2、data-position=“fixed“固定在页面中3、在页页如果要用自带的返回控件的话，需加此属性：data-backbtn=“true“如果page是以对话框打开的加此属性无效。4、自定义返回按扭需加此属性
jQuerymobile学习笔记 本文内容：
jQuery
mobile学习笔记
1、
利用JQuery
mobile技术必须引用以下文件
2、data-position=“fixed“固定在页面中
3、在页页如果要用自带的返回控件的话，需加此属性：data-backbtn=“true“如果page是以对话框打开的加此属性无效。
4、自定义返回按扭
需加此属性
data-rel=“back“返回
我是一个对话框
5、页面说明
·
data-role=“page“是显示在浏览器中的页面
·
data-role=“header“创建页面上方的工具栏（常用于标题和搜索按钮）
·
data-role=“content“定义页面的内容，比如文本、图像、表单和按钮，等等
·
data-role=“footer“创建页面底部的工具栏
6、对话框data-rel=“dialog“转到页面二
显示效果
Open
dialog（中间扩散打开）
Open
dialog2（往上打开）
Open
dialog2（翻页效果）
过渡
描述
测试
fade
默认。淡入淡出到下一页。
测试
flip
从后向前翻动到下一页。
测试
flow
抛出当前页面，引入下一页。
测试
pop
像弹出窗口那样转到下一页。
测试
slide
从右向左滑动到下一页。
测试
slidefade
从右向左滑动并淡入到下一页。
测试
slideup
从下到上滑动到下一页。
测试
slidedown
从上到下滑动到下一页。
测试
turn
转向下一页。
测试
none
无过渡效果。
测试
7、触摸事件(touch)
在
jQuery
Mobile
中有一些触摸事件是可定制的。然而，这些事件仅当与支持触摸
功能的设备进行交互的用户访问您的
jQuery
Mobile
网站时才可用。当这些事件可
用时，您可以触发任何自定义java
script
作为对五种不同的事件的响应tap、
taphold、swipe、swipeleft
和
swiperight。
tap(轻击)：一次快速完整的轻击后触发
taphold（轻击不放）：轻击并不放（大约一秒）后触发
swipe(滑动)：一秒内水平拖拽大于30PX，或者纵向拖曳小于20px
的事件发生时
触发的事件。多长时间拖拽多少px
可以设置的。这个事件有其相关联的属性，分
别为
1.
scrollSupressionThreshold
(默认:
10px)
–
水平方向拖拽大于这个值，将不
触发。
2.
durationThreshold
(默认:
1000ms)
–
滑动时间超过这个数值就不会产生滑
动事件。
3.
horizontalDistanceThreshold
(默认:
30px)
–
水平划动距离超过这个数值才
会产生滑动事件。
4.
verticalDistanceThreshold
(默认:
75px)
–
竖直划动距离小于这个数值才会
产生滑动事件。
swipeleft（左划）：划动事件为向左的方向时触发
swiperight（右划）：划动事件为向右的方向时触发
要绑定这些事件，只需要在
document.ready()中进行编程即可，如下代码示例：
Understanding
the
jQuery
Mobile
API
$(document).ready(function(){
$(“.tap-hold-test“).bind(“taphold“,function(event)
{
$(this).html(“Tapped
and
held“);
});
});
Header
Tap
and
hold
test
从上面的代码可以看到，将一个list
列表跟taphold
事件进行了绑定，当DOM
加载
完毕后，当触发taphold
事件后，就会显示Tapped
and
held
的提示信息。
8、按钮
转到页面二
行内按钮
默认情况下，按钮会占据屏幕的全部宽度。如果您需要按钮适应其内容，或者如果您需要两个或多个按钮并排显示，请添加
data-inline=“true“：
实例
转到页面二
组合按钮
jQuery
Mobile
提供了对按钮进行组合的简单方法。
请将
data-role=“controlgroup“属性与
data-type=“horizontal|vertical“一同使用，以规定水平或垂直地组合按钮：
实例
按钮
1
按钮
2
按钮
3
亲自试一试
提示：默认情况下，组合按钮是垂直分组的，彼此间没有外边距和空白。并且只有第一个和最后一个按钮拥有圆角，在组合后就创造出了漂亮的外观。
后退按钮
如需创建后退按钮，请使用
data-rel=“back“属性（会忽略锚的
href
值）：
实例
返回
更多用于按钮的
data-*
属性
属性
值
描述
实例
data-corners
true
|
false
规定按钮是否有圆角。
测试
data-mini
true
|
false
规定是否是小型按钮。
测试
data-shadow
true
|
false
规定按钮是否有阴影。
测试
为
jQuery
Mobile
按钮添加图标
如需向您的按钮添加图标，请使用
data-icon
属性：
搜索
提示：您也可以在
或
元素中使用
data-icon
属性。
下面我们列出了
jQuery
Mobile
提供的一些可用图标：
属性值
描述
图标
实例
data-icon=“arrow-l“左箭头
测试
data-icon=“arrow-r“右箭头
测试
data-icon=“delete“删除
测试
data-icon=“info“信息
测试
data-icon=“home“首页
测试
data-icon=“back“返回
测试
data-icon=“search“搜索
测试
data-icon=“grid“网格
测试
jQuery
Mobile
主题
jQuery
Mobile
提供了五种不同的样式主题，从
“a“到
“e“-
每种主题带有不同颜色的按钮、栏、内容块，等等。jQuery
Mobile
中的一种主题由多种可见的效果和颜色构成。
如需定制应用程序的外观，请使用
data-theme
属性，并为该属性分配一个字母：
值
描述
例子
a
默认。黑色背景上的白色文本。
测试
b
蓝色背景上的白色文本
/
灰色背景上的黑色文本
测试
c
亮灰色背景上的黑色文本
测试
d
白色背景上的黑色文本
测试
e
橙色背景上的黑色文本
测试
9、工具栏
标题栏
页眉通常会包含页眉标题/LOGO
或一到两个按钮（通常是首页、选项或搜索按钮）。
您可以在页眉中向左侧或/以及右侧添加按钮。
下面的代码，将向页眉标题文本的左侧添加一个按钮，并向右侧添加一个按钮：
实例
首页
欢迎来到我的主页
搜索
亲自试一试
下面的代码将向页眉标题的左侧添加一个按钮：
首页
欢迎来到我的主页
不过，如果您在
元素之后放置按钮链接，那么它不会显示在文本右侧。如需向页眉标题的右侧添加按钮，请规定类名
“ui-btn-right“：
实例
欢迎来到我的主页
搜索
页脚栏
与页眉相比，页脚更具伸缩性
-
它们更实用且多变，所以能够包含所需数量的按钮：
实例
转播到新浪微博
转播到腾讯微博
转播到
空间
亲自试一试
注释：页脚与页眉的样式不同（它会减去一些内边距和空白，并且按钮不会居中）。如果要修正该问题，请在页脚设置类名
“ui-btn“：
实例
亲自试一试
您也能够选择在页脚中水平还是垂直地组合按钮：
实例
转播到新浪微博
转播到腾讯微博
转播到
空间
亲自试一试
定位页眉和页脚
放置页眉和页脚的方式有三种：
·
Inline
-
默认。页眉和页脚与页面内容位于行内。
·
Fixed
-
页面和页脚会留在页面顶部和底部。
·
Fullscreen
-
与
fixed
类似;页面和页脚会留在页面顶部和底部，but
also
over
the
page
content.
It
is
also
slightly
see-through
请使用
data-position
属性来定位页眉和页脚：
Inline
定位（默认）
亲自试一试
Fixed
定位
亲自试一试
如果需要启用全面定位，请使用
data-position=“fixed“，并向该元素添加
data-fullscreen
属性：
Fullscreen
定位
10、jQuery
Mobile
导航栏
导航栏由一组水平排列的链接构成，通常位于页眉或页脚内部。
默认地，导航栏中的链接会自动转换为按钮（无需
data-role=“button“）。
请使用
data-role=“navbar“属性来定义导航栏：
实例
首页
页面二
搜索
亲自试一试
提示：按钮的宽度，默认地，与其内容一致。使用无序列表来均等地划分按钮：一个按钮占据
100%
的宽度，两个按钮各分享
50%
的宽度，三个按钮
33.3%，以此类推。不过，如果您在导航栏中规定了五个以上的按钮，那么它会弯折为多行（参加页面底部的“更多实例”）。
11、jQuery
Mobile
可折叠
·
jQuery
Mobile
导航栏
·
jQuery
Mobile
网格
可折叠的内容块
可折叠（Collapsibles）允许您隐藏或显示内容
-
对于存储部分信息很有用。
如需创建可折叠的内容块，请向某个容器分配
data-role=“collapsible“属性。在容器（div）中，添加一个标题元素（h1-h6），其后是您需要扩展的任意
HTML
标记：
实例
点击我
-
我可以折叠！
我是可折叠的内容。
亲自试一试
默认地，该内容是关闭的。如需在页面加载时扩展内容，请使用
data-collapsed=“false“：
实例
点击我
-
我可以折叠！
现在我默认是展开的。
亲自试一试
嵌套的可折叠块
可以嵌套可折叠内容块：
实例
点击我
-
我可以折叠！
我是被展开的内容。
点击我
-
我是嵌套的可折叠块！
我是嵌套的可折叠块中被展开的内容。
亲自试一试
提示：可折叠内容块可以被嵌套您希望的任意次数。
可折叠集合
可折叠集合（Collapsible
sets）指的是被组合在一起的可折叠块（常被称为手风琴）。当新块被打开时，所有其他块会关闭。
创建若干内容块，然后通过
data-role=“collapsible-set“用新容器包装这个可折叠块：
实例
点击我
-
我可以折叠！
我是被展开的内容。
点击我
-
我可以折叠！
我是被展开的内容。
12、jQuery
Mobile
网格
·
jQuery
Mobile
可折叠
·
jQuery
Mobile
列表视图
jQuery
Mobile
布局网格
jQuery
Mobile
提供了一套基于
CSS
的列布局方案。不过，一般不推荐在移动设备上使用列布局，这是由于移动设备的屏幕宽度所限。
但是有时您需要定位更小的元素，比如按钮或导航栏，就像在表格中那样并排。这时，列布局就恰如其分。
网格中的列是等宽的（总宽是
100%），无边框、背景、外边距或内边距。
可使用的布局网格有四种：
网格类
列
列宽度
对应
实例
ui-grid-a
2
50%
/
50%
ui-block-a|b
测试
ui-grid-b
3
33%
/
33%
/
33%
ui-block-a|b|c
测试
ui-grid-c
4
25%
/
25%
/
25%
/
25%
ui-block-a|b|c|d
测试
ui-grid-d
5
20%
/
20%
/
20%
/
20%
/
20%
ui-block-a|b|c|d|e
测试
提示：在列容器中，根据不同的列数，子元素可设置类
ui-block-a|b|c|d|e。这些列将依次并排浮动。
实例
1:
对于
ui-grid-a
类（两列布局），您必须规定两个子元素
ui-block-a
和
ui-block-b。
实例
2:
对于
ui-grid-b
类（三列布局），请添加三个子元素
ui-block-a、ui-block-b
和
ui-block-c。
定制网格
您可以通过使用
CSS
来定制列块：
实例
.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;
}
亲自试一试
您也可以通过使用行内样式来定制块：
Text
多行
在列中包含多个行也是可能的。
注释：ui-block-a-class
将始终创建新行：
实例
Some
Text
Some
Text
Some
Text
Some
Text
Some
Text
Some
Text
13、jQuery
Mobile
列表视图
jQuery
Mobile
中的列表视图是标准的
HTML
列表：有序列表
()
和无序列表
()。
如需创建列表，请向
或
元素添加
data-role=“listview“。如需使这些项目可点击，请在每个列表项（）中规定链接：
实例
列表项
列表项
亲自试一试
如需为列表添加圆角和外边距，请使用
data-inset=“true“属性：
实例
亲自试一试
提示：默认地，列表中的列表项会自动转换为按钮（无需
data-role=“button“）。
列表分隔符
列表分隔符（List
Dividers）用于把项目组织和组合为分类/节。
如需规定列表分隔符，请向
元素添加
data-role=“list-divider“属性：
实例
欧洲
法国
德国
亲自试一试
如果您的列表是字母顺序的（比如通讯录），jQuery
Mobile
自动添加恰当的分隔符，通过在
或
元素上设置
data-autodividers=“true“属性：
实例
Adam
Angela
Bill
Calvin
.
亲自试一试
提示：data-autodividers=“true“属性通过对列表项文本的首字母进行大写来创建分隔符。
搜索过滤器
如需在列表中添加搜索框，请使用
data-filter=“true“属性：
实例
亲自试一试
默认地，搜索框中的文本是
“Filter
items.“。
如需修改默认文本，请使用
data-filter-placeholder
属性：
实例
14、jQuery
Mobile
列表内容
jQuery
Mobile
列表缩略图
对于大于
16x16px
的图像，请在链接中添加
元素。
jQuery
Mobile
将自动把图像调整至
80x80px：
实例
亲自试一试
请使用标准
HTML
来填充带有信息的列表：
实例
Chrome
Chrome
免费的开源
web
浏览器。发布于
2008
年。
亲自试一试
jQuery
Mobile
列表图标
如需向您的列表添加
16x16px
的图标，请向
元素添加
class=“ui-li-icon“属性：
实例
USA
亲自试一试
拆分按钮
如需创建带有垂直分隔栏的拆分列表，请在
元素内放置两个链接。
jQuery
Mobile
会自动为第二个链接添加蓝色箭头图标的样式，链接中的文本（如有）将在用户划过该图标时显示：
实例
Some
Text
亲自试一试
通过添加页面和对话框，可使链接的功能更强：
实例
下载浏览器
亲自试一试
计数泡沫
计数泡沫用于显示与列表项相关的数目，例如邮箱中的消息：
如需添加计数泡沫，请使用行内元素，比如
，设置
class
“ui-li-count“属性并添加数字：
实例
Inbox335
Sent123
Trash7
亲自试一试
注释：如需在计数泡泡中显示正确的数字，就必须进行程序化更新。我们将在下一章种讲解。
15、jQuery
Mobile
表单结构
jQuery
Mobile
使用
CSS
来设置
HTML
表单元素的样式，以使其更有吸引力更易用。
在
jQuery
Mobile
中，您可以使用以下表单控件：
·
文本框
·
搜索框
·
单选框
·
复选框
·
选择菜单
·
滑动条
·
翻转切换开关
当您与
jQuery
Mobile
表单打交道时，应该了解以下信息：
·
元素必须设置
method
和
action
属性
·
每个表单元素必须设置唯一的
“id“属性。该
id
在站点的页面中必须是唯一的。这是因为
jQuery
Mobile
的单页面导航模型允许许多不同的“页面”同时呈现。
·
每个表单元素必须有一个标记（label）。请设置
label
的
for
属性来匹配元素的
id。
实例
First
name:
亲自试一试
如需隐藏
label，请使用类
ui-hidden-accessible。这很常用，当您需要元素的
placeholder
属性充当
label
时：
实例
姓名：
亲自试一试
域容器
如果需要
label
和表单元素在宽屏幕上显示正常，请用带有
data-role=“fieldcontain“属性的
或
元素来包装
label
或表单元素：
实例
First
name:
Last
name:
亲自试一试
提示：fieldcontain
属性基于页面宽度来设置
label
和表单控件的样式。当页面宽度大于
480px
时，它会自动将
label
与表单控件放置于同一行。当小于
480px
时，label
会被放置于表单元素之上。
提示：如需避免
jQuery
Mobile
自动为可点击元素设置样式，请使用
data-role=“none“属性：
实例
First
name:
16、jQuery
Mobile
表单输入元素
jQuery
Mobile
文本输入
输入字段是通过标准的
HTML
元素编写的，jQuery
Mobile
会为它们设置专门针对移动设备的美观易用的样式。您还可以使用新的
HTML5
类型：
实例
全名：
生日：
电邮：
亲自试一试
提示：请使用
placeholder
来规定简短的提示，以描述输入字段的预期值：
文本框
请使用
来实现多行文本输入。
注释：文本框会自动扩大，以适应您输入的文本行。
实例
Additional
Information:
亲自试一试
搜索框
输入类型
type=“search“是
HTML5
中的新类型，用于定义供输入搜索词的文本字段：
实例
Search:
亲自试一试
单选按钮
当用户只选择有限数量选项中的一个时，会用到单选按钮。
如需创建一套单选按钮，请添加
type=“radio“的
input
元素以及相应的
label。在
元素中包装单选按钮。您也可以增加一个
元素来定义
的标题。
提示：请用
data-role=“controlgroup“属性来组合这些按钮：
实例
Choose
your
gender:
Male
Female
亲自试一试
复选框
当用户选择有限数量选项中的一个或多个选项时，会用到复选框：
实例
Choose
as
many
favorite
colors
as
you
d
like:
Red
Green
Blue
亲自试一试
更多实例
如需对单选框或复选框进行水平分组，请使用
data-type=“horizontal“属性：
实例
亲自试一试
您也可以使用域容器来包装
：
实例
Choose
your
gender:
亲自试一试
如果您希望“预选”其中一个按钮，请使用
HTML
标签的
checked
属性：
实例
17、jQuery
Mobile
表单选择菜单
jQuery
Mobile
选择菜单
iPhone
上的选择菜单：
Android
设备上的选择菜单：
元素创建带有若干选项的下拉菜单。
元素中的
元素定义列表中的可用选项：
实例
选择日期
星期一
星期二
星期三
亲自试一试
提示：如果列表中包含了一长列相关的选项，请在
中使用
元素：
实例
Monday
Tuesday
Wednesday
Saturday
Sunday
亲自试一试
自定义选择菜单
本页上方的图片，展示了移动平台显示选择菜单的独特方式。
如果您希望在所有移动设备上显示一致外观的选择菜单，请使用
jQuery
的自定义选择菜单，data-native-menu=“false“属性：
实例
亲自试一试
Multiple
Selections
如需在选择菜单中选取多个选项，请在
元素中使用
multiple
属性：
实例
17、jQuery
Mobile
表单
-
滑块
切换开关
jQuery
Mobile
滑块控件
滑块允许您从一定范围内的数字中选取值：
如需创建滑块，请使用
：
实例
Points:
亲自试一试
使用下列属性来规定限定：
·
max
-
规定允许的最大值
·
min
-
规定允许的最小值
·
step
-
规定合法的数字间隔
·
value
-
规定默认值
提示：如果您希望突出显示截止滑块值的这段轨道，请添加
data-highlight=“true“：
实例
亲自试一试
切换开关
切换开关常用于开/关或对/错按钮：
如需创建切换，请使用
data-role=“slider“的
元素，并添加两个
元素：
实例
Toggle
Switch:
On
Off
亲自试一试
提示：请使用
“selected“属性来把选项之一设置为预选（突出显示）：
实例
Off
18、jQuery
Mobile
主题
jQuery
Mobile
主题
jQuery
Mobile
提供了五种不同的样式主题，从
“a“到
“e“-
每种主题带有不同颜色的按钮、栏、内容块，等等。jQuery
Mobile
中的一种主题由多种可见的效果和颜色构成。
如需定制应用程序的外观，请使用
data-theme
属性，并为该属性分配一个字母：
值
描述
例子
a
默认。黑色背景上的白色文本。
测试
b
蓝色背景上的白色文本
/
灰色背景上的黑色文本
测试
c
亮灰色背景上的黑色文本
测试
d
白色背景上的黑色文本
测试
e
橙色背景上的黑色文本
测试
提示：混合您喜欢的主题！
默认地，jQuery
Mobile
为页眉和页脚使用
“a“主题，为页眉内容使用
“c“主题（亮灰）。不过，您能够自如地对主题进行混合。
主题化的页面、内容和页脚
实例
亲自试一试
主题化的对话框
实例
Go
To
The
Themed
Dialog
Page
亲自试一试
主题化的按钮
实例
Button
Button
hre