如何使用jQuery Mobile仅支持触摸事件(没有UI增强功能)?

时间:2011-12-27 19:44:45

标签: jquery jquery-mobile

我正在开发一款具有自己外观的网络应用。我想使用jQuery Mobile仅支持触摸事件。

当我链接jquery.mobile.min.js(没有链接css)时,我的页面布局被破坏了。

如何配置(初始化)jQuery Mobile以仅使用触摸事件支持?我是否会在jQuery文档就绪钩子中绑定事件,因为我没有任何与JQM页面相关的事件?

修改

在jsfiddle:http://jsfiddle.net/redhotsly/JGgrw/中查看此示例。 html包含<button>,但jQuery Mobile在其左侧创建了<span>。如果检查生成的标记(F12),您将看到jQuery Mobile还在我的按钮中添加了一个CSS类。

修改

我需要一个解决方案,我不会修改JQM脚本。我需要使用CDN上的官方脚本。

8 个答案:

答案 0 :(得分:51)

如果您只想绑定触摸/手势事件,我会使用jGestures:

http://jgestures.codeplex.com/

我曾经在项目中使用的很好的小jquery插件,可以绑定大量的事件:

  

可用事件:

     

orientationchange 设备顺时针或逆时针旋转。此事件由设备触发并可能使用   内部陀螺仪。

     

在捏合手势(两根手指彼此远离或朝向彼此移动)时触发。

     

旋转在旋转手势期间触发(两个手指顺时针或逆时针旋转)。

     

swipemove 在滑动移动手势(手指在设备周围移动,例如拖动)时触发

     

swipeone 在使用一个触点(一个手指在设备周围移动)的滑动移动手势后触发

     

swipetwo 在使用两个接触点(两个手指在设备周围移动)的滑动移动手势后触发

     

swipethree 在使用三个接触点(三个手指在设备周围移动)的滑动移动手势后触发

     

swipefour 在使用四个接触点(四个手指在设备周围移动)的滑动移动手势后触发

     

swipeup 在严格向上滑动移动手势后触发

     

swiperightup 在向右和向上滑动移动手势后触发

     

swiperight 在严格向右滑动移动手势后触发

     

swiperightdown 在钻机*向上和向下滑动移动手势后触发

     

swipedown 在严格向下滑动移动手势后触发

     

swipeleftdown 在向左和向下滑动移动手势后触发

     

swipeleft 在严格向左滑动移动手势后触发

     

swipeleftup 在向左和向上滑动移动手势后触发

     

tapone 在单个(单指)点按手势后触发

     

taptwo 在双(两指)轻击手势后触发

     

tapthree 在三声(三指)轻击​​手势后触发

     

pinchopen 当pinchopen手势(两个手指彼此远离)发生并且接触点(手指)发生时触发   删除了设备。

     

pinchclose 当pinchclose手势(两个手指朝向彼此移动)发生并且接触点(手指)发生时触发   删除了设备。

     

rotatecw 当顺时针旋转手势(两个手指顺时针旋转)发生且接触点(手指)发生时触发   删除了设备。

     

rotateccw 当逆时针旋转手势(两个手指逆时针旋转)和触点发生时触发   (手指)被移除设备。

答案 1 :(得分:47)

如果您只想将jQuery mobile用于触摸事件,请在之前添加这段脚本加载jQuery移动库:

<script type="text/javascript">$(document).bind("mobileinit", function(){$.extend(  $.mobile , {autoInitializePage: false})});</script>

这可以防止jquery mobile初始化页面并触摸DOM,从而使您的布局保持不变。

答案 2 :(得分:33)

jQuery Mobile现在有一个下载构建器,可让您只选择所需的部分,在这种情况下,您只需选择“事件”部分下的“触摸”复选框。

http://jquerymobile.com/download-builder/

答案 3 :(得分:13)

jQM现已解耦:

  

小部件:现在已经解耦,以实现灵活构建

     

我们想要将所有小部件从页面插件中分离出来   现在很长一段时间,我们很高兴地宣布,我们终于落到了这一点   更改。那究竟什么解耦意味着呢?好吧,   个别小部件和实用程序一直被打破   单独的脚本文件。但是,页面插件负责   处理自动初始化中找到的所有官方插件   页面创建时的标记。这种情况使得它无法实现   删除你不需要的插件而不会导致错误,一般情况下   为未来的小部件添加设置了一个不好的先例。

     

