JqueryMobile实践点滴

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

1、动态改变图标data-icon,这个只是改变data-icon属性是不行的,之所以会有图标是因为jquery mobile把渲染后的html代码加入了class。而class就是通过css sprint 把图标图片附加在页面上的。如果你在页面已经渲染完成后。想要改变图标图片。就必须要动态改变class。

正解: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');

2、jqueryMobile常用事件:


  • 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只有向左时触发。

可以通过下面是个4个配置文件来直到那个swipe时间的触发时机。

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

可以通过如下方式,改变上面配置的默认值

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,是指一次快速完整的轻击后触发的事件。具有触摸屏的电脑和手机特有的事件。

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

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



你可能感兴趣的:(JqueryMobile实践点滴)