除了jquery ui dialogMobile UI,还有哪些值得推荐的 Mobile UI 框架

> HTML5 开发框架 jQuery Mobile
jQuery Mobile(jQueryMobile) 是 jQuery 在手机上和平板设备上的版本。jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。
Jquery mobile构建于Jquery ,为前端开发人员提供了一个兼容所有主流移动设备平台的统一UI接口系统。拥有出色的弹性,轻量化以及渐进增强特性与可访问性。
jquery mobile UI builder为jquery mobile的强大的所见即所得的UI编辑器,使用方法为:点选自己要编辑的部分并将控件拖入到屏幕当中,并作出相应设置。完成后点击download即可获得html和css的打包文件!
文章作者:本文地址:版权所有 & 转载时必须以链接形式注明作者和原始出处!
后才能发布评论.
HTML580社区
12345678910加载中,请稍候...
加载中,请稍候...
jQuery.jQuery UI及jQuery Mobile技巧与示例 -达特森
其它类似商品
正在加载中,请稍候...
看过本商品的人还买了:
正在加载中,请稍候...
正在加载中,请稍候...
正在加载中,请稍候...
正在加载中,请稍候...
jQuery.jQuery UI及jQuery Mobile技巧与示例 -达特森
商品名称:jQuery.jQuery UI及jQu...
商品编号:
上架时间: 13:17:28
商品毛重:1.2kg
商品产地:
如果您发现商品信息不准确,
&&商品基本信息,请以下列介绍为准
商品名称:
jQuery.jQuery UI及jQuery Mobile技巧与示例
人民邮电出版社
&&其他参考信息(以实物为准)
&&开本:16开
&&重量:522 g
&&出版时间:
&&页数:279
&&发货时间:当日订单次日18点发出
&&库房:北京市新华书店
&&到货须知:北京及周边地区发货后1-2天到达、江浙沪皖地区2-3天到达,其他地区3-5天到达。
&& 内容简介
《jQuery、jQuery UI及jQuery Mobile技巧与示例》包括jQuery、jQuery UI、jQuery Mobile以及jQuery插件四部分内容。第一部分介绍jQuery核心库,从如何使用jQuery开始,演示一些基础API的使用、如何优化选取集以及如何与服务器通信等内容。第二部分介绍jQuery UI库,先演示jQuery UI带来的增强功能,如拖放功能;接着演示折叠菜单、自动补全以及日历组件等常见组件;最后介绍jQuery UI的主题和特效等内容。第三部分介绍jQuery Mobile库,从如何设置移动站点开始,演示页面结构、页面加载以及页面变换和动画;接着讲解jQuery Mobile提供的一些微件,包括导航栏、表单元素及列表元素等内容。第四部分介绍jQuery插件,先讲解如何创建插件,接着介绍了目前非常流行的Twitter Bootstrap框架。 《jQuery、jQuery UI及jQuery Mobile技巧与示例》适合对jQuery及其相关技术感兴趣的读者阅读和参考。
&& 作者简介
Adriaan de Jonge 荷兰Xebia IT架构公司的咨询顾问。他专注于互联网、内容管理和Java。他是Essential App Engine一书的作者,他还曾在IBM developerWorks上发表过几篇关于Java、XML和互联网技术的文章。他曾是2011年JFall和2012年Scandinavian开发者大会的会议演讲人。
Phil Dutson 美国爱康健身器材公司的一位资深前端开发者,曾为NordicTrack、ProForm、Freemotion、Sears、Costco、Sam’s Club以及其他主流客户做过项目。他共同创办并管理着E-COM DevBlog(),专注于Web开发解决方案。他也是Sams Teach Yourself jQuery Mobile in 24 Hours一书的作者。
包勇明 资深前端开发工程师,有丰富的前端开发经验,热爱前端和互联网技术,对前端和用户体验相关的一切技术都感兴趣。目前正在研究如何提取网页的有效正文并对安全问题也有浓厚的兴趣。
程学彬 资深软件开发工程师,对前端技术有非常深厚的兴趣,曾多年从事 Web 开发工作,对多个 JavaScript 框架以及网站的高性能、高并发有很多经验和心得。后转向浏览器渲染引擎和安全防护研发,现于天津赢达信公司任项目研发经理,负责桌面和移动多平台的安全浏览器产品。
第一部分 核心基础
第1章 jQuery入门 2
1.1 技巧:jQuery基本使用简介 2
1.2 技巧:和其他库一起使用jQuery 4
1.3 技巧:检测jQuery版本 5
1.4 技巧:使用each()迭代数组 6
1.5 技巧:使用map()操作数组 7
1.6 技巧:使用数组元素 8
1.7 技巧:使用index()获取元素的位置 10
1.8 技巧:使用grep()在数组中查找元素 11
1.9 技巧:使用length()检测元素集的大小 12
1.10 技巧:获取HTML5的data—属性 12
1.11 技巧:使用data()存储元素数据 13
1.12 技巧:使用removeData()移除元素数据 14
1.13 技巧:检验和操作变量 16
1.14 技巧:使用extend()扩展对象 18
1.15 技巧:序列化表单中的数据 19
1.16 技巧:检测浏览器支持的特性 20
第2章 选取元素 22
2.1 技巧:使用add()合并两个元素集 22
2.2 技巧:使用filter()优化选取集 23
2.3 技巧:使用find()和children()选取后代元素 24
2.4 技巧:使用has()选取元素、使用is()检测元素 25
2.5 技巧:使用伪选择器选取表单元素 26
2.6 技巧:嵌套选择器 27
2.7 技巧:模拟CSS的hover选择器 28
2.8 技巧:使用contains()选取文本 29
2.9 示例:高亮显示单个词 30
2.10 技巧:创建自定义选择器 31
2.11 技巧:限制选取上下文的范围 32
第3章 修改页面 34
3.1 技巧:添加类 34
3.2 示例:移除类 35
3.3 技巧:生成类名 36
3.4 技巧:更改property和attribute 37
3.5 技巧:更改元素的HTML内容 39
3.6 技巧:使用append()和appendTo()添加内容 40
3.7 示例:添加函数的返回结果 41
3.8 技巧:使用prepend()和prependTo()添加内容 42
3.9 技巧:使用jQuery动态生成HTML 43
3.10 技巧:添加和分离元素 44
3.11 技巧:使用clone()复制元素 45
3.12 技巧:在指定的位置插入元素 47
3.13 示例:向上和向下移动列表项 48
3.14 技巧:移除元素 49
3.15 技巧:包裹和解包元素 51
第4章 监听和响应事件 54
4.1 技巧:监听鼠标事件 54
4.2 示例:在画布上绘图 56
4.3 技巧:监听键盘事件 57
4.4 技巧:监听表单事件 59
4.5 技巧:监听滚轮事件 60
4.6 技巧:使用live()和die()添加中枢事件监听器 61
4.7 技巧:使用delegate()将事件委托给指定的祖先元素 63
4.8 技巧:使用proxy()更改函数的执行上下文 65
第5章 与服务器通信 67
5.1 技巧:使用Node.js安装示例服务器 67
5.2 技巧:执行GET请求 69
5.3 技巧:直接加载HTML 70
5.4 技巧:使用Promise处理结果 71
5.5 技巧:处理服务器错误 72
5.6 技巧:捕获“页面未找到”结果 73
5.7 技巧:处理页面重定向 74
5.8 技巧:设置请求的超时时间 76
5.9 技巧:传递HTTP首部 77
5.10 示例:在服务器端验证表单输入 78
5.11 技巧:加载XML 79
5.12 技巧:监听AJAX事件 80
5.13 技巧:从外部服务器读取JSONP 81
第6章 与用户交互 84
6.1 下载和安装jQueryUI 84
6.2 技巧:拖曳元素 85
6.2.1 为可拖曳元素添加样式 85
6.2.2 设置可拖曳组件的选项 86
6.2.3 捕获可拖曳组件的事件 89
6.2.4 调用可拖曳组件的方法 90
6.3 技巧:放置元素 91
6.3.1 为可放置元素添加样式 92
6.3.2 设置可放置组件的选项 92
6.3.3 捕获可放置组件的事件 93
6.3.4 调用可放置组件的方法 94
6.4 技巧:使用可排序组件更改元素的顺序 94
6.4.1 为可排序元素添加样式 95
6.4.2 设置可排序组件的选项 96
6.4.3 捕获可排序组件的事件 97
6.4.4 调用可排序组件的方法 100
6.5 示例:对树结构中的元素排序 100
6.6 技巧:从无序列表中选取元素 101
6.6.1 为可选取元素添加样式 103
6.6.2 设置可选取组件的选项 103
6.6.3 捕获可选取组件的事件 103
6.6.4 调用可选取组件的方法 105
6.7 示例:在树结构中选取元素 105
6.8 技巧:调整元素大小 106
6.8.1 为可调整大小元素添加样式 107
6.8.2 设置可调整大小组件的选项 107
6.8.3 捕获可调整大小组件的事件 108
6.8.4 调用可调整大小组件的方法 109
第7章 与微件交互 110
7.1 技巧:使用折叠菜单微件组织内容 110
7.1.1 为折叠菜单元素添加样式 111
7.1.2 设置折叠菜单的选项 112
7.1.3 捕获折叠菜单的事件 114
7.1.4 调用折叠菜单的方法 115
7.2 技巧:使用自动补全微件提示输入值 116
7.2.1 为自动补全元素添加样式 117
7.2.2 设置自动补全的选项 117
7.2.3 捕获自动补全的事件 119
7.2.4 调用自动补全的方法 120
7.3 技巧:将元素转换为按钮微件 120
7.3.1 为按钮元素添加样式 121
7.3.2 设置按钮的选项 122
7.3.3 捕获按钮的事件 123
7.3.4 调用按钮的方法 123
7.4 示例:使用按钮集装饰单选框 123
7.5 技巧:使用日历微件选择日期 124
7.5.1 为日历元素添加样式 125
7.5.2 设置日历的选项 126
7.5.3 捕获日历的事件 129
7.5.4 调用日历的方法 130
7.6 技巧:使用对话框微件引起注意 131
7.6.1 为对话框元素添加样式 132
7.6.2 设置对话框的选项 133
7.6.3 捕获对话框的事件 134
7.6.4 调用对话框的方法 136
7.7 技巧:使用进度条微件显示进程的状态 137
7.7.1 为进度条元素添加样式 138
7.7.2 设置进度条的选项 138
7.7.3 捕获进度条的事件 138
7.7.4 调用进度条的方法 139
7.8 技巧:使用滑块微件获取数字 139
7.8.1 为滑块元素添加样式 140
7.8.2 设置滑块的选项 140
7.8.3 捕获滑块的事件 141
7.8.4 调用滑块的方法 142
7.9 技巧:使用选项卡微件导航页面 142
7.9.1 为选项卡元素添加样式 144
7.9.2 设置选项卡的选项 145
7.9.3 捕获选项卡的事件 146
7.9.4 调用选项卡的方法 147
第三部分 jQueryMobile
第8章 更改外观 150
8.1 更改jQueryUI组件的样式 150
8.2 使用jQueryCore创建动画 151
8.3 技巧:使用jQueryUI的颜色动画 152
8.4 技巧:使用jQueryCore中的fade和slide特效来隐藏元素 153
8.5 技巧:使用jQueryUI添加图形特效 155
8.6 技巧:使用jQueryUI的添加和移除CSS类的动画 156
8.7 技巧:以图表的方式显示jQueryUI中的所有缓动函数 157
8.8 技巧:显示jQueryUI中的所有图标 159
8.9 技巧:使用Promise在动画结束时执行代码 161
8.10 技巧:使用queue和dequeue在动画之间执行代码 162
第9章 使用jQueryMobile来导航页面 165
9.1 技巧:搭建jQueryMobile基础页面 165
9.2 技巧:用单个HTML文件服务多张页面 166
9.3 技巧:更改标题元素 168
9.4 技巧:使用AJAX加载外部页面 169
9.5 技巧:显示页面正在加载的信息 171
9.6 技巧:不使用AJAX而链接至外部页面 173
9.7 技巧:指定过渡动画 174
9.8 技巧:指定自定义的过渡动画 175
9.9 技巧:监听Mobile事件 177
9.10 技巧:生成回退按钮 180
9.11 技巧:在页面下方添加footer 181
9.12 技巧:跨页面时固定footer 183
9.13 技巧:将footer的位置保持固定 184
9.14 技巧:隐藏和显示footer 186
9.15 技巧:优化header和footer以便全屏查看 188
9.16 技巧:使用主题来更改配色方案 189
9.17 技巧:使用多个列 191
9.18 技巧:利用JavaScript调用来变更页面 192
9.19 技巧:利用JavaScript调用加载页面 195
9.20 技巧:向jQueryMobile中的DOM结点添加数据 196
9.21 技巧:利用jQueryMobile的辅助函数 197
第10章 与jQueryMobile交互 201
10.1 技巧:在content里面显示工具栏 201
10.2 技巧:显示警告栏 202
10.3 技巧:向footer元素中添加菜单栏 203
10.4 技巧:使用导航栏进行导航 204
10.5 技巧:使用collapsible来显示和隐藏元素 207
10.6 技巧:使用collapsible集合来添加折叠菜单的行为 209
10.7 技巧:使用表单字段来获取基本的文本框 210
10.8 技巧:获取日历输入框 211
10.9 技巧:显示输入框时使用替代键盘 213
10.10 技巧:显示专门的输入框 214
10.11 技巧:使用滑块来获取整数 216
10.12 技巧:使用快速开关来设置二进制值 217
10.13 技巧:使用单选框选取单个元素 218
10.14 技巧:使用复选框选取多个元素 219
10.15 技巧:从下拉列表选取元素 221
10.16 技巧:关闭jQueryMobile而显示原生的表单 223
10.17 技巧:显示元素列表 224
10.18 技巧:筛选列表元素 232
10.19 技巧:将表单元素按列表分组 233
第四部分 插件
第11章 创建插件 236
11.1 技巧:构建简单的静态插件 236
11.2 技巧:创建简单的“有上下文”的插件 237
11.3 技巧:链接jQuery函数和插件 238
11.4 技巧:参数化插件 239
11.5 技巧:提供默认参数 240
11.6 技巧:使用方法来操作插件 242
11.7 技巧:创建“创建插件的插件” 244
11.8 技巧:注册和调用回调函数 246
11.9 技巧:向回调函数传递上下文 247
11.10 技巧:返回Deferred对象来分别调用成功和出错时的回调函数 249
11.11 技巧:返回Promise来保护内部实现 250
11.12 技巧:演示Promise的保护机制 251
11.13 技巧:使用Promise来控制流的结构 252
11.14 技巧:在调用最后的回调函数之前显示进度 253
11.15 技巧:向回调函数传递上下文 255
11.16 技巧:向进度函数传递上下文 256
第12章 使用第三方插件 259
12.1 技巧:显示模态框 259
12.2 技巧:使用下拉菜单 261
12.3 技巧:使用滚动侦测 263
12.4 技巧:变换选项卡 265
12.5 技巧:添加工具提示 267
12.6 技巧:添加提示面板 269
12.7 技巧:警告用户 270
12.8 技巧:按钮控件 272
12.9 技巧:折叠内容 274
12.10 技巧:将内容置于轮播插件中 276
12.11 技巧:将输入提示用于自动补全 278
&& 编辑推荐
深入浅出的学习指南,100多个实用的jQuery技巧和示例,实用性很强,可直接用在任何实际的Web和移动应用中。将jQuery、jQuery UI、jQuery Mobile结合起来,贯通整个Web开发和移动App开发脉络的完整攻略。
我们承诺签收后七天内无条件退换货保障。
服务承诺:
注:因厂家会在没有任何提前通知的情况下更改产品包装、产地或者一些附件,本司不能确保客户收到的货物与商城图片、产地、附件说明完全一致。只能确保为原厂正货!并且保证与当时市场上同样主流新品一致。若本商城没有及时更新,请大家谅解!
权利声明:京东上的所有商品信息、客户评价、商品咨询、网友讨论等内容,是京东重要的经营资源,未经许可,禁止非法转载使用。
注:本站商品信息均来自于合作方,其真实性、准确性和合法性由信息拥有者(合作方)负责。本站不提供任何保证,并不承担任何法律责任。
正在加载中,请稍候...
温馨提示:因厂家更改产品包装、产地或者更换随机附件等没有任何提前通知,且每位咨询者购买情况、提问时间等不同,为此以下回复仅对提问者3天内有效,其他网友仅供参考!若由此给您带来不便请多多谅解,谢谢!
正在加载中,请稍候...
正在加载中,请稍候...
正在加载中,请稍候...
正在加载中,请稍候...
正在加载中,请稍候...
正在加载中,请稍候...
正在加载中,请稍候...
正在加载中,请稍候...
正在加载中,请稍候...
正在加载中,请稍候...
正在加载中,请稍候...
正在加载中,请稍候...
正在加载中,请稍候...
浏览了该商品的用户还浏览了
正在加载中,请稍候...
浏览了该商品的用户最终购买了
正在加载中,请稍候...
计算机理论、基础知识排行榜
购买了该商品的用户还购买了
正在加载中,请稍候...
浏览了该商品的用户还浏览了
正在加载中,请稍候...
根据浏览猜你喜欢
正在加载中,请稍候...
正在加载中,请稍候...加载中,请稍候...
加载中,请稍候...
&&&商品评价
商品名称:
评价得分:
此评价对我
此评价对我
此评价对我
此评价对我
此评价对我
此评价对我
此评价对我
此评价对我
此评价对我
此评价对我
此评价对我
此评价对我
此评价对我
此评价对我
此评价对我
此评价对我
此评价对我
此评价对我
此评价对我
此评价对我使用jquery mobile开发HTML5移动站的那点事儿[jquery mobile入门教程] - 推酷
使用jquery mobile开发HTML5移动站的那点事儿[jquery mobile入门教程]
首先申明本人不是前端工程师纯属酱油男,只是在一个移动站点项目中采用了jquery mobile进行HTML5单网页站点的开发(这是一段伤心的历程)。
那天我还沉浸在服务器集群部署实施的那种美好感觉中(虽然就那么几台机子),那天我还是认为我永远都不会使用jquery mobile开发站点,可是这一切的美好都被那个姓牛的经理所打断。对,就是姓牛,虽然他会看到这篇blog,事实上他是想看的。
牛经理在拉我入伙的时候,他已经研究了很长时间的html5,css3,jqm(jquery mobile),然后突然说:
“典阳,我们要做HTML5 ELLEMEN手机端的项目,给你两个文档,你看看吧。我准备用jqm来做,然后……”
牛经理给的两个文档:
/componts/page/transitions.html
目前jqm最新版本是1.3.1,当我看了牛经理的两个文档之后,我才发现最新的jqm是1.3.1,然后官方文档是
,然后我满怀疑惑的问了牛经理:“我们使用哪个版本的jqm”,牛经理很淡定的说了一句:“用最新的!”,我倒啊。
简单的介绍一下jqm吧
jQuery Mobile是jQuery在手机上和平板设备上的版本。jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。适合用来做HTML5的单网页应用,默认支持多种页面围场效果,通过ajax动态加载页面并在页面装载过程中注册多种事件,模拟原生APP的header,footer机制,支持多种插件机制,可以针对页面原HTML进行深加工,默认支持多种Widgets等等很强大的功能。
1.使用jqm的简单示例
参考的说明文档(英文的,像是啃骨头一样读着,好吧,我承认英文没有学好),知道了使用jqm的基本用法。
&!DOCTYPE html&
&title&jquery mobile easy demo&/title&
&meta charset=&UTF-8& /&
&meta name=&viewport& content=&width=device-width, initial-scale=1&&
&link rel=&stylesheet& href=&/mobile/1.3.0/jquery.mobile-1.3.0.min.css& /&
&script src=&/jquery-1.9.1.min.js&&&/script&
&script src=&/mobile/1.3.0/jquery.mobile-1.3.0.min.js&&&/script&
&!--page1 start--&
&div data-role=&page&&
&!--header start--&
&div data-role=&header&&
&h1&My Title&/h1&
&!--header end--&
&!--content start--&
&div data-role=&content&&
&p&Hello world&/p&
&!--content end--&
&!--footer start--&
&div data-role=&footer&&
&h1&footer&/h1&
&!--footer end--&
&!--page end--&
使用jqm最简的demo如上,如果你需求jqm默认样式中使用的各种小图标,那你需要将
里面的images文件夹放在项目相应的目录。另外值得一提的是jqm1.3支持按需定制jqm包(膜拜吧,我拜!),
jqm将div[data-role=&page&]看作是一个页面,一个页面划分为三个部分div[data-role=&header&],div[data-role=&content&],div[data-role=&footer&]
2.同一个页面多个div[data-role=&page&]元素
&!DOCTYPE html&
&title&jquery mobile easy demo&/title&
&meta charset=&UTF-8& /&
&meta name=&viewport& content=&width=device-width, initial-scale=1&&
&link rel=&stylesheet& href=&/mobile/1.3.0/jquery.mobile-1.3.0.min.css& /&
&script src=&/jquery-1.9.1.min.js&&&/script&
&script src=&/mobile/1.3.0/jquery.mobile-1.3.0.min.js&&&/script&
&!--page1 start--&
&div data-role=&page& id=&page1&&
&!--header start--&
&div data-role=&header&&
&h1&My Title1&/h1&
&!--header end--&
&!--content start--&
&div data-role=&content&&
&p&Hello world1&/p&
&!--content end--&
&!--footer start--&
&div data-role=&footer&&
&a href=&#page2&&page2&/a&
&!--footer end--&
&!--page end--&
&!--page2 start--&
&div data-role=&page& id=&page2&&
&!--header start--&
&div data-role=&header&&
&h1&My Title2&/h1&
&!--header end--&
&!--content start--&
&div data-role=&content&&
&p&Hello world2&/p&
&!--content end--&
&!--footer start--&
&div data-role=&footer&&
&a href=&#page1&&page1&/a&
&!--footer end--&
&!--page end--&
可以在一个页面中设置多个div[data-role=&page&],并且通过给a标签的href属性设置为div[data-role=&page&]元素的id前面加#,就可以实现page之间的切换,另外a标签同时支持多种以data-打头的属性,如data-transition,相信你在这儿可以找到你想要的所有a标签支持的属性
中的Link项。
另外值得一提的是,默认情况下通过jqm渲染的页面,所有的a标签连接地址的请求都将转化为ajax请求,通过ajax请求回来之后,jqm会将head标签中的title提取,其他标签丢弃,然后再提取返回的div[data-role=&page&]元素,通过转场隐藏前一个div[data-role=&page&],渲染当前的div[data-role=&page&]元素。当然你可以设置data-ajax=”false”来阻止这种默认行为。
3.如何在jqm渲染页面之前完成一些初始化
如果你的应用在jqm渲染页面之前需要获得一些初始化的数据(一般都是通过ajax获取的),由于jqm对$.ajaxSetup注册了一些行为,所以在jqm渲染页面之后再进行普通的ajax请求(非jqm机制的ajax)那么将会带来不少副作用,而这些副作用往往都是不可预期的(你在实践中会遇到的,但是请记住这一条提示)。在jqm渲染页面之前完成一些初始化的工作方法是:
&script type=&text/javascript&&
$(document).bind(&mobileinit&, function()
$.mobile.autoInitializePage =
//这 可 或
//是 能 者
//初 是 是
//始 一 ajax
//化 些 的
//工 计 请
//作 算 求
$.mobile.autoInitializePage =
mobileinit事件,将在document.ready之前触发,是为了能够修改jqm默认的配置。
注意因为的mobileinit事件立即被触发,你需要绑定你的事件处理程序在加载jqm加载之前,如:
&script src=&jquery.js&&&/script&
&script src=&custom-scripting.js&&&/script&
&script src=&jquery-mobile.js&&&/script&
其中custom-scripting.js相当于上面那部分的代码
当前你可以在document.mobileinit内进行其他配置项的设置,如:
// 开启dom缓存,加载过的page将常驻于文档中
$.mobile.page.prototype.options.domCache =
// 水平的滑动距离超过50px才触发swipe事件
$.event.special.swipe.horizontalDistanceThreshold = 50;
// 这是用来定义选择器(元素类型,数据和角色等),将自动被初始化为jqm ui的表单按钮
$.mobile.button.prototype.options.initSelector = &.jqm&;
更多全局配置进入
4.不使用jqm ui的表单UI及按钮UI
有时候页面制作完了之后才会觉得本次移动页面将要使用jqm来进行交互的实现(本人的项目就是这样过来的),这个时候就会有诸多的问题,样式的兼容,结构也jqm要求的格式不一样,另外还有一个比较恼火的问题,如果不仔细查看api文档,是会崩溃的,就是默认情况下button, [type='button'], [type='submit'], [type='reset'],input[type='text'], input[type='search'], :jqmData(type=’search’), input[type='number'], :jqmData(type=’number’), input[type='password'], input[type='email'], input[type='url'], input[type='tel'], textarea, input:not([type])这些表单或者按钮都会被jqm处理,渲染为jqm ui的默认风格。那么如何取消呢?方法是在mobileinit事件中针对上述的表单及按钮设置选择器,让jqm有选择的增强渲染为jqm ui风格的表单及按钮。如:
// 这是用来定义选择器(元素类型,数据和角色等),将自动被初始化为jqm ui的表单button
$.mobile.button.prototype.options.initSelector = &.jqmbut&;
// 这是用来定义选择器(元素类型,数据和角色等),将自动被初始化为jqm ui的表单Textinput
$.mobile.textinput.prototype.options.initSelector = &.jqminputs&;
这样就会影响我们已经制作好的页面的样式。
5.强大的$.mobile.changePage(to [, options ])
功能:通过脚本从一个页面围场到另一个页面
to 类型为string或者object,可以为页面的url,或者div[data-role=&page&]元素的id前加#如“#page1”,object是jquery对象或者Dom对象
options 类型为object,其中可以有如下的选项:
allowSamePageTransition 类型为Boolean,默认为false,是否对同一个页面触发转场
changeHash 类型为Boolean,默认为true,是否将访问的url添加到window hash列表中,主要是影响前后网页的跳转
data 类型为object或者string,默认为undefined,进行ajax请求是发送的其他数据,为url查询字符串或者为一个键值对对象
dataUrl 类型为string,默认为undefined,浏览器地址栏展示的url,只有changeHash设置为true有用
reverse 类型为boolean,默认为false,是否反转场效果,依赖于transition项的设置
transition 类型为string,默认为$.mobile.defaultPageTransition,默认支持的围场效果fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none
type 类型为string,默认为get,ajax的请求类型,get,post可用
6.固定header,footer的用法
有时候多个页面都会共用同一个header,footer能不能在页面切换的时候,让header,footer固定呢,答案是可以的。通过将多个页面的div[data-role=&header&],div[data-role=&footer&]元素id属性设置为一致的,在页面切换的时候,jqm处理将只要切换page的content部分,看起来就好像原生的APP一样,是一个不错的功能。如:
&div data-role=&header& data-id=&index-footer& data-position=&fixed& data-tap-toggle=&false&&...
&div data-role=&footer& data-id=&index-footer& data-position=&fixed& data-tap-toggle=&false&&...
更多内容请参考
的Header,Footer部分。
今天先到这儿吧,累了。以上内容为xudianyang整理报道,谢谢阅读!Bey Bey!
已发表评论数()
&&登&&&陆&&
已收藏到推刊!
请填写推刊名
描述不能大于100个字符!
权限设置: 公开
仅自己可见

我要回帖

更多关于 基于jquery的ui框架 的文章

 

随机推荐