现在,几乎所有jQuery Mobile库中的UI小部件都是   完全解耦,所以如果不需要它们就可以简单地删除它们   特别的项目。这种变化可以让你大幅减少   通过仅包含特定的小部件组或者包含的库的大小   除了少数必需的核心文件之外,还需要您提供的功能。   虽然我们仍计划进行更多的解耦和清理,但以下情况如下   文件现在已解耦,可以安全地从make文件中删除   在进行自定义构建之前:

     
      
  • 页眉/内容/页脚
  •   
  • 可折叠
  •   
  • controlgroup
  •   
  • fieldcontain
  •   
  • fixheaderfooter
  •   
  • 按钮
  •   
  • checkboxradio
  •   
  • 选择
  •   
  • 滑块
  •   
  • 的TextInput
  •   
  • 链接主题
  •   
  • 列表视图
  •   
  • 导航栏
  •   
  •   
     

我们将处理依赖关系图,因为一些小部件依赖于其他小部件   上班。例如,按钮标记插件被许多人调用   上面的小部件,所以它只能排除,但如果你不使用   任何依赖于按钮的小部件。

     

我们仍在制定映射插件的建议   依赖性和进一步解耦的东西。最终,这会   请在下载构建器工具中显示,敬请关注!

您可以访问他们的GIT回购并下载您想要的内容:

答案 4 :(得分:5)

如果有其他人遇到这个(并且不需要jQuery的CDN之一的文件),这里是我采取的仅仅提取JQM事件触发器的步骤:

  1. git clone git@github.com:jquery/jquery-mobile
  2. cd jquery-mobile
  3. 在您喜欢的编辑器中修改js/jquery.mobile.js
  4. define(...);语句替换为define(['./events/touch', './events/orientationchange']);
  5. make
  6. 您的仅限活动的JQM现在位于compiled/jquery.mobile.jscompiled/jquery.mobile.min.js
  7. 现在您可以使用$(el).tap(fn)之类,而不必担心JQM会劫持您的标记!

答案 5 :(得分:5)

另一个新选项是jQuery-Mobile-Events,我一直在努力解决这个问题,只发现这个插件很有用。

jQuery Mobile的Download Builder的自定义构建对我不起作用。 jGestures没有我需要的taphold事件。

答案 6 :(得分:2)

在初始化时处理这个特殊问题几乎是不可能的,最好的办法是在你不希望默认样式发生的ui元素上使用data-role =“none”:

<button type="button" data-role="none">Click Me!</button>​​​​​​​​​

http://jsfiddle.net/JGgrw/13/

查看

答案 7 :(得分:0)

访问下面的链接,然后仅选择“选择”,每个复选框下方都会列出要添加的功能,因此请仅选择您需要的功能和可能使用的功能。 CDN将始终包含所有功能,并且会变慢,因为文件大小会更大但不会太大。我已经测试过并且正在工作:)

工作示例,但是(具有完整的jQuery Mobile)具有所有功能,请简单使用以下功能或下载自定义官方网站的最新脚本: https://codepen.io/binaryfever/pen/RGjKGP

http://jquerymobile.com/download-builder/ 以下脚本仅支持以下功能: 触摸事件包括: touchstart,touchmove,touchend,tap,taphold,滑动,向左滑动,向右滑动,scrollstart,scrollstop。

/*! jQuery Mobile _ Custom Touch Only - v1.4.5 | Copyright 2010, 2014 jQuery Foundation, Inc. | jquery.org/license */

