터치 이벤트 지원에만 jQuery Mobile을 사용하는 방법 (UI 향상 없음)?
고유 한 모양과 느낌이있는 웹 앱을 개발 중입니다. 터치 이벤트 지원에만 jQuery Mobile을 사용하고 싶습니다.
jquery.mobile.min.js를 연결하면 (css 연결없이) 페이지 레이아웃이 깨집니다.
터치 이벤트 지원 만 사용하도록 jQuery Mobile을 구성 (초기화)하려면 어떻게해야합니까? JQM 페이지 관련 이벤트가 없기 때문에 jQuery 문서 준비 후크에서 이벤트를 바인딩합니까?
편집하다
jsfiddle에서이 예제를 참조하십시오 : http://jsfiddle.net/redhotsly/JGgrw/ . html에는 왼쪽에 <button>jQuery Mobile이 생성 <span>되었습니다. 결과 마크 업 (F12)을 살펴보면 jQuery Mobile이 내 버튼에 CSS 클래스도 추가 한 것을 볼 수 있습니다.
편집하다:
JQM 스크립트를 수정하지 않을 솔루션이 필요합니다. CDN에서 공식 스크립트를 사용해야합니다.
터치 / 제스처 이벤트에 바인딩하려면 대신 jGestures를 사용합니다.
http://jgestures.codeplex.com/
이전에 프로젝트에서 사용했던 멋진 작은 jquery 플러그인은 다음과 같은 다양한 이벤트에 바인딩합니다.
사용 가능한 이벤트 :
orientationchange 장치가 시계 방향 또는 시계 반대 방향으로 회전합니다. 이 이벤트는 장치에 의해 트리거되며 내부 자이로 스코프를 사용할 수 있습니다.
핀치 핀치 제스처 중에 트리거됩니다 (두 손가락이 서로 멀어 지거나 서로를 향해 이동).
회전 회전 동작 중에 트리거됩니다 (두 손가락이 시계 방향 또는 시계 반대 방향으로 회전).
swipemove 는 스 와이프 이동 제스처 중에 트리거됩니다 (손가락이 장치 주변에서 이동, 예 : 드래그).
swipeone 은 하나의 터치 포인트로 스 와이프 이동 제스처 후에 트리거됩니다 (한 손가락이 기기 주위로 움직였습니다)
swipetwo 는 두 개의 터치 포인트가있는 스 와이프 이동 제스처 후에 트리거됩니다 (두 손가락이 장치 주위로 움직였습니다).
swipethree 터치 포인트가 3 개인 스 와이프 이동 제스처 후에 트리거됩니다 (3 개의 손가락이 기기 주위로 움직였습니다).
swipefour 터치 포인트가 4 개인 스 와이프 이동 제스처 후에 트리거됩니다 (4 개의 손가락이 기기 주위로 움직였습니다).
스 와이프 업은 엄격한 위쪽 스 와이프 이동 제스처 후에 트리거됩니다.
swiperightup 오른쪽 및 위쪽 스 와이프 이동 제스처 후에 트리거됩니다.
swiperight 엄격한 오른쪽 스 와이프 이동 제스처 후에 트리거됩니다.
swiperightdown rig * htwards 및 downwards swipe move gesture 후에 트리거됩니다.
swipedown 은 엄격한 아래쪽 스 와이프 이동 제스처 후에 트리거됩니다.
swipeleftdown 왼쪽 및 아래쪽 스 와이프 이동 제스처 후에 트리거됩니다.
swipeleft 는 엄격한 왼쪽으로 살짝 밀기 동작 후 트리거됩니다.
swipeleftup 왼쪽 및 위쪽으로 스 와이프 이동 제스처 후에 트리거됩니다.
tapone 단일 (한 손가락) 탭 제스처 후에 트리거 됨
taptwo 두 번 (두 손가락) 탭 제스처 후에 트리거 됨
tapthree 트리플 (세 손가락) 탭 제스처 후에 트리거 됨
핀치 오픈 (pinchopen) 핀치 오픈 제스처 (두 손가락이 서로 멀어짐)가 발생하고 터치 포인트 (손가락)가 장치에서 제거되면 트리거됩니다.
핀치 클로즈 핀치 클로즈 제스처 (두 손가락이 서로를 향해 이동)가 발생하고 터치 포인트 (손가락)가 장치에서 제거되면 트리거됩니다.
rotatecw 시계 방향 회전 제스처 (시계 방향으로 회전하는 두 손가락)가 발생하고 터치 포인트 (손가락)가 장치에서 제거되면 트리거됩니다.
rotateccw 시계 반대 방향 회전 제스처 (시계 반대 방향으로 회전하는 두 손가락)가 발생하고 터치 포인트 (손가락)가 장치에서 제거되면 트리거됩니다.
터치 이벤트에만 jQuery 모바일을 사용 하려면 jQuery 모바일 라이브러리를로드 하기 전에 다음 스크립트 를 추가하십시오 .
<script type="text/javascript">$(document).bind("mobileinit", function(){$.extend( $.mobile , {autoInitializePage: false})});</script>
이렇게하면 jquery mobile이 페이지를 초기화하고 DOM을 터치하지 못하므로 레이아웃이 그대로 유지됩니다.
이제 jQuery Mobile에는 원하는 부분 만 선택할 수있는 다운로드 빌더가 있습니다.이 경우 이벤트 섹션에서 터치 확인란 만 선택하면됩니다.
http://jquerymobile.com/download-builder/
이제 jQM이 분리되었습니다.
위젯 : 이제 유연한 빌드를 위해 분리되었습니다.
우리는 오랫동안 페이지 플러그인에서 모든 위젯을 분리하고 싶었고 마침내이 변경 사항을 적용했음을 발표하게되어 기쁩니다. 그렇다면 분리 된 것은 정확히 무엇을 의미할까요? 글쎄, 개별 위젯과 유틸리티는 항상 별도의 스크립트 파일로 분리되었습니다. 그러나 페이지 플러그인은 페이지 생성시 마크 업에서 발견 된 모든 공식 플러그인의 자동 초기화를 처리했습니다. 이러한 상황은 오류없이 필요하지 않은 플러그인을 제거하는 것을 불가능하게 만들었으며 일반적으로 향후 위젯 추가에 대한 나쁜 선례를 설정했습니다.
이제 jQuery Mobile 라이브러리의 거의 모든 UI 위젯이 완전히 분리되어 특정 프로젝트에 필요하지 않은 경우 간단히 삭제할 수 있습니다. 이러한 변경을 통해 필요한 핵심 파일 몇 개 외에 필요한 특정 위젯 또는 기능 세트 만 포함하여 라이브러리의 크기를 크게 줄일 수 있습니다. 더 많은 분리 및 정리를 수행 할 계획이지만 이제 다음 파일이 분리되어 사용자 지정 빌드를 수행하기 전에 make 파일에서 안전하게 제거 할 수 있습니다.
- 페이지 머리글 / 내용 / 바닥 글
- 접을 수 있는
- 제어 그룹
- fieldcontain
- fixheaderfooter
- 단추
- 확인란 라디오
- 고르다
- 슬라이더
- 텍스트 입력
- 링크 테마
- 목록보기
- navbar
- 그리드
We will work on a dependency map because a few widgets rely on others to work. For example, the button markup plugin is called by many of the widgets above, so it can only be excluded but if you’re not using any of the widgets that depend on buttons.
We’re still working out our recommendations for mapping plugin dependencies and decoupling things even further. Ultimately, this will be surfaced in a download builder tool, so stay tuned!
You can head over to their GIT Repo and just download what you want:
In case anyone else runs into this (and doesn't need the file off one of jQuery's CDNs), here are the steps I took to extract just the JQM event triggers:
git clone git@github.com:jquery/jquery-mobilecd jquery-mobile- edit
js/jquery.mobile.jsin your favorite editor - replace the
define(...);statement withdefine(['./events/touch', './events/orientationchange']); make- your events-only JQM is now in
compiled/jquery.mobile.jsandcompiled/jquery.mobile.min.js
Now you can use $(el).tap(fn) and the like without worrying about JQM highjacking your markup!
Another new option is jQuery-Mobile-Events, I've been struggle with this problem and only find this plugin useful.
The custom build from jQuery Mobile's Download Builder doesn't work for me. And jGestures doesn't have the taphold event which I need.
taking care of this particular problem at init time is nearly impossible, your best bet is to use data-role="none" on the ui element that you do not want default styling to happen on as such:
<button type="button" data-role="none">Click Me!</button>
check it out at http://jsfiddle.net/JGgrw/13/
Visit the link below and only Select TOUCH, Features that will be add are listed below each checkbox, so only select what you need and will possibly use. CDN will always include all features and will slow down the as file size will be larger but not much. I have tested and is working :)
Working Example but (Full jQuery Mobile) with all features, simple use the one below or download the latest script of official website that is Custom: https://codepen.io/binaryfever/pen/RGjKGP
http://jquerymobile.com/download-builder/ Script below only supports the following features: Touch events including: touchstart, touchmove, touchend, tap, taphold, swipe, swipeleft, swiperight, 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)});
'programing' 카테고리의 다른 글
| 모델에서 언제`save`와`save!`를 사용해야합니까? (0) | 2020.12.10 |
|---|---|
| Eclipse 프로젝트에서 Log4j.properties를 넣을 올바른 위치는 어디에 있습니까? (0) | 2020.12.10 |
| JavaFX 2.1 TableView 새로 고침 항목 (0) | 2020.12.10 |
| SQL Azure 데이터베이스에서 새 사용자를 만들려면 어떻게하나요? (0) | 2020.12.10 |
| Mac OSX에서 $ GOPATH를 설정할 수 없습니다. (0) | 2020.12.10 |