jQuery mobile从入门到放弃

之前只知道jquery有个专门做移动端的插件,今天做移动端项目的时候了解了下它的事件,简单实用,触摸滑动基本都有,因为之前小组默认都是jQuery来写代码来着,所以从官网下载出来准备直接开动,但一直到从中午到晚上,他让我感觉到越来越绝望,现在,我想把我遇到的问题写出来,大家可以参考一下


问题1:我在两个官网分别下载最新的插件,jquery.mobile-1.4.5.min.js与jquery.mobile-1.4.5.min.css,(这两个压缩版一共将近400kb),jquery.min.js,然后兴冲冲的写了个简单的tap事件实验了下,结果出现这个问题
原因及解决:这是因为他们的jquery的最新版本已经到3.3.1了,而query.mobile还在1.4.5,所以出现这样的核心代码不匹配的问题(对了这也是因为他依赖jquery的原因,就是不知道既然依赖为什么不对移动端持续更新呢),然后有查到它可以用之前的老版本,jquery-1.11.1就可以,也可以用人家的一个js的迁移插件,给你的jquery降低版本(也真是会玩)


问题2:它老是警告我在css里的指定路径放一个loading图片这里
解决:这个应该也是默认样式的问题,用问题3的方法2也可以解决。


问题3:之后发现,一运行又发现问题,我的a标签的颜色变了,以及input框的高度都发生了改变,查了下怎么清除默认样式,有3种方法:
1.给那个标签添加行内属性:data-role=’none’ (表示不适用jquery mobile的样式)或者在jquery.js导入后,在jquerymobile导入前使用下面的脚本

$("input").attr('data-role','none');  
$("select").attr('data-role','none');

,但这个方法只解决了我的input的问题,a标签样式的问题仍旧没有 解决
2.使用jquery在创建后对所有元素增加属性

$(document).bind( 'pagecreate', function( e ) {
    $( 'input, textarea, select', e.target ).attr( 'data-' + $.mobile.ns + 'role', 'none' );
});

感觉原理还是和1一样(也可以决绝input的问题);
3.将 data-theme的取值改为大于e的值(好像是因为a~e已经有人家设好的主题了)
4. 找到JQuery Mobile默认样式的类选择器或是ID选择器,在JQuery Mobile 的css文件找到删除或者不删除,在你的样式里重写 但是后面加上 !important 作用是提高指定CSS样式规则的应用优先权。
因为用的是压缩文件,我就直接写了覆盖样式了在css里面了,刷新发现ok了,然后一跳转有返回原地了,崩溃。
以上4中方法都没解决我a样式的问题(这个是一直没弄好导致我放弃的直接原因)


问题4:样式的问题我当时先发了下,因为我又发现了a的不同页面无法跳转的问题
解决方法:在jquery mobile中,默认a标签是采用了ajax请求的,这就导致非ajax请求的a标签会出现各种各样的问题。在a标签上加上data-ajax=”false”就是告诉jquery mobile:这个a不是ajax请求的。(已解决)


大概就是这些了,但总给我一种还有很多问题会出现的感觉,所以如果要用这个插件,最好提前看看人家的样式,按照那个来做你的布局应该会好很多,想我之中,只想用人家的事件,天真的想忽略人家默认样式的还是慎重吧,嗯,就这样了,我去再看看原生或者zepto.

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页