JqueryMobile实践点滴

时间 2019-12-01

原文原文链接

最近在用JqueryMobile写点东西，就遇到的一些小问题加以记录，也但愿能帮到遇到相同问题的朋友。

一、动态改变图标data-icon，这个只是改变data-icon属性是不行的，之因此会有图标是由于jquery mobile把渲染后的html代码加入了class。而class就是经过css sprint 把图标图片附加在页面上的。若是你在页面已经渲染完成后。想要改变图标图片。就必需要动态改变class。 javascript

正解：jQuery.mobile.activePage.find('#ad_search').attr('data-icon','arrow-d').trigger('create').find('.ui-icon').removeClass('ui-icon-arrow-r').addClass('ui-icon-arrow-d'); css

二、jqueryMobile经常使用事件： html

pageshow是在页面切换后显示以后，触发的事件。
pagechange是在页面切换成功后，触发的事件。使用$.mobile.changePage()来切换页面，此方法触发2个事件，切换以前的pagebeforechange事件，和切换完成后pagechange（成功）或者pagechangefailed（失败）
pagebeforehide是在页面切换后老页面隐藏以前，触发的事件。
pagebeforecreate是在页面DOM建立以前，触发的事件。通常来讲，jQuery Mobile自动初始化页面，如一个input元素的type为range的时，jQuery Mobile自动为此元素生成一个slide滚动条。jQuery也提供自定义的页面初始化函数。让自定义的函数代替系统自动的初始化。在页面的每一次的显示or隐藏，都会触发页面初始化事件。
taphold，是指轻击而且不放后触发的事件。具备触摸屏的电脑和手机特有的事件。
swipe，是指在一秒内，水平方向拖拽大于30px，or 垂直方向拖拽小于20px时触发的事件。多长时间拖拽多少px能够配置。swipeleft与swipe的惟一区别就是拖拽滑动的方向。swipe向左，向右拖拽，都会被触发，但swipeleft只有向左时触发。 java

能够经过下面是个4个配置文件来直到那个swipe时间的触发时机。 jquery

scrollSupressionThreshold : 抑制滚动px。默认10px。水平方向拖拽大于这个值，将不触发
durationThreshold ：超过这个时间，就不触发事件。默认1000ms
horizontalDistanceThreshold ：水平方向滑动超过这个值才会触发事件。默认30px
verticalDistanceThreshold ：垂直方向，滑动小于这个数字才会触发事件。默认75px

能够经过以下方式，改变上面配置的默认值 ios

1.

2.

3.

4.

$.event.special.swipe.scrollSupressionThreshold = 20;

$.event.special.swipe.durationThreshold = 2000;

$.event.special.swipe.horizontalDistanceThreshold = 40;

$.event.special.swipe.verticalDistanceThreshold = 50;

pageload是在任何页面成功加载以后触发的事件。使用preventDefault()使得确定调用回调函数来处理该事件。
updatelayout是在框架中的组件show·hide时，被触发的事件。触发的事件中，通知别的组件，自身的大小，位置发生了变化，相关联的组件请作相关的变化。
scrollstop是页面滚动中止时触发的事件。
orientationchange，是指设备的方向发生变化时触发的事件。绑定此事件时，回调函数的第2个参数，是用来描述设备的属性。表示是哪一个方向的变化，横向or纵向的改变。对于浏览器来讲，经过屏幕的高宽的变化，来触发orientationchange事件，是有些困难的。因此，若是要真的想经过高宽的改变来控制，仍是建议禁用。$.mobile.orientationChangeEnabled = false能够禁用此功能。
vmouseover是触摸环境下touch，和非触摸环境下mouseover的事件。
vmousedown是触摸环境下touch start，和非触摸环境下mousedown的事件。
tab，是指一次快速完整的轻击后触发的事件。具备触摸屏的电脑和手机特有的事件。

三、taphold事件在ios上与自带的长按事件冲突。 web

正解：加样式a {
-webkit-touch-callout:none!important;
},或者event.preventDefault();或者禁止页面全部弹出窗function OnLoad()
{
document.documentElement.style.webkitTouchCallout = "none"; //禁止弹出菜单
document.documentElement.style.webkitUserSelect = "none";//禁止选中
}
<body onload="OnLoad()"> 浏览器