jquery mobile和ajax,使用jquery mobile不可忽视的细节
jQuery Mobile 是创建移动WEB应用程序的框架。在学习和使用该框架的过程中,有一些心得想要和大家分享一下。
一、框架
因为是移动端开发,所以不要忘了下面这个重要的meta标签哦:
使用jquery mobile要引入相应的css文件:
jquery mobile依赖jquery,因此要先引入jquey.js再引入jquery.mobile.js:
在引用jquey.js文件的时候一定要注意版本,要在1.8以上,但也不能过高,3.0以下就可以了。##jquey.js文件版本要在1.8以上,3.0以下就可以。
落落一开始就引用了cdnj上的最高版本3.3.1,结果页面不能正常显示,出现了下图这样的异常情况:
jquery版本过高.png
当落落把jquery.js版本换成1.8.3的,页面就正常显示了。
页面正常显示.png
二、基本页面结构
h5 data-*属性用于通过jquery mobile为移动设备创建交互外观。
标题
内容
页脚
jqm中,可以在单一HTML文件中创建多个页面。
需要通过唯一的id来分隔每个页面,并使用href属性连接彼此。
例:
标题1
内容1
index2
页脚1
标题2
内容2
index
页脚2
关于页面内容部分,落落看到有两种写法:
写法一
内容1
index2
写法二
内容2
index
落落把两种写法都用了,发现视觉效果是一致的,在chrome浏览器上,第一种写法解析后如下:
内容1
index2
第二种写法解析后如下:
内容2
index
两种写法解析后,第二种写法少了data-role属性,其它则一致,展示的效果也一致。
落落查看了一下w3c文档,文档上使用的是第一种写法。
对于页面的页眉和页脚,一般都是固定的,不会随着页面的滚动而滚动。想要达成这样的效果在jqm里也很简单,只需要添加属性data-position="fixed"。
例:
标题1
关于如何从一个页面过渡到另一个页面,jqm有一系列效果,这些过渡效果可以用于任意连接,通过data-transition属性达成。例如data-transition="slide"。默认效果是淡入淡出,若data-transition属性值设置为none则没有效果。如果你想应用某个效果,那你需要做的就仅仅是设置相应的data-transition属性值。
三、页面事件
$(document).on("事件名称","#链接的id属性值",function(){})
w3c jQuery Mobile 事件参考手册详细列出了所有的 jQuery Mobile 事件,网址如下:
http://www.w3school.com.cn/jquerymobile/jquerymobile_ref_events.asp
请注意,要通过使用 on()方法来绑定事件哦。
关于事件pageinit和pageshow,一定要注意它们的区别哦。
pageinit:页面初始化之后,只执行一次。
pageshow:页面显示的时候,每次进入页面都会执行。
四、组件
1.按钮
通过给a、button、input元素添加类class="ui-btn"或者增加data-role="button"可以创建按钮。
例如:
我是按钮
jqm对input元素进行了优化,比如下面的代码,没有添加class="ui-btn"或者增加data-role="button",但是它呈现的仍是按钮的样式,而且多了阴影、圆角等效果:
关于按钮还有以下样式:
ui-corner-all圆角
ui-shadow 阴影
ui-btn-inline并排显示
ui-btn-a
ui-btn-b
这些样式都要在使用了类ui-btn的基础上使用。关于后两种样式,分别使用在两个按钮上,两个按钮会呈现不同的效果,第一个按钮默认背景色白色,第二个按钮默认背景色黑色。如:
按钮1
按钮2
效果如下:
两个按钮呈现不同效果.png
对于按钮的样式,除了通过添加以上类名来完成,还可以通过data-*的方式达成:
data-inline=true"两个或多个按钮并排显示
data-corners true | false规定按钮是否有圆角。
data-mini true | false规定是否是小型按钮
data-shadow true | false 规定按钮是否有阴影。
如需创建后退按钮,使用data-rel="back"属性(会忽略锚的 href 值)
返回
还可以对按钮进行组合:
data-role="controlgroup" 属性与data-type="horizontal|vertical"一同使用,以规定水平或垂直地组合按钮。
按钮 1
按钮 2
按钮 3
默认情况下,组合按钮是垂直分组的,彼此间没有外边距和空白。并且只有第一个和最后一个按钮拥有圆角,在组合后就创造出了漂亮的外观。
按钮组合.png
注:w3c建议使用 data-role="button"的 元素来创建页面之间的链接,而 或 元素用于表单提交。
2、导航栏
导航栏由一组水平排列的链接构成,通常位于页眉或者页脚内部。
导航栏中的链接会自动转换为按钮。
使用data-role="navbar"属性定义导航栏即可。
按钮1
按钮2
按钮3
导航栏按钮在5个以内(包含5个)时会水平排列在一行内显示,按钮平分设备宽度;
导航栏按钮在5个以上则会换行显示。建议最多5个按钮。
通过data-icon属性可以为导航栏的按钮添加图标。
3、列表
jqm中的列表视图是标准的html列表(有序列表ol和无序列表ul).
想要创建列表,需要在ol或ul元素上添加data-role="listview";要想使这些列表项目可以点击,要在每个列表项li中规定链接。
- 项目1
- 项目2
- 项目3
- 项目4
- 项目5
列表不贴边显示.png
如果列表项没有a链接,那么列表项就没有右边的箭头。
data-inset="true"表示列表不要贴边显示,为列表添加圆角和外边距;列表默认是贴边显示的。
默认地,列表中的列表项会自动转换为按钮(无需 data-role="button")。
下面的这段代码中,class="ui-li-aside"可以实现该元素在列表右上角的效果。
G1次
上海南——北京西
2018年3月15日17:30开
ui-li-aside实现元素在列表项右上角的效果.png
如果要在列表中添加搜索框,要使用 data-filter="true" 属性:
G1次
上海南——北京西
2018年3月15日17:30开
- 项目2
- 项目3
- 项目4
- 项目5
列表中添加搜索框.png
默认搜索框中的文本是"Filter items..."。如需修改默认文本,使用data-filter-placeholder属性。例:
4、表单
使用html原生表单即可。
jqm建议每一个input都添加一个label,每个input元素都有name属性和id属性。
要想表单自适应,需要为每一个表单元素添加带有类ui-field-contain的div将input(input和其对应的label)标签包裹起来,当屏幕大于480px时label和对应的input会水平显示,否则上下显示。
发车站
终点站
车次
ipad显示效果.png
iPhone6显示效果.png
如果将所有的input包裹在一个带有类ui-field-contain的div中会怎么样呢?
一个div包裹所有ipad显示效果.png
当屏幕大于480px时label和对应的input会水平显示,但是上下表单元素之间没有间隔,很不美观。
一个div包裹所有iphone6显示效果.png
当屏幕小于480px时label和对应的input会上下显示,表单元素之间少了分割线,间隔也缩小了。
相比较而言,还是每一个表单元素单独包裹一个带有类ui-field-contain的div更美观。
5、表格
jqm对原生表格提供了reflow table mode模式(回流表格模式),在较宽的屏幕下展示普通的表格列,在较窄的屏幕下将数据堆叠变成表单式表格。
table ipad.png
table iphone6.png
data-role="table"jqm下的表格
data-mode="reflow" class="ui-responsive"回流表格,自适应
class="table-stroke" 为每一行添加下划线
五、事件
jqm中可以使用任何标准的jquery事件。
jqm还提供了若干为移动浏览器定制的事件:
触摸事件:触摸屏幕时触发(敲击、滑动)touch、tap、taphold(长按)、swipe(在某个元素上水平滑动超过30px)
滚动事件:上下滚动时触发scrollstart、scrollstop
方向事件:设备垂直或水平旋转时触发
页面事件:页面被显示、隐藏、创建、加载、卸载时触发
在 jQuery Mobile 中,使用 pageinit 事件来阻止 jQuery 代码在文档结束加载 前运行:
$(document).on("pageinit","#pageone",function(){
// jQuery 事件...
});
六、jqm ajax和ajax跨域
jqm中使用ajax和在jquery中一致。
https://www.imooc.com/video/4233
有时需要在请求ajax期间显示加载提示框,这是可手动显示jqm加载器。
$.mobile.loading("show");
加载完毕的回调函数中可以在让它隐藏:
$.mobile.loading("hide");
单纯的前端方式解决跨域:
www.corsproxy.com
通过cors(跨域资源共享)Proxy对请求进行转发。服务器端对于cors的支持,主要是通过设置Access-Control-Allow-Origin来进行。
在地址后面加上url,如地址为www.xxx.com/service,则修改为www.corsproxy.com/www.xxx.com/service即可。
这种方式被同源策略所禁止。
jquery mobile和ajax,使用jquery mobile不可忽视的细节相关推荐
- jQuery中的ajax、jquery中ajax全局事件、load实现页面无刷新局部加载、ajax跨域请求jsonp、利用formData对象向服务端异步发送二进制数据,表单序列化(异步获取表单内容)
jQuery中使用ajax: 在jQuery中使用ajax首先需要引入jQuery包,其引入方式可以采用网络资源,也可以下载包到项目文件中,这里推荐下载包到文件中:市面上有多个版本的jQuery库,这 ...
- ajax在jQuery的应用,Ajax在jQuery中的应用($.ajax()方法)
Ajax() 方法 $.ajax() 中的参数及使用方法 在jQuery中,$.ajax() 是最底层的方法,也是功能最强的方法.$.get().$.post().$.getScript().getJ ...
- ajax用jquery怎么实现,ajax使用jquery的实现方式
1.jquery的ajax方法. $("#ajaxbtn").click(function(){ $.ajax({ url:"json.do", beforeS ...
- jquery validation engine ajax验证,jquery.validationEngine 验证 AJAX 不起作用解决方法
当前位置:我的异常网» Ajax » jquery.validationEngine 验证 AJAX 不起作用解决方 jquery.validationEngine 验证 AJAX 不起作用解决方法 ...
- jquery validation engine ajax验证,jQuery Validation Engine 表单验证
名称 示例 说明 required validate[required] 表示必填项 groupRequired[string] validate[groupRequired[grp]] 在验证组为 ...
- JQuery封装的ajax方法
JQuery封装的ajax方法 JQuery封装的ajax优势:简单方便,已做好浏览器兼容性处理. 1.$.post方法 $.post(url[,data][,callback][,type]) ...
- jquery中ajax中的参数,jquery中的ajax参数
jquery中将ajax封装成了函数,我们使用起来非常方便,jquery会自动根据内容选择post还是get方式提交数据,并且会自动编码,但是要想完全掌握jquery中的ajax,我们必须将它的各个参 ...
- 【Ajax】了解Ajax与jQuery中的Ajax
一.了解Ajax 什么是Ajax Ajax 的全称是 Asynchronous Javascript And XML(异步 JavaScript 和 XML). 通俗的理解:在网页中利用 XMLHtt ...
- ajax. jquery. 异步,jQuery之异步Ajax请求使用
$.ajax({type:'',data:'',async:''...}) 参数: 1.cache: true缓存页面 false 不缓存页面 (默认: true,dataType为script和js ...
最新文章
- python输出结果空格分割_python 输出列表元素实例(以空格/逗号为分隔符)
- oracle执行计划连接方式
- 亚1纳米制程晶体管,一个碳原子栅极厚度:清华重大突破登上Nature
- 高德经纬度距离计算php,计算两个经纬度之间的距离 单位(m)
- 乐峰VS聚美,明星也要吃咸盐
- C++十进制数转换为二进制表示的算法(附完整源码)
- xencenter vgpu 看不见_有一种设计是“看不见,但感受得到”
- 工作145:vue里面取消console和debugger
- 【报告分享】2020年618直播带货数据报告.pdf(附下载链接)
- 阿里推迟招聘;大疆因腐败损失 10 亿;ofo 两创始人消失? | 极客头条
- 【干货分享】通用工具类
- 【Notification】屏蔽特定应用的通知提示
- 中呜机器人编程视频教程_中鸣快车编程入门篇—5.1补充的知识.doc
- Linux挂载OneDrive
- 论文排版的正确方式—LaTeX【分享贴】
- java modifier access_Java Modifier.getAccessSpecifier方法代码示例
- Eidetic:助你提升记忆力的酷应用
- shell 脚本学习
- 高通SDX55平台:adb功能异常
- ajax提交表单序列化不进请求,表单序列化+ajax跨域提交