书签 分享 收藏 举报 版权申诉 / 49
立即下载 加入VIP,免费下载
当前位置： 首页 > 表格模板 > 合同协议 > jQuery mobile学习笔记.docx

类型jQuery mobile学习笔记.docx

  • 文档编号：10856115
  • 上传时间：2023-05-28
  • 格式：DOCX
  • 页数：49
  • 大小：96.09KB

5、页面说明

∙data-role="page"是显示在浏览器中的页面

∙data-role="header"创建页面上方的工具栏（常用于标题和搜索按钮）

∙data-role="content"定义页面的内容，比如文本、图像、表单和按钮，等等

∙data-role="footer"创建页面底部的工具栏

6、对话框data-rel="dialog"

转到页面二

显示效果

Opendialog（中间扩散打开）

Opendialog2（往上打开）

Opendialog2（翻页效果）

过渡

描述

测试

fade

默认。

淡入淡出到下一页。

测试

flip

从后向前翻动到下一页。

测试

flow

抛出当前页面，引入下一页。

测试

pop

像弹出窗口那样转到下一页。

测试

slide

从右向左滑动到下一页。

测试

slidefade

从右向左滑动并淡入到下一页。

测试

slideup

从下到上滑动到下一页。

测试

slidedown

从上到下滑动到下一页。

测试

turn

转向下一页。

测试

none

无过渡效果。

测试

7、触摸事件（touch）

在jQueryMobile中有一些触摸事件是可定制的。

然而，这些事件仅当与支持触摸

功能的设备进行交互的用户访问您的jQueryMobile网站时才可用。

当这些事件可

用时，您可以触发任何自定义javascript作为对五种不同的事件的响应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（）中进行编程即可，如下代码示例：

DOCTYPEHTML>

UnderstandingthejQueryMobileAPI

$（document）.ready（function（）{

$（".tap-hold-test"）.bind（"taphold",function（event）{

$（this）.html（"Tappedandheld"）;

}）;

}）;

Header

Tapandholdtest

从上面的代码可以看到，将一个list列表跟taphold事件进行了绑定，当DOM加载

完毕后，当触发taphold事件后，就会显示Tappedandheld的提示信息。

8、按钮

转到页面二

行内按钮

默认情况下，按钮会占据屏幕的全部宽度。

如果您需要按钮适应其内容，或者如果您需要两个或多个按钮并排显示，请添加data-inline="true"：

实例

转到页面二

组合按钮

jQueryMobile提供了对按钮进行组合的简单方法。

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

规定按钮是否有阴影。

测试

为jQueryMobile按钮添加图标

如需向您的按钮添加图标，请使用data-icon属性：

搜索

提示：

您也可以在

亲自试一试

下面的代码将向页眉标题的左侧添加一个按钮：

首页

欢迎来到我的主页

不过，如果您在

元素之后放置按钮链接，那么它不会显示在文本右侧。

如需向页眉标题的右侧添加按钮，请规定类名"ui-btn-right"：

实例

欢迎来到我的主页

搜索

页脚栏

与页眉相比，页脚更具伸缩性-它们更实用且多变，所以能够包含所需数量的按钮：

实例

转播到新浪微博

转播到腾讯微博

转播到QQ空间

亲自试一试

注释：

页脚与页眉的样式不同（它会减去一些内边距和空白，并且按钮不会居中）。

如果要修正该问题，请在页脚设置类名"ui-btn"：

实例

亲自试一试

您也能够选择在页脚中水平还是垂直地组合按钮：

实例

转播到新浪微博

转播到腾讯微博

转播到QQ空间

亲自试一试

定位页眉和页脚

放置页眉和页脚的方式有三种：

∙Inline-默认。

页眉和页脚与页面内容位于行内。

∙Fixed-页面和页脚会留在页面顶部和底部。

∙Fullscreen-与fixed类似;页面和页脚会留在页面顶部和底部，butalsooverthepagecontent.Itisalsoslightlysee-through

请使用data-position属性来定位页眉和页脚：

Inline定位（默认）

亲自试一试

Fixed定位

亲自试一试

如果需要启用全面定位，请使用data-position="fixed"，并向该元素添加data-fullscreen属性：

Fullscreen定位

10、jQueryMobile导航栏

导航栏由一组水平排列的链接构成，通常位于页眉或页脚内部。

默认地，导航栏中的链接会自动转换为按钮（无需data-role="button"）。

请使用data-role="navbar"属性来定义导航栏：

实例

亲自试一试

提示：

按钮的宽度，默认地，与其内容一致。

使用无序列表来均等地划分按钮：

一个按钮占据100%的宽度，两个按钮各分享50%的宽度，三个按钮33.3%，以此类推。

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

11、jQueryMobile可折叠

∙jQueryMobile导航栏

∙jQueryMobile网格

可折叠的内容块

可折叠（Collapsibles）允许您隐藏或显示内容-对于存储部分信息很有用。

如需创建可折叠的内容块，请向某个容器分配data-role="collapsible"属性。

在容器（div）中，添加一个标题元素（h1-h6），其后是您需要扩展的任意HTML标记：

实例

点击我-我可以折叠！

我是可折叠的内容。

亲自试一试

默认地，该内容是关闭的。

如需在页面加载时扩展内容，请使用data-collapsed="false"：

实例

点击我-我可以折叠！

现在我默认是展开的。

亲自试一试

嵌套的可折叠块

可以嵌套可折叠内容块：

实例

点击我-我可以折叠！

我是被展开的内容。

点击我-我是嵌套的可折叠块！

我是嵌套的可折叠块中被展开的内容。

亲自试一试

提示：

可折叠内容块可以被嵌套您希望的任意次数。

可折叠集合

可折叠集合（Collapsiblesets）指的是被组合在一起的可折叠块（常被称为手风琴）。

当新块被打开时，所有其他块会关闭。

创建若干内容块，然后通过data-role="collapsible-set"用新容器包装这个可折叠块：

实例

点击我-我可以折叠！

我是被展开的内容。

点击我-我可以折叠！

我是被展开的内容。

12、jQueryMobile网格

∙jQueryMobile可折叠

∙jQueryMobile列表视图

jQueryMobile布局网格

jQueryMobile提供了一套基于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来定制列块：

实例

亲自试一试

您也可以通过使用行内样式来定制块：

1pxsolidblack;">Text..

多行

在列中包含多个行也是可能的。

注释：

ui-block-a-class将始终创建新行：

实例

SomeText

SomeText

SomeText

SomeText

SomeText

SomeText

13、jQueryMobile列表视图

jQueryMobile中的列表视图是标准的HTML列表：

有序列表（

    ）和无序列表（