jQuery mobile学习笔记.docx
《jQuery mobile学习笔记.docx》由会员分享，可在线阅读，更多相关《jQuery mobile学习笔记.docx（49页珍藏版）》请在冰豆网上搜索。
jQuerymobile学习笔记
1、利用JQuerymobile技术必须引用以下文件
---->---->2、data-position="fixed"固定在页面中3、在页页如果要用自带的返回控件的话，需加此属性：data-backbtn="true"如果page是以对话框打开的加此属性无效。4、自定义返回按扭需加此属性data-rel="back"返回我是一个对话框
--
-->
---->2、data-position="fixed"固定在页面中3、在页页如果要用自带的返回控件的话，需加此属性：data-backbtn="true"如果page是以对话框打开的加此属性无效。4、自定义返回按扭需加此属性data-rel="back"返回我是一个对话框
-->2、data-position="fixed"固定在页面中3、在页页如果要用自带的返回控件的话，需加此属性：data-backbtn="true"如果page是以对话框打开的加此属性无效。4、自定义返回按扭需加此属性data-rel="back"返回我是一个对话框
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"
转到页面二
显示效果
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>
$（document）.ready（function（）{
$（".tap-hold-test"）.bind（"taphold",function（event）{
$（this）.html（"Tappedandheld"）;
}）;
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
规定是否是小型按钮。
data-shadow
规定按钮是否有阴影。
为jQueryMobile按钮添加图标
如需向您的按钮添加图标，请使用data-icon属性：
搜索
您也可以在或元素中使用data-icon属性。
下面我们列出了jQueryMobile提供的一些可用图标：
属性值
图标
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"
网格
jQueryMobile主题
jQueryMobile提供了五种不同的样式主题，从"a"到"e"-每种主题带有不同颜色的按钮、栏、内容块，等等。
jQueryMobile中的一种主题由多种可见的效果和颜色构成。
如需定制应用程序的外观，请使用data-theme属性，并为该属性分配一个字母：
例子
a
黑色背景上的白色文本。
b
蓝色背景上的白色文本/灰色背景上的黑色文本
c
亮灰色背景上的黑色文本
d
白色背景上的黑色文本
e
橙色背景上的黑色文本
9、工具栏
标题栏
页眉通常会包含页眉标题/LOGO或一到两个按钮（通常是首页、选项或搜索按钮）。
您可以在页眉中向左侧或/以及右侧添加按钮。
下面的代码，将向页眉标题文本的左侧添加一个按钮，并向右侧添加一个按钮：
下面的代码将向页眉标题的左侧添加一个按钮：
不过，如果您在
如需向页眉标题的右侧添加按钮，请规定类名"ui-btn-right"：
页脚栏
与页眉相比，页脚更具伸缩性-它们更实用且多变，所以能够包含所需数量的按钮：
转播到新浪微博
转播到腾讯微博
转播到QQ空间
注释：
页脚与页眉的样式不同（它会减去一些内边距和空白，并且按钮不会居中）。
如果要修正该问题，请在页脚设置类名"ui-btn"：
您也能够选择在页脚中水平还是垂直地组合按钮：
定位页眉和页脚
放置页眉和页脚的方式有三种：
∙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将始终创建新行：实例SomeTextSomeTextSomeTextSomeTextSomeTextSomeText13、jQueryMobile列表视图jQueryMobile中的列表视图是标准的HTML列表：有序列表（）和无序列表（）。
1pxsolidblack;">Text..
多行
在列中包含多个行也是可能的。
ui-block-a-class将始终创建新行：
SomeText
13、jQueryMobile列表视图
jQueryMobile中的列表视图是标准的HTML列表：
有序列表（
如需创建列表，请向
如需使这些项目可点击，请在每个列表项（
展开阅读全文 相关资源 初中英语最核心的词汇总结.docx 七年级英语上册所有重点单词、短语和句型总结.docx 中考英语所有重点必背短语.docx 初中英语三年所有必背动词搭配总结.docx 人教版初中英语全部知识点总结.docx 初中英语重点必背短语总结.docx 初中英语最核心的词汇之介词(37个).docx 初中英语最核心的词汇之副词（94个）.docx 初中英语考试真题分类专题： 代词.docx 初中英语名词考点+单复数专项训练+易错题.docx 猜你喜欢 新型墙体材料新建项目商业计划书文档格式.docx 09级单片机应用实习要求和模板文档格式.docx 中小学教育论文范文Word文档格式.docx 《大学生职业生涯规划》考试Word文档格式.docx 4某混合结构多层住宅施工组织设计Word下载.docx 宿舍管理员辞职报告Word格式文档下载.docx #学生自主学习是课程改革的主旋律Word格式文档下载.docx 中职教师教学工作总结范文5篇Word文件下载.docx 《商务应用文写作》网上考试题库完整Word文件下载.docx 相关搜索 jQuery mobile学习笔记 mobile 学习 笔记 当前位置：首页 > 初中教育 > 英语
copyright@ 2008-2022 冰豆网网站版权所有
经营许可证编号:鄂ICP备2022015515号-1
升级会员 