(function(e,t,n){typeof define=="function"&&define.amd?define(["jquery"],function(r){return n(r,e,t),r.mobile}):n(e.jQuery,e,t)})(this,document,function(e,t,n,r){(function(e,t,n,r){function T(e){while(e&&typeof e.originalEvent!="undefined")e=e.originalEvent;return e}function N(t,n){var i=t.type,s,o,a,l,c,h,p,d,v;t=e.Event(t),t.type=n,s=t.originalEvent,o=e.event.props,i.search(/^(mouse|click)/)>-1&&(o=f);if(s)for(p=o.length,l;p;)l=o[--p],t[l]=s[l];i.search(/mouse(down|up)|click/)>-1&&!t.which&&(t.which=1);if(i.search(/^touch/)!==-1){a=T(s),i=a.touches,c=a.changedTouches,h=i&&i.length?i[0]:c&&c.length?c[0]:r;if(h)for(d=0,v=u.length;d<v;d++)l=u[d],t[l]=h[l]}return t}function C(t){var n={},r,s;while(t){r=e.data(t,i);for(s in r)r[s]&&(n[s]=n.hasVirtualBinding=!0);t=t.parentNode}return n}function k(t,n){var r;while(t){r=e.data(t,i);if(r&&(!n||r[n]))return t;t=t.parentNode}return null}function L(){g=!1}function A(){g=!0}function O(){E=0,v.length=0,m=!1,A()}function M(){L()}function _(){D(),c=setTimeout(function(){c=0,O()},e.vmouse.resetTimerDuration)}function D(){c&&(clearTimeout(c),c=0)}function P(t,n,r){var i;if(r&&r[t]||!r&&k(n.target,t))i=N(n,t),e(n.target).trigger(i);return i}function H(t){var n=e.data(t.target,s),r;!m&&(!E||E!==n)&&(r=P("v"+t.type,t),r&&(r.isDefaultPrevented()&&t.preventDefault(),r.isPropagationStopped()&&t.stopPropagation(),r.isImmediatePropagationStopped()&&t.stopImmediatePropagation()))}function B(t){var n=T(t).touches,r,i,o;n&&n.length===1&&(r=t.target,i=C(r),i.hasVirtualBinding&&(E=w++,e.data(r,s,E),D(),M(),d=!1,o=T(t).touches[0],h=o.pageX,p=o.pageY,P("vmouseover",t,i),P("vmousedown",t,i)))}function j(e){if(g)return;d||P("vmousecancel",e,C(e.target)),d=!0,_()}function F(t){if(g)return;var n=T(t).touches[0],r=d,i=e.vmouse.moveDistanceThreshold,s=C(t.target);d=d||Math.abs(n.pageX-h)>i||Math.abs(n.pageY-p)>i,d&&!r&&P("vmousecancel",t,s),P("vmousemove",t,s),_()}function I(e){if(g)return;A();var t=C(e.target),n,r;P("vmouseup",e,t),d||(n=P("vclick",e,t),n&&n.isDefaultPrevented()&&(r=T(e).changedTouches[0],v.push({touchID:E,x:r.clientX,y:r.clientY}),m=!0)),P("vmouseout",e,t),d=!1,_()}function q(t){var n=e.data(t,i),r;if(n)for(r in n)if(n[r])return!0;return!1}function R(){}function U(t){var n=t.substr(1);return{setup:function(){q(this)||e.data(this,i,{});var r=e.data(this,i);r[t]=!0,l[t]=(l[t]||0)+1,l[t]===1&&b.bind(n,H),e(this).bind(n,R),y&&(l.touchstart=(l.touchstart||0)+1,l.touchstart===1&&b.bind("touchstart",B).bind("touchend",I).bind("touchmove",F).bind("scroll",j))},teardown:function(){--l[t],l[t]||b.unbind(n,H),y&&(--l.touchstart,l.touchstart||b.unbind("touchstart",B).unbind("touchmove",F).unbind("touchend",I).unbind("scroll",j));var r=e(this),s=e.data(this,i);s&&(s[t]=!1),r.unbind(n,R),q(this)||r.removeData(i)}}}var i="virtualMouseBindings",s="virtualTouchID",o="vmouseover vmousedown vmousemove vmouseup vclick vmouseout vmousecancel".split(" "),u="clientX clientY pageX pageY screenX screenY".split(" "),a=e.event.mouseHooks?e.event.mouseHooks.props:[],f=e.event.props.concat(a),l={},c=0,h=0,p=0,d=!1,v=[],m=!1,g=!1,y="addEventListener"in n,b=e(n),w=1,E=0,S,x;e.vmouse={moveDistanceThreshold:10,clickDistanceThreshold:10,resetTimerDuration:1500};for(x=0;x<o.length;x++)e.event.special[o[x]]=U(o[x]);y&&n.addEventListener("click",function(t){var n=v.length,r=t.target,i,o,u,a,f,l;if(n){i=t.clientX,o=t.clientY,S=e.vmouse.clickDistanceThreshold,u=r;while(u){for(a=0;a<n;a++){f=v[a],l=0;if(u===r&&Math.abs(f.x-i)<S&&Math.abs(f.y-o)<S||e.data(u,s)===f.touchID){t.preventDefault(),t.stopPropagation();return}}u=u.parentNode}}},!0)})(e,t,n),function(e){e.mobile={}}(e),function(e,t){var r={touch:"ontouchend"in n};e.mobile.support=e.mobile.support||{},e.extend(e.support,r),e.extend(e.mobile.support,r)}(e),function(e,t,r){function l(t,n,i,s){var o=i.type;i.type=n,s?e.event.trigger(i,r,t):e.event.dispatch.call(t,i),i.type=o}var i=e(n),s=e.mobile.support.touch,o="touchmove scroll",u=s?"touchstart":"mousedown",a=s?"touchend":"mouseup",f=s?"touchmove":"mousemove";e.each("touchstart touchmove touchend tap taphold swipe swipeleft swiperight scrollstart scrollstop".split(" "),function(t,n){e.fn[n]=function(e){return e?this.bind(n,e):this.trigger(n)},e.attrFn&&(e.attrFn[n]=!0)}),e.event.special.scrollstart={enabled:!0,setup:function(){function s(e,n){r=n,l(t,r?"scrollstart":"scrollstop",e)}var t=this,n=e(t),r,i;n.bind(o,function(t){if(!e.event.special.scrollstart.enabled)return;r||s(t,!0),clearTimeout(i),i=setTimeout(function(){s(t,!1)},50)})},teardown:function(){e(this).unbind(o)}},e.event.special.tap={tapholdThreshold:750,emitTapOnTaphold:!0,setup:function(){var t=this,n=e(t),r=!1;n.bind("vmousedown",function(s){function a(){clearTimeout(u)}function f(){a(),n.unbind("vclick",c).unbind("vmouseup",a),i.unbind("vmousecancel",f)}function c(e){f(),!r&&o===e.target?l(t,"tap",e):r&&e.preventDefault()}r=!1;if(s.which&&s.which!==1)return!1;var o=s.target,u;n.bind("vmouseup",a).bind("vclick",c),i.bind("vmousecancel",f),u=setTimeout(function(){e.event.special.tap.emitTapOnTaphold||(r=!0),l(t,"taphold",e.Event("taphold",{target:o}))},e.event.special.tap.tapholdThreshold)})},teardown:function(){e(this).unbind("vmousedown").unbind("vclick").unbind("vmouseup"),i.unbind("vmousecancel")}},e.event.special.swipe={scrollSupressionThreshold:30,durationThreshold:1e3,horizontalDistanceThreshold:30,verticalDistanceThreshold:30,getLocation:function(e){var n=t.pageXOffset,r=t.pageYOffset,i=e.clientX,s=e.clientY;if(e.pageY===0&&Math.floor(s)>Math.floor(e.pageY)||e.pageX===0&&Math.floor(i)>Math.floor(e.pageX))i-=n,s-=r;else if(s<e.pageY-r||i<e.pageX-n)i=e.pageX-n,s=e.pageY-r;return{x:i,y:s}},start:function(t){var n=t.originalEvent.touches?t.originalEvent.touches[0]:t,r=e.event.special.swipe.getLocation(n);return{time:(new Date).getTime(),coords:[r.x,r.y],origin:e(t.target)}},stop:function(t){var n=t.originalEvent.touches?t.originalEvent.touches[0]:t,r=e.event.special.swipe.getLocation(n);return{time:(new Date).getTime(),coords:[r.x,r.y]}},handleSwipe:function(t,n,r,i){if(n.time-t.time<e.event.special.swipe.durationThreshold&&Math.abs(t.coords[0]-n.coords[0])>e.event.special.swipe.horizontalDistanceThreshold&&Math.abs(t.coords[1]-n.coords[1])<e.event.special.swipe.verticalDistanceThreshold){var s=t.coords[0]>n.coords[0]?"swipeleft":"swiperight";return l(r,"swipe",e.Event("swipe",{target:i,swipestart:t,swipestop:n}),!0),l(r,s,e.Event(s,{target:i,swipestart:t,swipestop:n}),!0),!0}return!1},eventInProgress:!1,setup:function(){var t,n=this,r=e(n),s={};t=e.data(this,"mobile-events"),t||(t={length:0},e.data(this,"mobile-events",t)),t.length++,t.swipe=s,s.start=function(t){if(e.event.special.swipe.eventInProgress)return;e.event.special.swipe.eventInProgress=!0;var r,o=e.event.special.swipe.start(t),u=t.target,l=!1;s.move=function(t){if(!o||t.isDefaultPrevented())return;r=e.event.special.swipe.stop(t),l||(l=e.event.special.swipe.handleSwipe(o,r,n,u),l&&(e.event.special.swipe.eventInProgress=!1)),Math.abs(o.coords[0]-r.coords[0])>e.event.special.swipe.scrollSupressionThreshold&&t.preventDefault()},s.stop=function(){l=!0,e.event.special.swipe.eventInProgress=!1,i.off(f,s.move),s.move=null},i.on(f,s.move).one(a,s.stop)},r.on(u,s.start)},teardown:function(){var t,n;t=e.data(this,"mobile-events"),t&&(n=t.swipe,delete t.swipe,t.length--,t.length===0&&e.removeData(this,"mobile-events")),n&&(n.start&&e(this).off(u,n.start),n.move&&i.off(f,n.move),n.stop&&i.off(a,n.stop))}},e.each({scrollstop:"scrollstart",taphold:"tap",swipeleft:"swipe.left",swiperight:"swipe.right"},function(t,n){e.event.special[t]={setup:function(){e(this).bind(n,e.noop)},teardown:function(){e(this).unbind(n)}}})}(e,this)});