XE Tips 는 제가 XE 공홈에 쓴 XE 관련 유용한 팁들입니다. 기능개선은 공홈에 안 적어둔 XE 유용 개선팁들입니다.
유용정보는 외부 검색을 통해 알아낸 소스등을 기재해둔 곳입니다.
버그 신고내역들은 XE 사용하다가 발견한 버그 패치방법들로, Core Issue 에 기록해뒀기에 XE 에 적용이 되었을 가능성이 있겠죠
제가 쓴 글들에 대해 퍼가실때는 꼭 출처를남겨주시고.. (다만 플래시뷰 기반이기에 퍼가기는조금 힘들 수 있겠죠 ^^;)
타회원의 글들도 적혀있는 출처를 같이 꼭 기재해주세요
| 출처 | laz |
|---|---|
| 출처URL | http://lazcreative.com/blog/adding-swipe-support-to-bootstrap-carousel-3-0/ |
http://lazcreative.com/blog/adding-swipe-support-to-bootstrap-carousel-3-0/
가 원본글
-----------------------------------------------
Adding swipe support to Bootstrap Carousel 3.0
With the release of bootstrap version 3, I thought it would be a good time to review my previous post on adding swipe support to bootstraps carousel and verify that everything still works as expected. After a quick wire up with a custom jQuery mobile and downloading all of the new bootstrap components I was pleased to see that nothing from my previous example was broken.
Things have changed a bit however in the year since my previous post. Newer libraries are available, different plugins, the carousel itself has some additional features such as indicators. Instead of simply updating my previous post with the new info, I thought I might delve into some of the more common questions that were asked in my previous posts and show how to do the wireups in a few of the other common touch libraries.
If you’re looking for code explanation, this post isn’t for you, refer to my previous post on this subject.
Without any further ado here are some other examples of adding swipe support to bootstraps carousel.
Adding swipe support with jQuery Mobile.
Unless you need the entire library I recommend that you build a custom version availablehere select the “touch” checkbox under events, the current minified version of that for version 1.3.2 is below (jquery.mobile.custom.min.js)
| /*! jQuery Mobile v1.3.2 | Copyright 2010, 2013 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 x(e){while(e&&typeof e.originalEvent!="undefined")e=e.originalEvent;return e}function T(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=x(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 N(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 C(t,n){var r;while(t){r=e.data(t,i);if(r&&(!n||r[n]))return t;t=t.parentNode}return null}function k(){g=!1}function L(){g=!0}function A(){E=0,v.length=0,m=!1,L()}function O(){k()}function M(){_(),c=setTimeout(function(){c=0,A()},e.vmouse.resetTimerDuration)}function _(){c&&(clearTimeout(c),c=0)}function D(t,n,r){var i;if(r&&r[t]||!r&&C(n.target,t))i=T(n,t),e(n.target).trigger(i);return i}function P(t){var n=e.data(t.target,s);if(!m&&(!E||E!==n)){var r=D("v"+t.type,t);r&&(r.isDefaultPrevented()&&t.preventDefault(),r.isPropagationStopped()&&t.stopPropagation(),r.isImmediatePropagationStopped()&&t.stopImmediatePropagation())}}function H(t){var n=x(t).touches,r,i;if(n&&n.length===1){r=t.target,i=N(r);if(i.hasVirtualBinding){E=w++,e.data(r,s,E),_(),O(),d=!1;var o=x(t).touches[0];h=o.pageX,p=o.pageY,D("vmouseover",t,i),D("vmousedown",t,i)}}}function B(e){if(g)return;d||D("vmousecancel",e,N(e.target)),d=!0,M()}function j(t){if(g)return;var n=x(t).touches[0],r=d,i=e.vmouse.moveDistanceThreshold,s=N(t.target);d=d||Math.abs(n.pageX-h)>i||Math.abs(n.pageY-p)>i,d&&!r&&D("vmousecancel",t,s),D("vmousemove",t,s),M()}function F(e){if(g)return;L();var t=N(e.target),n;D("vmouseup",e,t);if(!d){var r=D("vclick",e,t);r&&r.isDefaultPrevented()&&(n=x(e).changedTouches[0],v.push({touchID:E,x:n.clientX,y:n.clientY}),m=!0)}D("vmouseout",e,t),d=!1,M()}function I(t){var n=e.data(t,i),r;if(n)for(r in n)if(n[r])return!0;return!1}function q(){}function R(t){var n=t.substr(1);return{setup:function(r,s){I(this)||e.data(this,i,{});var o=e.data(this,i);o[t]=!0,l[t]=(l[t]||0)+1,l[t]===1&&b.bind(n,P),e(this).bind(n,q),y&&(l.touchstart=(l.touchstart||0)+1,l.touchstart===1&&b.bind("touchstart",H).bind("touchend",F).bind("touchmove",j).bind("scroll",B))},teardown:function(r,s){--l[t],l[t]||b.unbind(n,P),y&&(--l.touchstart,l.touchstart||b.unbind("touchstart",H).unbind("touchmove",j).unbind("touchend",F).unbind("scroll",B));var o=e(this),u=e.data(this,i);u&&(u[t]=!1),o.unbind(n,q),I(this)||o.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;e.vmouse={moveDistanceThreshold:10,clickDistanceThreshold:10,resetTimerDuration:1500};for(var U=0;U<o.length;U++)e.event.special[o[U]]=R(o[U]);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,r){var i=r.type;r.type=n,e.event.dispatch.call(t,r),r.type=i}var i=e(n);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)});var s=e.mobile.support.touch,o="touchmove scroll",u=s?"touchstart":"mousedown",a=s?"touchend":"mouseup",f=s?"touchmove":"mousemove";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)})}},e.event.special.tap={tapholdThreshold:750,setup:function(){var t=this,n=e(t);n.bind("vmousedown",function(r){function a(){clearTimeout(u)}function f(){a(),n.unbind("vclick",c).unbind("vmouseup",a),i.unbind("vmousecancel",f)}function c(e){f(),s===e.target&&l(t,"tap",e)}if(r.which&&r.which!==1)return!1;var s=r.target,o=r.originalEvent,u;n.bind("vmouseup",a).bind("vclick",c),i.bind("vmousecancel",f),u=setTimeout(function(){l(t,"taphold",e.Event("taphold",{target:s}))},e.event.special.tap.tapholdThreshold)})}},e.event.special.swipe={scrollSupressionThreshold:30,durationThreshold:1e3,horizontalDistanceThreshold:30,verticalDistanceThreshold:75,start:function(t){var n=t.originalEvent.touches?t.originalEvent.touches[0]:t;return{time:(new Date).getTime(),coords:[n.pageX,n.pageY],origin:e(t.target)}},stop:function(e){var t=e.originalEvent.touches?e.originalEvent.touches[0]:e;return{time:(new Date).getTime(),coords:[t.pageX,t.pageY]}},handleSwipe:function(t,n){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&&t.origin.trigger("swipe").trigger(t.coords[0]>n.coords[0]?"swipeleft":"swiperight")},setup:function(){var t=this,n=e(t);n.bind(u,function(t){function o(t){if(!i)return;s=e.event.special.swipe.stop(t),Math.abs(i.coords[0]-s.coords[0])>e.event.special.swipe.scrollSupressionThreshold&&t.preventDefault()}var i=e.event.special.swipe.start(t),s;n.bind(f,o).one(a,function(){n.unbind(f,o),i&&s&&e.event.special.swipe.handleSwipe(i,s),i=s=r})})}},e.each({scrollstop:"scrollstart",taphold:"tap",swipeleft:"swipe",swiperight:"swipe"},function(t,n){e.event.special[t]={setup:function(){e(this).bind(n,e.noop)}}})}(e,this)}); |
view rawgistfile1.js hosted with 
by GitHub
Include this as a separate file in your document source and then add the following script to enable touch support within carousel (note that #myCarousel should match the ID or class of the carousel you’re attempting to bind to).
| <script> | |
| $(document).ready(function() { | |
| $("#myCarousel").swiperight(function() { | |
| $(this).carousel('prev'); | |
| }); | |
| $("#myCarousel").swipeleft(function() { | |
| $(this).carousel('next'); | |
| }); | |
| }); | |
| </script> |
view rawgistfile1.js hosted with by GitHub
Here is a functioning demo of the jQuery Mobile example
Adding with TouchSwipe plugin
If you don’t want to use jQuery Mobile or are having issues with it, TouchSwipe is another jQuery option for you TouchSwipe Plugin download this and include it in your project. To wire up support for carousel add the following script. *Thanks to Eric for the slide indicator fix here.*
| <script> | |
| $(document).ready(function() { | |
| //Enable swiping... | |
| $(".carousel-inner").swipe( { | |
| //Generic swipe handler for all directions | |
| swipeLeft:function(event, direction, distance, duration, fingerCount) { | |
| $(this).parent().carousel('prev'); | |
| }, | |
| swipeRight: function() { | |
| $(this).parent().carousel('next'); | |
| }, | |
| //Default is 75px, set to 0 for demo so any distance triggers swipe | |
| threshold:0 | |
| }); | |
| }); | |
| </script> |
view rawgistfile1.js hosted with by GitHub
Here is a functioning demo of the TouchSwipe example
Adding support with Hammer.js
Hammer.js is designed to be a straight Javascript alternative, however Bootstrap’s carousel uses jQuery so you’ll be loading that library anyway. Hammer does work with jQuery through. Grab a copy of it Hammer.js then add the following script to your page.
| <script> | |
| $(document).ready(function() { | |
| $('#myCarousel').hammer().on('swipeleft', function(){ | |
| $(this).carousel('next'); | |
| }) | |
| $('#myCarousel').hammer().on('swiperight', function(){ | |
| $(this).carousel('prev'); | |
| }) | |
| }); | |
| </script> |
view rawgistfile1.txt hosted with by GitHub
Here is a functioning demo of the Hammer example.
Which one should I use?
That’s easy, use the one that fits your project requirements the best. Seriously. Each and every one of these libraries is under 5k minified and gzipped (unless you’re going with the full jQuery.Mobile library). Choose the one that’s the easiest for you to work with.
How do I add swipe support for more than one carousel on a page?
Adding more swipe support for more than one slider is very simple. Change your script to include additional targets. The script below is for jQuery mobile just modify it to fit the library you need.
| <script> | |
| $(document).ready(function() { | |
| //add your other targets here | |
| $("#myCarousel, #myOtherCarousel").swiperight(function() { | |
| $(this).carousel('prev'); | |
| }); | |
| //add your other targets here | |
| $("#myCarousel, #myOtherCarousel").swipeleft(function() { | |
| $(this).carousel('next'); | |
| }); | |
| }); | |
| </script> |
view rawgistfile1.txt hosted with by GitHub
Have something to add? Feel free to leave a comment below.
추천 (0)
비추천 (0)
