From 63067710c679cc0154746102209d07cd9ec11bb7 Mon Sep 17 00:00:00 2001
From: qiaohua <shengyan1985@gmail.com>
Date: Sun, 1 Dec 2013 11:44:29 +0800
Subject: [PATCH] U: data-role -> data-switchable-role, fix #32

---
 HISTORY.md               |  3 +++
 dist/accordion-debug.js  |  2 +-
 dist/accordion.js        |  2 +-
 dist/carousel-debug.js   |  4 ++--
 dist/carousel.js         |  2 +-
 dist/slide-debug.js      |  2 +-
 dist/slide.js            |  2 +-
 dist/switchable-debug.js |  2 +-
 dist/switchable.js       |  2 +-
 dist/tabs-debug.js       |  2 +-
 dist/tabs.js             |  2 +-
 examples/accordion.md    | 16 ++++++++--------
 examples/autorender.md   | 30 +++++++++++++++---------------
 examples/carousel.md     | 12 ++++++------
 examples/index.md        | 10 +++++-----
 examples/slide.md        | 12 ++++++------
 src/carousel.js          |  2 +-
 src/switchable.js        |  6 +++---
 tests/switchable-spec.js | 10 +++++-----
 19 files changed, 63 insertions(+), 60 deletions(-)

diff --git a/HISTORY.md b/HISTORY.md
index a619e1e..8cf16e1 100644
--- a/HISTORY.md
+++ b/HISTORY.md
@@ -5,6 +5,9 @@
 ## 1.0.2
 
 `tag:improved` 有些地方 `$(selector, element)` 改成 `this.$(selector)`, 查找当前 element 下的元素
+
+`tag:improved` [#32](https://github.com/aralejs/switchable/issues/32) data-role 应该换成 data-switchable-role
+
 `tag:fixed` [#33](https://github.com/aralejs/switchable/issues/33) Effect width max value in 360.
 
 ## 1.0.1
diff --git a/dist/accordion-debug.js b/dist/accordion-debug.js
index ce3ad2a..4e99ac9 100644
--- a/dist/accordion-debug.js
+++ b/dist/accordion-debug.js
@@ -116,7 +116,7 @@ define("arale/switchable/1.0.2/switchable-debug", [ "$-debug", "arale/widget/1.1
             var role = {};
             var roles = [ "trigger", "panel", "nav", "content" ];
             $.each(roles, function(index, key) {
-                var elems = self.$("[data-role=" + key + "]");
+                var elems = self.$("[data-switchable-role=" + key + "]");
                 if (elems.length) {
                     role[key] = elems;
                 }
diff --git a/dist/accordion.js b/dist/accordion.js
index 4bc90a1..0b19184 100644
--- a/dist/accordion.js
+++ b/dist/accordion.js
@@ -1 +1 @@
-define("arale/switchable/1.0.2/accordion",["./switchable","$","arale/widget/1.1.1/widget","arale/base/1.1.1/base","arale/class/1.1.0/class","arale/events/1.1.0/events","./plugins/effects","arale/easing/1.0.0/easing","./plugins/autoplay","./plugins/circular"],function(a,b,c){var d=a("./switchable"),e=d.extend({attrs:{triggerType:"click",multiple:!1,autoplay:!1},switchTo:function(a){this.get("multiple")?this._switchTo(a,a):d.prototype.switchTo.call(this,a)},_switchTrigger:function(a,b){this.get("multiple")?this.get("triggers").eq(a).toggleClass(this.get("activeTriggerClass")):d.prototype._switchTrigger.call(this,a,b)},_switchPanel:function(a){this.get("multiple")?a.toPanels.toggle():d.prototype._switchPanel.call(this,a)}});c.exports=e}),define("arale/switchable/1.0.2/switchable",["$","arale/widget/1.1.1/widget","arale/base/1.1.1/base","arale/class/1.1.0/class","arale/events/1.1.0/events","arale/switchable/1.0.2/plugins/effects","arale/easing/1.0.0/easing","arale/switchable/1.0.2/plugins/autoplay","arale/switchable/1.0.2/plugins/circular"],function(a,b,c){function d(a,b,c,d){for(var e=f("<ul>"),g=0;a>g;g++){var h=g===b?c:"";f("<li>",{"class":h,html:g+1}).appendTo(e)}return d?e.children():e}function e(a){return{UI_SWITCHABLE:a||"",NAV_CLASS:a?a+"-nav":"",CONTENT_CLASS:a?a+"-content":"",TRIGGER_CLASS:a?a+"-trigger":"",PANEL_CLASS:a?a+"-panel":"",PREV_BTN_CLASS:a?a+"-prev-btn":"",NEXT_BTN_CLASS:a?a+"-next-btn":""}}var f=a("$"),g=a("arale/widget/1.1.1/widget"),h=a("arale/switchable/1.0.2/plugins/effects"),i=a("arale/switchable/1.0.2/plugins/autoplay"),j=a("arale/switchable/1.0.2/plugins/circular"),k=g.extend({attrs:{triggers:{value:[],getter:function(a){return f(a)}},panels:{value:[],getter:function(a){return f(a)}},classPrefix:"ui-switchable",hasTriggers:!0,triggerType:"hover",delay:100,activeIndex:{value:0,setter:function(a){return parseInt(a)||0}},step:1,length:{readOnly:!0,getter:function(){return Math.ceil(this.get("panels").length/this.get("step"))}},viewSize:[],activeTriggerClass:{getter:function(a){return a?a:this.get("classPrefix")+"-active"}}},setup:function(){this._initConstClass(),this._initElement();var a=this._getDatasetRole();this._initPanels(a),this._initTriggers(a),this._bindTriggers(),this._initPlugins(),this.render()},_initConstClass:function(){this.CONST=e(this.get("classPrefix"))},_initElement:function(){this.element.addClass(this.CONST.UI_SWITCHABLE)},_getDatasetRole:function(){var a=this,b={},c=["trigger","panel","nav","content"];return f.each(c,function(c,d){var e=a.$("[data-role="+d+"]");e.length&&(b[d]=e)}),b},_initPanels:function(a){var b=this.get("panels");if(b.length>0||(a.panel?this.set("panels",b=a.panel):a.content&&(this.set("panels",b=a.content.find("> *")),this.content=a.content)),0===b.length)throw new Error("panels.length is ZERO");this.content||(this.content=b.parent()),this.content.addClass(this.CONST.CONTENT_CLASS),this.get("panels").addClass(this.CONST.PANEL_CLASS)},_initTriggers:function(a){var b=this.get("triggers");b.length>0||(a.trigger?this.set("triggers",b=a.trigger):a.nav?(b=a.nav.find("> *"),0===b.length&&(b=d(this.get("length"),this.get("activeIndex"),this.get("activeTriggerClass"),!0).appendTo(a.nav)),this.set("triggers",b),this.nav=a.nav):this.get("hasTriggers")&&(this.nav=d(this.get("length"),this.get("activeIndex"),this.get("activeTriggerClass")).appendTo(this.element),this.set("triggers",b=this.nav.children()))),!this.nav&&b.length&&(this.nav=b.parent()),this.nav&&this.nav.addClass(this.CONST.NAV_CLASS),b.addClass(this.CONST.TRIGGER_CLASS).each(function(a,b){f(b).data("value",a)})},_bindTriggers:function(){function a(a){c._onFocusTrigger(a.type,f(this).data("value"))}function b(){clearTimeout(c._switchTimer)}var c=this,d=this.get("triggers");"click"===this.get("triggerType")?d.click(a):d.hover(a,b)},_onFocusTrigger:function(a,b){var c=this;"click"===a?this.switchTo(b):this._switchTimer=setTimeout(function(){c.switchTo(b)},this.get("delay"))},_initPlugins:function(){this._plugins=[],this._plug(h),this._plug(i),this._plug(j)},switchTo:function(a){this.set("activeIndex",a)},_onRenderActiveIndex:function(a,b){this._switchTo(a,b)},_switchTo:function(a,b){this.trigger("switch",a,b),this._switchTrigger(a,b),this._switchPanel(this._getPanelInfo(a,b)),this.trigger("switched",a,b),this._isBackward=void 0},_switchTrigger:function(a,b){var c=this.get("triggers");c.length<1||(c.eq(b).removeClass(this.get("activeTriggerClass")),c.eq(a).addClass(this.get("activeTriggerClass")))},_switchPanel:function(a){a.fromPanels.hide(),a.toPanels.show()},_getPanelInfo:function(a,b){var c,d,e=this.get("panels").get(),g=this.get("step");return b>-1&&(c=e.slice(b*g,(b+1)*g)),d=e.slice(a*g,(a+1)*g),{toIndex:a,fromIndex:b,toPanels:f(d),fromPanels:f(c)}},prev:function(){this._isBackward=!0;var a=this.get("activeIndex"),b=(a-1+this.get("length"))%this.get("length");this.switchTo(b)},next:function(){this._isBackward=!1;var a=this.get("activeIndex"),b=(a+1)%this.get("length");this.switchTo(b)},_plug:function(a){var b=a.attrs;if(b)for(var c in b)!b.hasOwnProperty(c)||c in this.attrs||this.set(c,b[c]);a.isNeeded.call(this)&&(a.install&&a.install.call(this),this._plugins.push(a))},destroy:function(){var a=this;f.each(this._plugins,function(b,c){c.destroy&&c.destroy.call(a)}),k.superclass.destroy.call(this)}});c.exports=k}),define("arale/switchable/1.0.2/plugins/effects",["$","arale/easing/1.0.0/easing"],function(a,b,c){var d=a("$");a("arale/easing/1.0.0/easing");var e="scrollx",f="scrolly",g="fade";c.exports={attrs:{effect:"none",easing:"linear",duration:500},isNeeded:function(){return"none"!==this.get("effect")},install:function(){var a=this.get("panels");a.show();var b=this.get("effect"),c=this.get("step"),f=d.isFunction(b);if(f||0!==b.indexOf("scroll")){if(!f&&b===g){var i=this.get("activeIndex"),j=i*c,k=j+c-1;a.each(function(a,b){var c=a>=j&&k>=a;d(b).css({opacity:c?1:0,position:"absolute",zIndex:c?9:1})})}}else{var l=this.content,m=a.eq(0);l.css("position","relative"),"static"===l.parent().css("position")&&l.parent().css("position","relative"),b===e&&(a.css("float","left"),l.width("35791197px"));var n=this.get("viewSize");if(n[0]||(n[0]=m.outerWidth()*c,n[1]=m.outerHeight()*c,this.set("viewSize",n)),!n[0])throw new Error("Please specify viewSize manually")}this._switchPanel=function(a){var b=this.get("effect"),c=d.isFunction(b)?b:h[b];c.call(this,a)}}};var h={fade:function(a){if(this.get("step")>1)throw new Error('Effect "fade" only supports step === 1');var b=a.fromPanels.eq(0),c=a.toPanels.eq(0);if(this.anim&&this.anim.stop(!1,!0),c.css("opacity",1),c.show(),a.fromIndex>-1){var d=this,e=this.get("duration"),f=this.get("easing");this.anim=b.animate({opacity:0},e,f,function(){d.anim=null,c.css("zIndex",9),b.css("zIndex",1),b.css("display","none")})}else c.css("zIndex",9)},scroll:function(a){var b=this.get("effect")===e,c=this.get("viewSize")[b?0:1]*a.toIndex,d={};if(d[b?"left":"top"]=-c+"px",this.anim&&this.anim.stop(),a.fromIndex>-1){var f=this,g=this.get("duration"),h=this.get("easing");this.anim=this.content.animate(d,g,h,function(){f.anim=null})}else this.content.css(d)}};h[f]=h.scroll,h[e]=h.scroll,c.exports.Effects=h}),define("arale/switchable/1.0.2/plugins/autoplay",["$"],function(a,b,c){function d(a,b){function c(){c.stop(),d=setTimeout(a,b)}b=b||200;var d;return c.stop=function(){d&&(clearTimeout(d),d=0)},c}function e(a){var b=g.scrollTop(),c=b+g.height(),d=a.offset().top,e=d+a.height();return c>d&&e>b}var f=a("$"),g=f(window);c.exports={attrs:{autoplay:!1,interval:5e3},isNeeded:function(){return this.get("autoplay")},install:function(){function a(){b(),j.paused=!1,c=setInterval(function(){j.paused||j.next()},i)}function b(){c&&(clearInterval(c),c=null),j.paused=!0}var c,f=this.element,h="."+this.cid,i=this.get("interval"),j=this;a(),this.stop=b,this.start=a,this._scrollDetect=d(function(){j[e(f)?"start":"stop"]()}),g.on("scroll"+h,this._scrollDetect),this.element.hover(b,a)},destroy:function(){var a="."+this.cid;this.stop&&this.stop(),this._scrollDetect&&(this._scrollDetect.stop(),g.off("scroll"+a))}}}),define("arale/switchable/1.0.2/plugins/circular",["$","arale/switchable/1.0.2/plugins/effects","arale/easing/1.0.0/easing"],function(a,b,c){function d(a,b,c){var d=this.get("step"),e=this.get("length"),g=a?e-1:0,h=g*d,i=(g+1)*d,j=a?c:-c*e,k=a?-c*e:c*e,l=f(this.get("panels").get().slice(h,i));return l.css("position","relative"),l.css(b,k+"px"),j}function e(a,b,c){var d=this.get("step"),e=this.get("length"),g=a?e-1:0,h=g*d,i=(g+1)*d,j=f(this.get("panels").get().slice(h,i));j.css("position",""),j.css(b,""),this.content.css(b,a?-c*(e-1):"")}var f=a("$"),g="scrollx",h="scrolly",i=a("arale/switchable/1.0.2/plugins/effects").Effects;c.exports={isNeeded:function(){var a=this.get("effect"),b=this.get("circular");return b&&(a===g||a===h)},install:function(){this._scrollType=this.get("effect"),this.set("effect","scrollCircular")}},i.scrollCircular=function(a){var b=a.toIndex,c=a.fromIndex,f=this._scrollType===g,h=f?"left":"top",i=this.get("viewSize")[f?0:1],j=-i*b,k={};if(k[h]=j+"px",c>-1){this.anim&&this.anim.stop(!1,!0);var l=this.get("length"),m=0===c&&b===l-1,n=c===l-1&&0===b,o=void 0===this._isBackward?c>b:this._isBackward,p=o&&m||!o&&n;p&&(j=d.call(this,o,h,i),k[h]=j+"px");var q=this.get("duration"),r=this.get("easing"),s=this;this.anim=this.content.animate(k,q,r,function(){s.anim=null,p&&e.call(s,o,h,i)})}else this.content.css(k)}});
+define("arale/switchable/1.0.2/accordion",["./switchable","$","arale/widget/1.1.1/widget","arale/base/1.1.1/base","arale/class/1.1.0/class","arale/events/1.1.0/events","./plugins/effects","arale/easing/1.0.0/easing","./plugins/autoplay","./plugins/circular"],function(a,b,c){var d=a("./switchable"),e=d.extend({attrs:{triggerType:"click",multiple:!1,autoplay:!1},switchTo:function(a){this.get("multiple")?this._switchTo(a,a):d.prototype.switchTo.call(this,a)},_switchTrigger:function(a,b){this.get("multiple")?this.get("triggers").eq(a).toggleClass(this.get("activeTriggerClass")):d.prototype._switchTrigger.call(this,a,b)},_switchPanel:function(a){this.get("multiple")?a.toPanels.toggle():d.prototype._switchPanel.call(this,a)}});c.exports=e}),define("arale/switchable/1.0.2/switchable",["$","arale/widget/1.1.1/widget","arale/base/1.1.1/base","arale/class/1.1.0/class","arale/events/1.1.0/events","arale/switchable/1.0.2/plugins/effects","arale/easing/1.0.0/easing","arale/switchable/1.0.2/plugins/autoplay","arale/switchable/1.0.2/plugins/circular"],function(a,b,c){function d(a,b,c,d){for(var e=f("<ul>"),g=0;a>g;g++){var h=g===b?c:"";f("<li>",{"class":h,html:g+1}).appendTo(e)}return d?e.children():e}function e(a){return{UI_SWITCHABLE:a||"",NAV_CLASS:a?a+"-nav":"",CONTENT_CLASS:a?a+"-content":"",TRIGGER_CLASS:a?a+"-trigger":"",PANEL_CLASS:a?a+"-panel":"",PREV_BTN_CLASS:a?a+"-prev-btn":"",NEXT_BTN_CLASS:a?a+"-next-btn":""}}var f=a("$"),g=a("arale/widget/1.1.1/widget"),h=a("arale/switchable/1.0.2/plugins/effects"),i=a("arale/switchable/1.0.2/plugins/autoplay"),j=a("arale/switchable/1.0.2/plugins/circular"),k=g.extend({attrs:{triggers:{value:[],getter:function(a){return f(a)}},panels:{value:[],getter:function(a){return f(a)}},classPrefix:"ui-switchable",hasTriggers:!0,triggerType:"hover",delay:100,activeIndex:{value:0,setter:function(a){return parseInt(a)||0}},step:1,length:{readOnly:!0,getter:function(){return Math.ceil(this.get("panels").length/this.get("step"))}},viewSize:[],activeTriggerClass:{getter:function(a){return a?a:this.get("classPrefix")+"-active"}}},setup:function(){this._initConstClass(),this._initElement();var a=this._getDatasetRole();this._initPanels(a),this._initTriggers(a),this._bindTriggers(),this._initPlugins(),this.render()},_initConstClass:function(){this.CONST=e(this.get("classPrefix"))},_initElement:function(){this.element.addClass(this.CONST.UI_SWITCHABLE)},_getDatasetRole:function(){var a=this,b={},c=["trigger","panel","nav","content"];return f.each(c,function(c,d){var e=a.$("[data-switchable-role="+d+"]");e.length&&(b[d]=e)}),b},_initPanels:function(a){var b=this.get("panels");if(b.length>0||(a.panel?this.set("panels",b=a.panel):a.content&&(this.set("panels",b=a.content.find("> *")),this.content=a.content)),0===b.length)throw new Error("panels.length is ZERO");this.content||(this.content=b.parent()),this.content.addClass(this.CONST.CONTENT_CLASS),this.get("panels").addClass(this.CONST.PANEL_CLASS)},_initTriggers:function(a){var b=this.get("triggers");b.length>0||(a.trigger?this.set("triggers",b=a.trigger):a.nav?(b=a.nav.find("> *"),0===b.length&&(b=d(this.get("length"),this.get("activeIndex"),this.get("activeTriggerClass"),!0).appendTo(a.nav)),this.set("triggers",b),this.nav=a.nav):this.get("hasTriggers")&&(this.nav=d(this.get("length"),this.get("activeIndex"),this.get("activeTriggerClass")).appendTo(this.element),this.set("triggers",b=this.nav.children()))),!this.nav&&b.length&&(this.nav=b.parent()),this.nav&&this.nav.addClass(this.CONST.NAV_CLASS),b.addClass(this.CONST.TRIGGER_CLASS).each(function(a,b){f(b).data("value",a)})},_bindTriggers:function(){function a(a){c._onFocusTrigger(a.type,f(this).data("value"))}function b(){clearTimeout(c._switchTimer)}var c=this,d=this.get("triggers");"click"===this.get("triggerType")?d.click(a):d.hover(a,b)},_onFocusTrigger:function(a,b){var c=this;"click"===a?this.switchTo(b):this._switchTimer=setTimeout(function(){c.switchTo(b)},this.get("delay"))},_initPlugins:function(){this._plugins=[],this._plug(h),this._plug(i),this._plug(j)},switchTo:function(a){this.set("activeIndex",a)},_onRenderActiveIndex:function(a,b){this._switchTo(a,b)},_switchTo:function(a,b){this.trigger("switch",a,b),this._switchTrigger(a,b),this._switchPanel(this._getPanelInfo(a,b)),this.trigger("switched",a,b),this._isBackward=void 0},_switchTrigger:function(a,b){var c=this.get("triggers");c.length<1||(c.eq(b).removeClass(this.get("activeTriggerClass")),c.eq(a).addClass(this.get("activeTriggerClass")))},_switchPanel:function(a){a.fromPanels.hide(),a.toPanels.show()},_getPanelInfo:function(a,b){var c,d,e=this.get("panels").get(),g=this.get("step");return b>-1&&(c=e.slice(b*g,(b+1)*g)),d=e.slice(a*g,(a+1)*g),{toIndex:a,fromIndex:b,toPanels:f(d),fromPanels:f(c)}},prev:function(){this._isBackward=!0;var a=this.get("activeIndex"),b=(a-1+this.get("length"))%this.get("length");this.switchTo(b)},next:function(){this._isBackward=!1;var a=this.get("activeIndex"),b=(a+1)%this.get("length");this.switchTo(b)},_plug:function(a){var b=a.attrs;if(b)for(var c in b)!b.hasOwnProperty(c)||c in this.attrs||this.set(c,b[c]);a.isNeeded.call(this)&&(a.install&&a.install.call(this),this._plugins.push(a))},destroy:function(){var a=this;f.each(this._plugins,function(b,c){c.destroy&&c.destroy.call(a)}),k.superclass.destroy.call(this)}});c.exports=k}),define("arale/switchable/1.0.2/plugins/effects",["$","arale/easing/1.0.0/easing"],function(a,b,c){var d=a("$");a("arale/easing/1.0.0/easing");var e="scrollx",f="scrolly",g="fade";c.exports={attrs:{effect:"none",easing:"linear",duration:500},isNeeded:function(){return"none"!==this.get("effect")},install:function(){var a=this.get("panels");a.show();var b=this.get("effect"),c=this.get("step"),f=d.isFunction(b);if(f||0!==b.indexOf("scroll")){if(!f&&b===g){var i=this.get("activeIndex"),j=i*c,k=j+c-1;a.each(function(a,b){var c=a>=j&&k>=a;d(b).css({opacity:c?1:0,position:"absolute",zIndex:c?9:1})})}}else{var l=this.content,m=a.eq(0);l.css("position","relative"),"static"===l.parent().css("position")&&l.parent().css("position","relative"),b===e&&(a.css("float","left"),l.width("35791197px"));var n=this.get("viewSize");if(n[0]||(n[0]=m.outerWidth()*c,n[1]=m.outerHeight()*c,this.set("viewSize",n)),!n[0])throw new Error("Please specify viewSize manually")}this._switchPanel=function(a){var b=this.get("effect"),c=d.isFunction(b)?b:h[b];c.call(this,a)}}};var h={fade:function(a){if(this.get("step")>1)throw new Error('Effect "fade" only supports step === 1');var b=a.fromPanels.eq(0),c=a.toPanels.eq(0);if(this.anim&&this.anim.stop(!1,!0),c.css("opacity",1),c.show(),a.fromIndex>-1){var d=this,e=this.get("duration"),f=this.get("easing");this.anim=b.animate({opacity:0},e,f,function(){d.anim=null,c.css("zIndex",9),b.css("zIndex",1),b.css("display","none")})}else c.css("zIndex",9)},scroll:function(a){var b=this.get("effect")===e,c=this.get("viewSize")[b?0:1]*a.toIndex,d={};if(d[b?"left":"top"]=-c+"px",this.anim&&this.anim.stop(),a.fromIndex>-1){var f=this,g=this.get("duration"),h=this.get("easing");this.anim=this.content.animate(d,g,h,function(){f.anim=null})}else this.content.css(d)}};h[f]=h.scroll,h[e]=h.scroll,c.exports.Effects=h}),define("arale/switchable/1.0.2/plugins/autoplay",["$"],function(a,b,c){function d(a,b){function c(){c.stop(),d=setTimeout(a,b)}b=b||200;var d;return c.stop=function(){d&&(clearTimeout(d),d=0)},c}function e(a){var b=g.scrollTop(),c=b+g.height(),d=a.offset().top,e=d+a.height();return c>d&&e>b}var f=a("$"),g=f(window);c.exports={attrs:{autoplay:!1,interval:5e3},isNeeded:function(){return this.get("autoplay")},install:function(){function a(){b(),j.paused=!1,c=setInterval(function(){j.paused||j.next()},i)}function b(){c&&(clearInterval(c),c=null),j.paused=!0}var c,f=this.element,h="."+this.cid,i=this.get("interval"),j=this;a(),this.stop=b,this.start=a,this._scrollDetect=d(function(){j[e(f)?"start":"stop"]()}),g.on("scroll"+h,this._scrollDetect),this.element.hover(b,a)},destroy:function(){var a="."+this.cid;this.stop&&this.stop(),this._scrollDetect&&(this._scrollDetect.stop(),g.off("scroll"+a))}}}),define("arale/switchable/1.0.2/plugins/circular",["$","arale/switchable/1.0.2/plugins/effects","arale/easing/1.0.0/easing"],function(a,b,c){function d(a,b,c){var d=this.get("step"),e=this.get("length"),g=a?e-1:0,h=g*d,i=(g+1)*d,j=a?c:-c*e,k=a?-c*e:c*e,l=f(this.get("panels").get().slice(h,i));return l.css("position","relative"),l.css(b,k+"px"),j}function e(a,b,c){var d=this.get("step"),e=this.get("length"),g=a?e-1:0,h=g*d,i=(g+1)*d,j=f(this.get("panels").get().slice(h,i));j.css("position",""),j.css(b,""),this.content.css(b,a?-c*(e-1):"")}var f=a("$"),g="scrollx",h="scrolly",i=a("arale/switchable/1.0.2/plugins/effects").Effects;c.exports={isNeeded:function(){var a=this.get("effect"),b=this.get("circular");return b&&(a===g||a===h)},install:function(){this._scrollType=this.get("effect"),this.set("effect","scrollCircular")}},i.scrollCircular=function(a){var b=a.toIndex,c=a.fromIndex,f=this._scrollType===g,h=f?"left":"top",i=this.get("viewSize")[f?0:1],j=-i*b,k={};if(k[h]=j+"px",c>-1){this.anim&&this.anim.stop(!1,!0);var l=this.get("length"),m=0===c&&b===l-1,n=c===l-1&&0===b,o=void 0===this._isBackward?c>b:this._isBackward,p=o&&m||!o&&n;p&&(j=d.call(this,o,h,i),k[h]=j+"px");var q=this.get("duration"),r=this.get("easing"),s=this;this.anim=this.content.animate(k,q,r,function(){s.anim=null,p&&e.call(s,o,h,i)})}else this.content.css(k)}});
diff --git a/dist/carousel-debug.js b/dist/carousel-debug.js
index 8595b75..0b48d99 100644
--- a/dist/carousel-debug.js
+++ b/dist/carousel-debug.js
@@ -42,7 +42,7 @@ define("arale/switchable/1.0.2/carousel-debug", [ "./switchable-debug", "$-debug
             var self = this;
             var roles = [ "next", "prev" ];
             $.each(roles, function(index, key) {
-                var elems = self.$("[data-role=" + key + "]");
+                var elems = self.$("[data-switchable-role=" + key + "]");
                 if (elems.length) {
                     role[key] = elems;
                 }
@@ -172,7 +172,7 @@ define("arale/switchable/1.0.2/switchable-debug", [ "$-debug", "arale/widget/1.1
             var role = {};
             var roles = [ "trigger", "panel", "nav", "content" ];
             $.each(roles, function(index, key) {
-                var elems = self.$("[data-role=" + key + "]");
+                var elems = self.$("[data-switchable-role=" + key + "]");
                 if (elems.length) {
                     role[key] = elems;
                 }
diff --git a/dist/carousel.js b/dist/carousel.js
index 46e50b3..3227ef9 100644
--- a/dist/carousel.js
+++ b/dist/carousel.js
@@ -1 +1 @@
-define("arale/switchable/1.0.2/carousel",["./switchable","$","arale/widget/1.1.1/widget","arale/base/1.1.1/base","arale/class/1.1.0/class","arale/events/1.1.0/events","./plugins/effects","arale/easing/1.0.0/easing","./plugins/autoplay","./plugins/circular"],function(a,b,c){var d=a("./switchable"),e=a("$");c.exports=d.extend({attrs:{circular:!0,prevBtn:{getter:function(a){return e(a).eq(0)}},nextBtn:{getter:function(a){return e(a).eq(0)}},disabledBtnClass:{getter:function(a){return a?a:this.get("classPrefix")+"-disabled-btn"}}},_initTriggers:function(a){d.prototype._initTriggers.call(this,a);var b=this.get("prevBtn"),c=this.get("nextBtn");!b[0]&&a.prev&&(b=a.prev,this.set("prevBtn",b)),!c[0]&&a.next&&(c=a.next,this.set("nextBtn",c)),b.addClass(this.CONST.PREV_BTN_CLASS),c.addClass(this.CONST.NEXT_BTN_CLASS)},_getDatasetRole:function(){var a=d.prototype._getDatasetRole.call(this),b=this,c=["next","prev"];return e.each(c,function(c,d){var e=b.$("[data-role="+d+"]");e.length&&(a[d]=e)}),a},_bindTriggers:function(){d.prototype._bindTriggers.call(this);var a=this,b=this.get("circular");this.get("prevBtn").click(function(c){c.preventDefault(),(b||a.get("activeIndex")>0)&&a.prev()}),this.get("nextBtn").click(function(c){c.preventDefault();var d=a.get("length")-1;(b||a.get("activeIndex")<d)&&a.next()}),b||this.on("switch",function(b){a._updateButtonStatus(b)})},_updateButtonStatus:function(a){var b=this.get("prevBtn"),c=this.get("nextBtn"),d=this.get("disabledBtnClass");b.removeClass(d),c.removeClass(d),0===a?b.addClass(d):a===this.get("length")-1&&c.addClass(d)}})}),define("arale/switchable/1.0.2/switchable",["$","arale/widget/1.1.1/widget","arale/base/1.1.1/base","arale/class/1.1.0/class","arale/events/1.1.0/events","arale/switchable/1.0.2/plugins/effects","arale/easing/1.0.0/easing","arale/switchable/1.0.2/plugins/autoplay","arale/switchable/1.0.2/plugins/circular"],function(a,b,c){function d(a,b,c,d){for(var e=f("<ul>"),g=0;a>g;g++){var h=g===b?c:"";f("<li>",{"class":h,html:g+1}).appendTo(e)}return d?e.children():e}function e(a){return{UI_SWITCHABLE:a||"",NAV_CLASS:a?a+"-nav":"",CONTENT_CLASS:a?a+"-content":"",TRIGGER_CLASS:a?a+"-trigger":"",PANEL_CLASS:a?a+"-panel":"",PREV_BTN_CLASS:a?a+"-prev-btn":"",NEXT_BTN_CLASS:a?a+"-next-btn":""}}var f=a("$"),g=a("arale/widget/1.1.1/widget"),h=a("arale/switchable/1.0.2/plugins/effects"),i=a("arale/switchable/1.0.2/plugins/autoplay"),j=a("arale/switchable/1.0.2/plugins/circular"),k=g.extend({attrs:{triggers:{value:[],getter:function(a){return f(a)}},panels:{value:[],getter:function(a){return f(a)}},classPrefix:"ui-switchable",hasTriggers:!0,triggerType:"hover",delay:100,activeIndex:{value:0,setter:function(a){return parseInt(a)||0}},step:1,length:{readOnly:!0,getter:function(){return Math.ceil(this.get("panels").length/this.get("step"))}},viewSize:[],activeTriggerClass:{getter:function(a){return a?a:this.get("classPrefix")+"-active"}}},setup:function(){this._initConstClass(),this._initElement();var a=this._getDatasetRole();this._initPanels(a),this._initTriggers(a),this._bindTriggers(),this._initPlugins(),this.render()},_initConstClass:function(){this.CONST=e(this.get("classPrefix"))},_initElement:function(){this.element.addClass(this.CONST.UI_SWITCHABLE)},_getDatasetRole:function(){var a=this,b={},c=["trigger","panel","nav","content"];return f.each(c,function(c,d){var e=a.$("[data-role="+d+"]");e.length&&(b[d]=e)}),b},_initPanels:function(a){var b=this.get("panels");if(b.length>0||(a.panel?this.set("panels",b=a.panel):a.content&&(this.set("panels",b=a.content.find("> *")),this.content=a.content)),0===b.length)throw new Error("panels.length is ZERO");this.content||(this.content=b.parent()),this.content.addClass(this.CONST.CONTENT_CLASS),this.get("panels").addClass(this.CONST.PANEL_CLASS)},_initTriggers:function(a){var b=this.get("triggers");b.length>0||(a.trigger?this.set("triggers",b=a.trigger):a.nav?(b=a.nav.find("> *"),0===b.length&&(b=d(this.get("length"),this.get("activeIndex"),this.get("activeTriggerClass"),!0).appendTo(a.nav)),this.set("triggers",b),this.nav=a.nav):this.get("hasTriggers")&&(this.nav=d(this.get("length"),this.get("activeIndex"),this.get("activeTriggerClass")).appendTo(this.element),this.set("triggers",b=this.nav.children()))),!this.nav&&b.length&&(this.nav=b.parent()),this.nav&&this.nav.addClass(this.CONST.NAV_CLASS),b.addClass(this.CONST.TRIGGER_CLASS).each(function(a,b){f(b).data("value",a)})},_bindTriggers:function(){function a(a){c._onFocusTrigger(a.type,f(this).data("value"))}function b(){clearTimeout(c._switchTimer)}var c=this,d=this.get("triggers");"click"===this.get("triggerType")?d.click(a):d.hover(a,b)},_onFocusTrigger:function(a,b){var c=this;"click"===a?this.switchTo(b):this._switchTimer=setTimeout(function(){c.switchTo(b)},this.get("delay"))},_initPlugins:function(){this._plugins=[],this._plug(h),this._plug(i),this._plug(j)},switchTo:function(a){this.set("activeIndex",a)},_onRenderActiveIndex:function(a,b){this._switchTo(a,b)},_switchTo:function(a,b){this.trigger("switch",a,b),this._switchTrigger(a,b),this._switchPanel(this._getPanelInfo(a,b)),this.trigger("switched",a,b),this._isBackward=void 0},_switchTrigger:function(a,b){var c=this.get("triggers");c.length<1||(c.eq(b).removeClass(this.get("activeTriggerClass")),c.eq(a).addClass(this.get("activeTriggerClass")))},_switchPanel:function(a){a.fromPanels.hide(),a.toPanels.show()},_getPanelInfo:function(a,b){var c,d,e=this.get("panels").get(),g=this.get("step");return b>-1&&(c=e.slice(b*g,(b+1)*g)),d=e.slice(a*g,(a+1)*g),{toIndex:a,fromIndex:b,toPanels:f(d),fromPanels:f(c)}},prev:function(){this._isBackward=!0;var a=this.get("activeIndex"),b=(a-1+this.get("length"))%this.get("length");this.switchTo(b)},next:function(){this._isBackward=!1;var a=this.get("activeIndex"),b=(a+1)%this.get("length");this.switchTo(b)},_plug:function(a){var b=a.attrs;if(b)for(var c in b)!b.hasOwnProperty(c)||c in this.attrs||this.set(c,b[c]);a.isNeeded.call(this)&&(a.install&&a.install.call(this),this._plugins.push(a))},destroy:function(){var a=this;f.each(this._plugins,function(b,c){c.destroy&&c.destroy.call(a)}),k.superclass.destroy.call(this)}});c.exports=k}),define("arale/switchable/1.0.2/plugins/effects",["$","arale/easing/1.0.0/easing"],function(a,b,c){var d=a("$");a("arale/easing/1.0.0/easing");var e="scrollx",f="scrolly",g="fade";c.exports={attrs:{effect:"none",easing:"linear",duration:500},isNeeded:function(){return"none"!==this.get("effect")},install:function(){var a=this.get("panels");a.show();var b=this.get("effect"),c=this.get("step"),f=d.isFunction(b);if(f||0!==b.indexOf("scroll")){if(!f&&b===g){var i=this.get("activeIndex"),j=i*c,k=j+c-1;a.each(function(a,b){var c=a>=j&&k>=a;d(b).css({opacity:c?1:0,position:"absolute",zIndex:c?9:1})})}}else{var l=this.content,m=a.eq(0);l.css("position","relative"),"static"===l.parent().css("position")&&l.parent().css("position","relative"),b===e&&(a.css("float","left"),l.width("35791197px"));var n=this.get("viewSize");if(n[0]||(n[0]=m.outerWidth()*c,n[1]=m.outerHeight()*c,this.set("viewSize",n)),!n[0])throw new Error("Please specify viewSize manually")}this._switchPanel=function(a){var b=this.get("effect"),c=d.isFunction(b)?b:h[b];c.call(this,a)}}};var h={fade:function(a){if(this.get("step")>1)throw new Error('Effect "fade" only supports step === 1');var b=a.fromPanels.eq(0),c=a.toPanels.eq(0);if(this.anim&&this.anim.stop(!1,!0),c.css("opacity",1),c.show(),a.fromIndex>-1){var d=this,e=this.get("duration"),f=this.get("easing");this.anim=b.animate({opacity:0},e,f,function(){d.anim=null,c.css("zIndex",9),b.css("zIndex",1),b.css("display","none")})}else c.css("zIndex",9)},scroll:function(a){var b=this.get("effect")===e,c=this.get("viewSize")[b?0:1]*a.toIndex,d={};if(d[b?"left":"top"]=-c+"px",this.anim&&this.anim.stop(),a.fromIndex>-1){var f=this,g=this.get("duration"),h=this.get("easing");this.anim=this.content.animate(d,g,h,function(){f.anim=null})}else this.content.css(d)}};h[f]=h.scroll,h[e]=h.scroll,c.exports.Effects=h}),define("arale/switchable/1.0.2/plugins/autoplay",["$"],function(a,b,c){function d(a,b){function c(){c.stop(),d=setTimeout(a,b)}b=b||200;var d;return c.stop=function(){d&&(clearTimeout(d),d=0)},c}function e(a){var b=g.scrollTop(),c=b+g.height(),d=a.offset().top,e=d+a.height();return c>d&&e>b}var f=a("$"),g=f(window);c.exports={attrs:{autoplay:!1,interval:5e3},isNeeded:function(){return this.get("autoplay")},install:function(){function a(){b(),j.paused=!1,c=setInterval(function(){j.paused||j.next()},i)}function b(){c&&(clearInterval(c),c=null),j.paused=!0}var c,f=this.element,h="."+this.cid,i=this.get("interval"),j=this;a(),this.stop=b,this.start=a,this._scrollDetect=d(function(){j[e(f)?"start":"stop"]()}),g.on("scroll"+h,this._scrollDetect),this.element.hover(b,a)},destroy:function(){var a="."+this.cid;this.stop&&this.stop(),this._scrollDetect&&(this._scrollDetect.stop(),g.off("scroll"+a))}}}),define("arale/switchable/1.0.2/plugins/circular",["$","arale/switchable/1.0.2/plugins/effects","arale/easing/1.0.0/easing"],function(a,b,c){function d(a,b,c){var d=this.get("step"),e=this.get("length"),g=a?e-1:0,h=g*d,i=(g+1)*d,j=a?c:-c*e,k=a?-c*e:c*e,l=f(this.get("panels").get().slice(h,i));return l.css("position","relative"),l.css(b,k+"px"),j}function e(a,b,c){var d=this.get("step"),e=this.get("length"),g=a?e-1:0,h=g*d,i=(g+1)*d,j=f(this.get("panels").get().slice(h,i));j.css("position",""),j.css(b,""),this.content.css(b,a?-c*(e-1):"")}var f=a("$"),g="scrollx",h="scrolly",i=a("arale/switchable/1.0.2/plugins/effects").Effects;c.exports={isNeeded:function(){var a=this.get("effect"),b=this.get("circular");return b&&(a===g||a===h)},install:function(){this._scrollType=this.get("effect"),this.set("effect","scrollCircular")}},i.scrollCircular=function(a){var b=a.toIndex,c=a.fromIndex,f=this._scrollType===g,h=f?"left":"top",i=this.get("viewSize")[f?0:1],j=-i*b,k={};if(k[h]=j+"px",c>-1){this.anim&&this.anim.stop(!1,!0);var l=this.get("length"),m=0===c&&b===l-1,n=c===l-1&&0===b,o=void 0===this._isBackward?c>b:this._isBackward,p=o&&m||!o&&n;p&&(j=d.call(this,o,h,i),k[h]=j+"px");var q=this.get("duration"),r=this.get("easing"),s=this;this.anim=this.content.animate(k,q,r,function(){s.anim=null,p&&e.call(s,o,h,i)})}else this.content.css(k)}});
+define("arale/switchable/1.0.2/carousel",["./switchable","$","arale/widget/1.1.1/widget","arale/base/1.1.1/base","arale/class/1.1.0/class","arale/events/1.1.0/events","./plugins/effects","arale/easing/1.0.0/easing","./plugins/autoplay","./plugins/circular"],function(a,b,c){var d=a("./switchable"),e=a("$");c.exports=d.extend({attrs:{circular:!0,prevBtn:{getter:function(a){return e(a).eq(0)}},nextBtn:{getter:function(a){return e(a).eq(0)}},disabledBtnClass:{getter:function(a){return a?a:this.get("classPrefix")+"-disabled-btn"}}},_initTriggers:function(a){d.prototype._initTriggers.call(this,a);var b=this.get("prevBtn"),c=this.get("nextBtn");!b[0]&&a.prev&&(b=a.prev,this.set("prevBtn",b)),!c[0]&&a.next&&(c=a.next,this.set("nextBtn",c)),b.addClass(this.CONST.PREV_BTN_CLASS),c.addClass(this.CONST.NEXT_BTN_CLASS)},_getDatasetRole:function(){var a=d.prototype._getDatasetRole.call(this),b=this,c=["next","prev"];return e.each(c,function(c,d){var e=b.$("[data-switchable-role="+d+"]");e.length&&(a[d]=e)}),a},_bindTriggers:function(){d.prototype._bindTriggers.call(this);var a=this,b=this.get("circular");this.get("prevBtn").click(function(c){c.preventDefault(),(b||a.get("activeIndex")>0)&&a.prev()}),this.get("nextBtn").click(function(c){c.preventDefault();var d=a.get("length")-1;(b||a.get("activeIndex")<d)&&a.next()}),b||this.on("switch",function(b){a._updateButtonStatus(b)})},_updateButtonStatus:function(a){var b=this.get("prevBtn"),c=this.get("nextBtn"),d=this.get("disabledBtnClass");b.removeClass(d),c.removeClass(d),0===a?b.addClass(d):a===this.get("length")-1&&c.addClass(d)}})}),define("arale/switchable/1.0.2/switchable",["$","arale/widget/1.1.1/widget","arale/base/1.1.1/base","arale/class/1.1.0/class","arale/events/1.1.0/events","arale/switchable/1.0.2/plugins/effects","arale/easing/1.0.0/easing","arale/switchable/1.0.2/plugins/autoplay","arale/switchable/1.0.2/plugins/circular"],function(a,b,c){function d(a,b,c,d){for(var e=f("<ul>"),g=0;a>g;g++){var h=g===b?c:"";f("<li>",{"class":h,html:g+1}).appendTo(e)}return d?e.children():e}function e(a){return{UI_SWITCHABLE:a||"",NAV_CLASS:a?a+"-nav":"",CONTENT_CLASS:a?a+"-content":"",TRIGGER_CLASS:a?a+"-trigger":"",PANEL_CLASS:a?a+"-panel":"",PREV_BTN_CLASS:a?a+"-prev-btn":"",NEXT_BTN_CLASS:a?a+"-next-btn":""}}var f=a("$"),g=a("arale/widget/1.1.1/widget"),h=a("arale/switchable/1.0.2/plugins/effects"),i=a("arale/switchable/1.0.2/plugins/autoplay"),j=a("arale/switchable/1.0.2/plugins/circular"),k=g.extend({attrs:{triggers:{value:[],getter:function(a){return f(a)}},panels:{value:[],getter:function(a){return f(a)}},classPrefix:"ui-switchable",hasTriggers:!0,triggerType:"hover",delay:100,activeIndex:{value:0,setter:function(a){return parseInt(a)||0}},step:1,length:{readOnly:!0,getter:function(){return Math.ceil(this.get("panels").length/this.get("step"))}},viewSize:[],activeTriggerClass:{getter:function(a){return a?a:this.get("classPrefix")+"-active"}}},setup:function(){this._initConstClass(),this._initElement();var a=this._getDatasetRole();this._initPanels(a),this._initTriggers(a),this._bindTriggers(),this._initPlugins(),this.render()},_initConstClass:function(){this.CONST=e(this.get("classPrefix"))},_initElement:function(){this.element.addClass(this.CONST.UI_SWITCHABLE)},_getDatasetRole:function(){var a=this,b={},c=["trigger","panel","nav","content"];return f.each(c,function(c,d){var e=a.$("[data-switchable-role="+d+"]");e.length&&(b[d]=e)}),b},_initPanels:function(a){var b=this.get("panels");if(b.length>0||(a.panel?this.set("panels",b=a.panel):a.content&&(this.set("panels",b=a.content.find("> *")),this.content=a.content)),0===b.length)throw new Error("panels.length is ZERO");this.content||(this.content=b.parent()),this.content.addClass(this.CONST.CONTENT_CLASS),this.get("panels").addClass(this.CONST.PANEL_CLASS)},_initTriggers:function(a){var b=this.get("triggers");b.length>0||(a.trigger?this.set("triggers",b=a.trigger):a.nav?(b=a.nav.find("> *"),0===b.length&&(b=d(this.get("length"),this.get("activeIndex"),this.get("activeTriggerClass"),!0).appendTo(a.nav)),this.set("triggers",b),this.nav=a.nav):this.get("hasTriggers")&&(this.nav=d(this.get("length"),this.get("activeIndex"),this.get("activeTriggerClass")).appendTo(this.element),this.set("triggers",b=this.nav.children()))),!this.nav&&b.length&&(this.nav=b.parent()),this.nav&&this.nav.addClass(this.CONST.NAV_CLASS),b.addClass(this.CONST.TRIGGER_CLASS).each(function(a,b){f(b).data("value",a)})},_bindTriggers:function(){function a(a){c._onFocusTrigger(a.type,f(this).data("value"))}function b(){clearTimeout(c._switchTimer)}var c=this,d=this.get("triggers");"click"===this.get("triggerType")?d.click(a):d.hover(a,b)},_onFocusTrigger:function(a,b){var c=this;"click"===a?this.switchTo(b):this._switchTimer=setTimeout(function(){c.switchTo(b)},this.get("delay"))},_initPlugins:function(){this._plugins=[],this._plug(h),this._plug(i),this._plug(j)},switchTo:function(a){this.set("activeIndex",a)},_onRenderActiveIndex:function(a,b){this._switchTo(a,b)},_switchTo:function(a,b){this.trigger("switch",a,b),this._switchTrigger(a,b),this._switchPanel(this._getPanelInfo(a,b)),this.trigger("switched",a,b),this._isBackward=void 0},_switchTrigger:function(a,b){var c=this.get("triggers");c.length<1||(c.eq(b).removeClass(this.get("activeTriggerClass")),c.eq(a).addClass(this.get("activeTriggerClass")))},_switchPanel:function(a){a.fromPanels.hide(),a.toPanels.show()},_getPanelInfo:function(a,b){var c,d,e=this.get("panels").get(),g=this.get("step");return b>-1&&(c=e.slice(b*g,(b+1)*g)),d=e.slice(a*g,(a+1)*g),{toIndex:a,fromIndex:b,toPanels:f(d),fromPanels:f(c)}},prev:function(){this._isBackward=!0;var a=this.get("activeIndex"),b=(a-1+this.get("length"))%this.get("length");this.switchTo(b)},next:function(){this._isBackward=!1;var a=this.get("activeIndex"),b=(a+1)%this.get("length");this.switchTo(b)},_plug:function(a){var b=a.attrs;if(b)for(var c in b)!b.hasOwnProperty(c)||c in this.attrs||this.set(c,b[c]);a.isNeeded.call(this)&&(a.install&&a.install.call(this),this._plugins.push(a))},destroy:function(){var a=this;f.each(this._plugins,function(b,c){c.destroy&&c.destroy.call(a)}),k.superclass.destroy.call(this)}});c.exports=k}),define("arale/switchable/1.0.2/plugins/effects",["$","arale/easing/1.0.0/easing"],function(a,b,c){var d=a("$");a("arale/easing/1.0.0/easing");var e="scrollx",f="scrolly",g="fade";c.exports={attrs:{effect:"none",easing:"linear",duration:500},isNeeded:function(){return"none"!==this.get("effect")},install:function(){var a=this.get("panels");a.show();var b=this.get("effect"),c=this.get("step"),f=d.isFunction(b);if(f||0!==b.indexOf("scroll")){if(!f&&b===g){var i=this.get("activeIndex"),j=i*c,k=j+c-1;a.each(function(a,b){var c=a>=j&&k>=a;d(b).css({opacity:c?1:0,position:"absolute",zIndex:c?9:1})})}}else{var l=this.content,m=a.eq(0);l.css("position","relative"),"static"===l.parent().css("position")&&l.parent().css("position","relative"),b===e&&(a.css("float","left"),l.width("35791197px"));var n=this.get("viewSize");if(n[0]||(n[0]=m.outerWidth()*c,n[1]=m.outerHeight()*c,this.set("viewSize",n)),!n[0])throw new Error("Please specify viewSize manually")}this._switchPanel=function(a){var b=this.get("effect"),c=d.isFunction(b)?b:h[b];c.call(this,a)}}};var h={fade:function(a){if(this.get("step")>1)throw new Error('Effect "fade" only supports step === 1');var b=a.fromPanels.eq(0),c=a.toPanels.eq(0);if(this.anim&&this.anim.stop(!1,!0),c.css("opacity",1),c.show(),a.fromIndex>-1){var d=this,e=this.get("duration"),f=this.get("easing");this.anim=b.animate({opacity:0},e,f,function(){d.anim=null,c.css("zIndex",9),b.css("zIndex",1),b.css("display","none")})}else c.css("zIndex",9)},scroll:function(a){var b=this.get("effect")===e,c=this.get("viewSize")[b?0:1]*a.toIndex,d={};if(d[b?"left":"top"]=-c+"px",this.anim&&this.anim.stop(),a.fromIndex>-1){var f=this,g=this.get("duration"),h=this.get("easing");this.anim=this.content.animate(d,g,h,function(){f.anim=null})}else this.content.css(d)}};h[f]=h.scroll,h[e]=h.scroll,c.exports.Effects=h}),define("arale/switchable/1.0.2/plugins/autoplay",["$"],function(a,b,c){function d(a,b){function c(){c.stop(),d=setTimeout(a,b)}b=b||200;var d;return c.stop=function(){d&&(clearTimeout(d),d=0)},c}function e(a){var b=g.scrollTop(),c=b+g.height(),d=a.offset().top,e=d+a.height();return c>d&&e>b}var f=a("$"),g=f(window);c.exports={attrs:{autoplay:!1,interval:5e3},isNeeded:function(){return this.get("autoplay")},install:function(){function a(){b(),j.paused=!1,c=setInterval(function(){j.paused||j.next()},i)}function b(){c&&(clearInterval(c),c=null),j.paused=!0}var c,f=this.element,h="."+this.cid,i=this.get("interval"),j=this;a(),this.stop=b,this.start=a,this._scrollDetect=d(function(){j[e(f)?"start":"stop"]()}),g.on("scroll"+h,this._scrollDetect),this.element.hover(b,a)},destroy:function(){var a="."+this.cid;this.stop&&this.stop(),this._scrollDetect&&(this._scrollDetect.stop(),g.off("scroll"+a))}}}),define("arale/switchable/1.0.2/plugins/circular",["$","arale/switchable/1.0.2/plugins/effects","arale/easing/1.0.0/easing"],function(a,b,c){function d(a,b,c){var d=this.get("step"),e=this.get("length"),g=a?e-1:0,h=g*d,i=(g+1)*d,j=a?c:-c*e,k=a?-c*e:c*e,l=f(this.get("panels").get().slice(h,i));return l.css("position","relative"),l.css(b,k+"px"),j}function e(a,b,c){var d=this.get("step"),e=this.get("length"),g=a?e-1:0,h=g*d,i=(g+1)*d,j=f(this.get("panels").get().slice(h,i));j.css("position",""),j.css(b,""),this.content.css(b,a?-c*(e-1):"")}var f=a("$"),g="scrollx",h="scrolly",i=a("arale/switchable/1.0.2/plugins/effects").Effects;c.exports={isNeeded:function(){var a=this.get("effect"),b=this.get("circular");return b&&(a===g||a===h)},install:function(){this._scrollType=this.get("effect"),this.set("effect","scrollCircular")}},i.scrollCircular=function(a){var b=a.toIndex,c=a.fromIndex,f=this._scrollType===g,h=f?"left":"top",i=this.get("viewSize")[f?0:1],j=-i*b,k={};if(k[h]=j+"px",c>-1){this.anim&&this.anim.stop(!1,!0);var l=this.get("length"),m=0===c&&b===l-1,n=c===l-1&&0===b,o=void 0===this._isBackward?c>b:this._isBackward,p=o&&m||!o&&n;p&&(j=d.call(this,o,h,i),k[h]=j+"px");var q=this.get("duration"),r=this.get("easing"),s=this;this.anim=this.content.animate(k,q,r,function(){s.anim=null,p&&e.call(s,o,h,i)})}else this.content.css(k)}});
diff --git a/dist/slide-debug.js b/dist/slide-debug.js
index ed16e1c..14ff55b 100644
--- a/dist/slide-debug.js
+++ b/dist/slide-debug.js
@@ -92,7 +92,7 @@ define("arale/switchable/1.0.2/switchable-debug", [ "$-debug", "arale/widget/1.1
             var role = {};
             var roles = [ "trigger", "panel", "nav", "content" ];
             $.each(roles, function(index, key) {
-                var elems = self.$("[data-role=" + key + "]");
+                var elems = self.$("[data-switchable-role=" + key + "]");
                 if (elems.length) {
                     role[key] = elems;
                 }
diff --git a/dist/slide.js b/dist/slide.js
index 79b735b..9bbf9c4 100644
--- a/dist/slide.js
+++ b/dist/slide.js
@@ -1 +1 @@
-define("arale/switchable/1.0.2/slide",["./switchable","$","arale/widget/1.1.1/widget","arale/base/1.1.1/base","arale/class/1.1.0/class","arale/events/1.1.0/events","./plugins/effects","arale/easing/1.0.0/easing","./plugins/autoplay","./plugins/circular"],function(a,b,c){var d=a("./switchable");c.exports=d.extend({attrs:{autoplay:!0,circular:!0}})}),define("arale/switchable/1.0.2/switchable",["$","arale/widget/1.1.1/widget","arale/base/1.1.1/base","arale/class/1.1.0/class","arale/events/1.1.0/events","arale/switchable/1.0.2/plugins/effects","arale/easing/1.0.0/easing","arale/switchable/1.0.2/plugins/autoplay","arale/switchable/1.0.2/plugins/circular"],function(a,b,c){function d(a,b,c,d){for(var e=f("<ul>"),g=0;a>g;g++){var h=g===b?c:"";f("<li>",{"class":h,html:g+1}).appendTo(e)}return d?e.children():e}function e(a){return{UI_SWITCHABLE:a||"",NAV_CLASS:a?a+"-nav":"",CONTENT_CLASS:a?a+"-content":"",TRIGGER_CLASS:a?a+"-trigger":"",PANEL_CLASS:a?a+"-panel":"",PREV_BTN_CLASS:a?a+"-prev-btn":"",NEXT_BTN_CLASS:a?a+"-next-btn":""}}var f=a("$"),g=a("arale/widget/1.1.1/widget"),h=a("arale/switchable/1.0.2/plugins/effects"),i=a("arale/switchable/1.0.2/plugins/autoplay"),j=a("arale/switchable/1.0.2/plugins/circular"),k=g.extend({attrs:{triggers:{value:[],getter:function(a){return f(a)}},panels:{value:[],getter:function(a){return f(a)}},classPrefix:"ui-switchable",hasTriggers:!0,triggerType:"hover",delay:100,activeIndex:{value:0,setter:function(a){return parseInt(a)||0}},step:1,length:{readOnly:!0,getter:function(){return Math.ceil(this.get("panels").length/this.get("step"))}},viewSize:[],activeTriggerClass:{getter:function(a){return a?a:this.get("classPrefix")+"-active"}}},setup:function(){this._initConstClass(),this._initElement();var a=this._getDatasetRole();this._initPanels(a),this._initTriggers(a),this._bindTriggers(),this._initPlugins(),this.render()},_initConstClass:function(){this.CONST=e(this.get("classPrefix"))},_initElement:function(){this.element.addClass(this.CONST.UI_SWITCHABLE)},_getDatasetRole:function(){var a=this,b={},c=["trigger","panel","nav","content"];return f.each(c,function(c,d){var e=a.$("[data-role="+d+"]");e.length&&(b[d]=e)}),b},_initPanels:function(a){var b=this.get("panels");if(b.length>0||(a.panel?this.set("panels",b=a.panel):a.content&&(this.set("panels",b=a.content.find("> *")),this.content=a.content)),0===b.length)throw new Error("panels.length is ZERO");this.content||(this.content=b.parent()),this.content.addClass(this.CONST.CONTENT_CLASS),this.get("panels").addClass(this.CONST.PANEL_CLASS)},_initTriggers:function(a){var b=this.get("triggers");b.length>0||(a.trigger?this.set("triggers",b=a.trigger):a.nav?(b=a.nav.find("> *"),0===b.length&&(b=d(this.get("length"),this.get("activeIndex"),this.get("activeTriggerClass"),!0).appendTo(a.nav)),this.set("triggers",b),this.nav=a.nav):this.get("hasTriggers")&&(this.nav=d(this.get("length"),this.get("activeIndex"),this.get("activeTriggerClass")).appendTo(this.element),this.set("triggers",b=this.nav.children()))),!this.nav&&b.length&&(this.nav=b.parent()),this.nav&&this.nav.addClass(this.CONST.NAV_CLASS),b.addClass(this.CONST.TRIGGER_CLASS).each(function(a,b){f(b).data("value",a)})},_bindTriggers:function(){function a(a){c._onFocusTrigger(a.type,f(this).data("value"))}function b(){clearTimeout(c._switchTimer)}var c=this,d=this.get("triggers");"click"===this.get("triggerType")?d.click(a):d.hover(a,b)},_onFocusTrigger:function(a,b){var c=this;"click"===a?this.switchTo(b):this._switchTimer=setTimeout(function(){c.switchTo(b)},this.get("delay"))},_initPlugins:function(){this._plugins=[],this._plug(h),this._plug(i),this._plug(j)},switchTo:function(a){this.set("activeIndex",a)},_onRenderActiveIndex:function(a,b){this._switchTo(a,b)},_switchTo:function(a,b){this.trigger("switch",a,b),this._switchTrigger(a,b),this._switchPanel(this._getPanelInfo(a,b)),this.trigger("switched",a,b),this._isBackward=void 0},_switchTrigger:function(a,b){var c=this.get("triggers");c.length<1||(c.eq(b).removeClass(this.get("activeTriggerClass")),c.eq(a).addClass(this.get("activeTriggerClass")))},_switchPanel:function(a){a.fromPanels.hide(),a.toPanels.show()},_getPanelInfo:function(a,b){var c,d,e=this.get("panels").get(),g=this.get("step");return b>-1&&(c=e.slice(b*g,(b+1)*g)),d=e.slice(a*g,(a+1)*g),{toIndex:a,fromIndex:b,toPanels:f(d),fromPanels:f(c)}},prev:function(){this._isBackward=!0;var a=this.get("activeIndex"),b=(a-1+this.get("length"))%this.get("length");this.switchTo(b)},next:function(){this._isBackward=!1;var a=this.get("activeIndex"),b=(a+1)%this.get("length");this.switchTo(b)},_plug:function(a){var b=a.attrs;if(b)for(var c in b)!b.hasOwnProperty(c)||c in this.attrs||this.set(c,b[c]);a.isNeeded.call(this)&&(a.install&&a.install.call(this),this._plugins.push(a))},destroy:function(){var a=this;f.each(this._plugins,function(b,c){c.destroy&&c.destroy.call(a)}),k.superclass.destroy.call(this)}});c.exports=k}),define("arale/switchable/1.0.2/plugins/effects",["$","arale/easing/1.0.0/easing"],function(a,b,c){var d=a("$");a("arale/easing/1.0.0/easing");var e="scrollx",f="scrolly",g="fade";c.exports={attrs:{effect:"none",easing:"linear",duration:500},isNeeded:function(){return"none"!==this.get("effect")},install:function(){var a=this.get("panels");a.show();var b=this.get("effect"),c=this.get("step"),f=d.isFunction(b);if(f||0!==b.indexOf("scroll")){if(!f&&b===g){var i=this.get("activeIndex"),j=i*c,k=j+c-1;a.each(function(a,b){var c=a>=j&&k>=a;d(b).css({opacity:c?1:0,position:"absolute",zIndex:c?9:1})})}}else{var l=this.content,m=a.eq(0);l.css("position","relative"),"static"===l.parent().css("position")&&l.parent().css("position","relative"),b===e&&(a.css("float","left"),l.width("35791197px"));var n=this.get("viewSize");if(n[0]||(n[0]=m.outerWidth()*c,n[1]=m.outerHeight()*c,this.set("viewSize",n)),!n[0])throw new Error("Please specify viewSize manually")}this._switchPanel=function(a){var b=this.get("effect"),c=d.isFunction(b)?b:h[b];c.call(this,a)}}};var h={fade:function(a){if(this.get("step")>1)throw new Error('Effect "fade" only supports step === 1');var b=a.fromPanels.eq(0),c=a.toPanels.eq(0);if(this.anim&&this.anim.stop(!1,!0),c.css("opacity",1),c.show(),a.fromIndex>-1){var d=this,e=this.get("duration"),f=this.get("easing");this.anim=b.animate({opacity:0},e,f,function(){d.anim=null,c.css("zIndex",9),b.css("zIndex",1),b.css("display","none")})}else c.css("zIndex",9)},scroll:function(a){var b=this.get("effect")===e,c=this.get("viewSize")[b?0:1]*a.toIndex,d={};if(d[b?"left":"top"]=-c+"px",this.anim&&this.anim.stop(),a.fromIndex>-1){var f=this,g=this.get("duration"),h=this.get("easing");this.anim=this.content.animate(d,g,h,function(){f.anim=null})}else this.content.css(d)}};h[f]=h.scroll,h[e]=h.scroll,c.exports.Effects=h}),define("arale/switchable/1.0.2/plugins/autoplay",["$"],function(a,b,c){function d(a,b){function c(){c.stop(),d=setTimeout(a,b)}b=b||200;var d;return c.stop=function(){d&&(clearTimeout(d),d=0)},c}function e(a){var b=g.scrollTop(),c=b+g.height(),d=a.offset().top,e=d+a.height();return c>d&&e>b}var f=a("$"),g=f(window);c.exports={attrs:{autoplay:!1,interval:5e3},isNeeded:function(){return this.get("autoplay")},install:function(){function a(){b(),j.paused=!1,c=setInterval(function(){j.paused||j.next()},i)}function b(){c&&(clearInterval(c),c=null),j.paused=!0}var c,f=this.element,h="."+this.cid,i=this.get("interval"),j=this;a(),this.stop=b,this.start=a,this._scrollDetect=d(function(){j[e(f)?"start":"stop"]()}),g.on("scroll"+h,this._scrollDetect),this.element.hover(b,a)},destroy:function(){var a="."+this.cid;this.stop&&this.stop(),this._scrollDetect&&(this._scrollDetect.stop(),g.off("scroll"+a))}}}),define("arale/switchable/1.0.2/plugins/circular",["$","arale/switchable/1.0.2/plugins/effects","arale/easing/1.0.0/easing"],function(a,b,c){function d(a,b,c){var d=this.get("step"),e=this.get("length"),g=a?e-1:0,h=g*d,i=(g+1)*d,j=a?c:-c*e,k=a?-c*e:c*e,l=f(this.get("panels").get().slice(h,i));return l.css("position","relative"),l.css(b,k+"px"),j}function e(a,b,c){var d=this.get("step"),e=this.get("length"),g=a?e-1:0,h=g*d,i=(g+1)*d,j=f(this.get("panels").get().slice(h,i));j.css("position",""),j.css(b,""),this.content.css(b,a?-c*(e-1):"")}var f=a("$"),g="scrollx",h="scrolly",i=a("arale/switchable/1.0.2/plugins/effects").Effects;c.exports={isNeeded:function(){var a=this.get("effect"),b=this.get("circular");return b&&(a===g||a===h)},install:function(){this._scrollType=this.get("effect"),this.set("effect","scrollCircular")}},i.scrollCircular=function(a){var b=a.toIndex,c=a.fromIndex,f=this._scrollType===g,h=f?"left":"top",i=this.get("viewSize")[f?0:1],j=-i*b,k={};if(k[h]=j+"px",c>-1){this.anim&&this.anim.stop(!1,!0);var l=this.get("length"),m=0===c&&b===l-1,n=c===l-1&&0===b,o=void 0===this._isBackward?c>b:this._isBackward,p=o&&m||!o&&n;p&&(j=d.call(this,o,h,i),k[h]=j+"px");var q=this.get("duration"),r=this.get("easing"),s=this;this.anim=this.content.animate(k,q,r,function(){s.anim=null,p&&e.call(s,o,h,i)})}else this.content.css(k)}});
+define("arale/switchable/1.0.2/slide",["./switchable","$","arale/widget/1.1.1/widget","arale/base/1.1.1/base","arale/class/1.1.0/class","arale/events/1.1.0/events","./plugins/effects","arale/easing/1.0.0/easing","./plugins/autoplay","./plugins/circular"],function(a,b,c){var d=a("./switchable");c.exports=d.extend({attrs:{autoplay:!0,circular:!0}})}),define("arale/switchable/1.0.2/switchable",["$","arale/widget/1.1.1/widget","arale/base/1.1.1/base","arale/class/1.1.0/class","arale/events/1.1.0/events","arale/switchable/1.0.2/plugins/effects","arale/easing/1.0.0/easing","arale/switchable/1.0.2/plugins/autoplay","arale/switchable/1.0.2/plugins/circular"],function(a,b,c){function d(a,b,c,d){for(var e=f("<ul>"),g=0;a>g;g++){var h=g===b?c:"";f("<li>",{"class":h,html:g+1}).appendTo(e)}return d?e.children():e}function e(a){return{UI_SWITCHABLE:a||"",NAV_CLASS:a?a+"-nav":"",CONTENT_CLASS:a?a+"-content":"",TRIGGER_CLASS:a?a+"-trigger":"",PANEL_CLASS:a?a+"-panel":"",PREV_BTN_CLASS:a?a+"-prev-btn":"",NEXT_BTN_CLASS:a?a+"-next-btn":""}}var f=a("$"),g=a("arale/widget/1.1.1/widget"),h=a("arale/switchable/1.0.2/plugins/effects"),i=a("arale/switchable/1.0.2/plugins/autoplay"),j=a("arale/switchable/1.0.2/plugins/circular"),k=g.extend({attrs:{triggers:{value:[],getter:function(a){return f(a)}},panels:{value:[],getter:function(a){return f(a)}},classPrefix:"ui-switchable",hasTriggers:!0,triggerType:"hover",delay:100,activeIndex:{value:0,setter:function(a){return parseInt(a)||0}},step:1,length:{readOnly:!0,getter:function(){return Math.ceil(this.get("panels").length/this.get("step"))}},viewSize:[],activeTriggerClass:{getter:function(a){return a?a:this.get("classPrefix")+"-active"}}},setup:function(){this._initConstClass(),this._initElement();var a=this._getDatasetRole();this._initPanels(a),this._initTriggers(a),this._bindTriggers(),this._initPlugins(),this.render()},_initConstClass:function(){this.CONST=e(this.get("classPrefix"))},_initElement:function(){this.element.addClass(this.CONST.UI_SWITCHABLE)},_getDatasetRole:function(){var a=this,b={},c=["trigger","panel","nav","content"];return f.each(c,function(c,d){var e=a.$("[data-switchable-role="+d+"]");e.length&&(b[d]=e)}),b},_initPanels:function(a){var b=this.get("panels");if(b.length>0||(a.panel?this.set("panels",b=a.panel):a.content&&(this.set("panels",b=a.content.find("> *")),this.content=a.content)),0===b.length)throw new Error("panels.length is ZERO");this.content||(this.content=b.parent()),this.content.addClass(this.CONST.CONTENT_CLASS),this.get("panels").addClass(this.CONST.PANEL_CLASS)},_initTriggers:function(a){var b=this.get("triggers");b.length>0||(a.trigger?this.set("triggers",b=a.trigger):a.nav?(b=a.nav.find("> *"),0===b.length&&(b=d(this.get("length"),this.get("activeIndex"),this.get("activeTriggerClass"),!0).appendTo(a.nav)),this.set("triggers",b),this.nav=a.nav):this.get("hasTriggers")&&(this.nav=d(this.get("length"),this.get("activeIndex"),this.get("activeTriggerClass")).appendTo(this.element),this.set("triggers",b=this.nav.children()))),!this.nav&&b.length&&(this.nav=b.parent()),this.nav&&this.nav.addClass(this.CONST.NAV_CLASS),b.addClass(this.CONST.TRIGGER_CLASS).each(function(a,b){f(b).data("value",a)})},_bindTriggers:function(){function a(a){c._onFocusTrigger(a.type,f(this).data("value"))}function b(){clearTimeout(c._switchTimer)}var c=this,d=this.get("triggers");"click"===this.get("triggerType")?d.click(a):d.hover(a,b)},_onFocusTrigger:function(a,b){var c=this;"click"===a?this.switchTo(b):this._switchTimer=setTimeout(function(){c.switchTo(b)},this.get("delay"))},_initPlugins:function(){this._plugins=[],this._plug(h),this._plug(i),this._plug(j)},switchTo:function(a){this.set("activeIndex",a)},_onRenderActiveIndex:function(a,b){this._switchTo(a,b)},_switchTo:function(a,b){this.trigger("switch",a,b),this._switchTrigger(a,b),this._switchPanel(this._getPanelInfo(a,b)),this.trigger("switched",a,b),this._isBackward=void 0},_switchTrigger:function(a,b){var c=this.get("triggers");c.length<1||(c.eq(b).removeClass(this.get("activeTriggerClass")),c.eq(a).addClass(this.get("activeTriggerClass")))},_switchPanel:function(a){a.fromPanels.hide(),a.toPanels.show()},_getPanelInfo:function(a,b){var c,d,e=this.get("panels").get(),g=this.get("step");return b>-1&&(c=e.slice(b*g,(b+1)*g)),d=e.slice(a*g,(a+1)*g),{toIndex:a,fromIndex:b,toPanels:f(d),fromPanels:f(c)}},prev:function(){this._isBackward=!0;var a=this.get("activeIndex"),b=(a-1+this.get("length"))%this.get("length");this.switchTo(b)},next:function(){this._isBackward=!1;var a=this.get("activeIndex"),b=(a+1)%this.get("length");this.switchTo(b)},_plug:function(a){var b=a.attrs;if(b)for(var c in b)!b.hasOwnProperty(c)||c in this.attrs||this.set(c,b[c]);a.isNeeded.call(this)&&(a.install&&a.install.call(this),this._plugins.push(a))},destroy:function(){var a=this;f.each(this._plugins,function(b,c){c.destroy&&c.destroy.call(a)}),k.superclass.destroy.call(this)}});c.exports=k}),define("arale/switchable/1.0.2/plugins/effects",["$","arale/easing/1.0.0/easing"],function(a,b,c){var d=a("$");a("arale/easing/1.0.0/easing");var e="scrollx",f="scrolly",g="fade";c.exports={attrs:{effect:"none",easing:"linear",duration:500},isNeeded:function(){return"none"!==this.get("effect")},install:function(){var a=this.get("panels");a.show();var b=this.get("effect"),c=this.get("step"),f=d.isFunction(b);if(f||0!==b.indexOf("scroll")){if(!f&&b===g){var i=this.get("activeIndex"),j=i*c,k=j+c-1;a.each(function(a,b){var c=a>=j&&k>=a;d(b).css({opacity:c?1:0,position:"absolute",zIndex:c?9:1})})}}else{var l=this.content,m=a.eq(0);l.css("position","relative"),"static"===l.parent().css("position")&&l.parent().css("position","relative"),b===e&&(a.css("float","left"),l.width("35791197px"));var n=this.get("viewSize");if(n[0]||(n[0]=m.outerWidth()*c,n[1]=m.outerHeight()*c,this.set("viewSize",n)),!n[0])throw new Error("Please specify viewSize manually")}this._switchPanel=function(a){var b=this.get("effect"),c=d.isFunction(b)?b:h[b];c.call(this,a)}}};var h={fade:function(a){if(this.get("step")>1)throw new Error('Effect "fade" only supports step === 1');var b=a.fromPanels.eq(0),c=a.toPanels.eq(0);if(this.anim&&this.anim.stop(!1,!0),c.css("opacity",1),c.show(),a.fromIndex>-1){var d=this,e=this.get("duration"),f=this.get("easing");this.anim=b.animate({opacity:0},e,f,function(){d.anim=null,c.css("zIndex",9),b.css("zIndex",1),b.css("display","none")})}else c.css("zIndex",9)},scroll:function(a){var b=this.get("effect")===e,c=this.get("viewSize")[b?0:1]*a.toIndex,d={};if(d[b?"left":"top"]=-c+"px",this.anim&&this.anim.stop(),a.fromIndex>-1){var f=this,g=this.get("duration"),h=this.get("easing");this.anim=this.content.animate(d,g,h,function(){f.anim=null})}else this.content.css(d)}};h[f]=h.scroll,h[e]=h.scroll,c.exports.Effects=h}),define("arale/switchable/1.0.2/plugins/autoplay",["$"],function(a,b,c){function d(a,b){function c(){c.stop(),d=setTimeout(a,b)}b=b||200;var d;return c.stop=function(){d&&(clearTimeout(d),d=0)},c}function e(a){var b=g.scrollTop(),c=b+g.height(),d=a.offset().top,e=d+a.height();return c>d&&e>b}var f=a("$"),g=f(window);c.exports={attrs:{autoplay:!1,interval:5e3},isNeeded:function(){return this.get("autoplay")},install:function(){function a(){b(),j.paused=!1,c=setInterval(function(){j.paused||j.next()},i)}function b(){c&&(clearInterval(c),c=null),j.paused=!0}var c,f=this.element,h="."+this.cid,i=this.get("interval"),j=this;a(),this.stop=b,this.start=a,this._scrollDetect=d(function(){j[e(f)?"start":"stop"]()}),g.on("scroll"+h,this._scrollDetect),this.element.hover(b,a)},destroy:function(){var a="."+this.cid;this.stop&&this.stop(),this._scrollDetect&&(this._scrollDetect.stop(),g.off("scroll"+a))}}}),define("arale/switchable/1.0.2/plugins/circular",["$","arale/switchable/1.0.2/plugins/effects","arale/easing/1.0.0/easing"],function(a,b,c){function d(a,b,c){var d=this.get("step"),e=this.get("length"),g=a?e-1:0,h=g*d,i=(g+1)*d,j=a?c:-c*e,k=a?-c*e:c*e,l=f(this.get("panels").get().slice(h,i));return l.css("position","relative"),l.css(b,k+"px"),j}function e(a,b,c){var d=this.get("step"),e=this.get("length"),g=a?e-1:0,h=g*d,i=(g+1)*d,j=f(this.get("panels").get().slice(h,i));j.css("position",""),j.css(b,""),this.content.css(b,a?-c*(e-1):"")}var f=a("$"),g="scrollx",h="scrolly",i=a("arale/switchable/1.0.2/plugins/effects").Effects;c.exports={isNeeded:function(){var a=this.get("effect"),b=this.get("circular");return b&&(a===g||a===h)},install:function(){this._scrollType=this.get("effect"),this.set("effect","scrollCircular")}},i.scrollCircular=function(a){var b=a.toIndex,c=a.fromIndex,f=this._scrollType===g,h=f?"left":"top",i=this.get("viewSize")[f?0:1],j=-i*b,k={};if(k[h]=j+"px",c>-1){this.anim&&this.anim.stop(!1,!0);var l=this.get("length"),m=0===c&&b===l-1,n=c===l-1&&0===b,o=void 0===this._isBackward?c>b:this._isBackward,p=o&&m||!o&&n;p&&(j=d.call(this,o,h,i),k[h]=j+"px");var q=this.get("duration"),r=this.get("easing"),s=this;this.anim=this.content.animate(k,q,r,function(){s.anim=null,p&&e.call(s,o,h,i)})}else this.content.css(k)}});
diff --git a/dist/switchable-debug.js b/dist/switchable-debug.js
index 63629f4..76f9b49 100644
--- a/dist/switchable-debug.js
+++ b/dist/switchable-debug.js
@@ -81,7 +81,7 @@ define("arale/switchable/1.0.2/switchable-debug", [ "$-debug", "arale/widget/1.1
             var role = {};
             var roles = [ "trigger", "panel", "nav", "content" ];
             $.each(roles, function(index, key) {
-                var elems = self.$("[data-role=" + key + "]");
+                var elems = self.$("[data-switchable-role=" + key + "]");
                 if (elems.length) {
                     role[key] = elems;
                 }
diff --git a/dist/switchable.js b/dist/switchable.js
index cab88b6..26012d1 100644
--- a/dist/switchable.js
+++ b/dist/switchable.js
@@ -1 +1 @@
-define("arale/switchable/1.0.2/switchable",["$","arale/widget/1.1.1/widget","arale/base/1.1.1/base","arale/class/1.1.0/class","arale/events/1.1.0/events","./plugins/effects","arale/easing/1.0.0/easing","./plugins/autoplay","./plugins/circular"],function(a,b,c){function d(a,b,c,d){for(var e=f("<ul>"),g=0;a>g;g++){var h=g===b?c:"";f("<li>",{"class":h,html:g+1}).appendTo(e)}return d?e.children():e}function e(a){return{UI_SWITCHABLE:a||"",NAV_CLASS:a?a+"-nav":"",CONTENT_CLASS:a?a+"-content":"",TRIGGER_CLASS:a?a+"-trigger":"",PANEL_CLASS:a?a+"-panel":"",PREV_BTN_CLASS:a?a+"-prev-btn":"",NEXT_BTN_CLASS:a?a+"-next-btn":""}}var f=a("$"),g=a("arale/widget/1.1.1/widget"),h=a("./plugins/effects"),i=a("./plugins/autoplay"),j=a("./plugins/circular"),k=g.extend({attrs:{triggers:{value:[],getter:function(a){return f(a)}},panels:{value:[],getter:function(a){return f(a)}},classPrefix:"ui-switchable",hasTriggers:!0,triggerType:"hover",delay:100,activeIndex:{value:0,setter:function(a){return parseInt(a)||0}},step:1,length:{readOnly:!0,getter:function(){return Math.ceil(this.get("panels").length/this.get("step"))}},viewSize:[],activeTriggerClass:{getter:function(a){return a?a:this.get("classPrefix")+"-active"}}},setup:function(){this._initConstClass(),this._initElement();var a=this._getDatasetRole();this._initPanels(a),this._initTriggers(a),this._bindTriggers(),this._initPlugins(),this.render()},_initConstClass:function(){this.CONST=e(this.get("classPrefix"))},_initElement:function(){this.element.addClass(this.CONST.UI_SWITCHABLE)},_getDatasetRole:function(){var a=this,b={},c=["trigger","panel","nav","content"];return f.each(c,function(c,d){var e=a.$("[data-role="+d+"]");e.length&&(b[d]=e)}),b},_initPanels:function(a){var b=this.get("panels");if(b.length>0||(a.panel?this.set("panels",b=a.panel):a.content&&(this.set("panels",b=a.content.find("> *")),this.content=a.content)),0===b.length)throw new Error("panels.length is ZERO");this.content||(this.content=b.parent()),this.content.addClass(this.CONST.CONTENT_CLASS),this.get("panels").addClass(this.CONST.PANEL_CLASS)},_initTriggers:function(a){var b=this.get("triggers");b.length>0||(a.trigger?this.set("triggers",b=a.trigger):a.nav?(b=a.nav.find("> *"),0===b.length&&(b=d(this.get("length"),this.get("activeIndex"),this.get("activeTriggerClass"),!0).appendTo(a.nav)),this.set("triggers",b),this.nav=a.nav):this.get("hasTriggers")&&(this.nav=d(this.get("length"),this.get("activeIndex"),this.get("activeTriggerClass")).appendTo(this.element),this.set("triggers",b=this.nav.children()))),!this.nav&&b.length&&(this.nav=b.parent()),this.nav&&this.nav.addClass(this.CONST.NAV_CLASS),b.addClass(this.CONST.TRIGGER_CLASS).each(function(a,b){f(b).data("value",a)})},_bindTriggers:function(){function a(a){c._onFocusTrigger(a.type,f(this).data("value"))}function b(){clearTimeout(c._switchTimer)}var c=this,d=this.get("triggers");"click"===this.get("triggerType")?d.click(a):d.hover(a,b)},_onFocusTrigger:function(a,b){var c=this;"click"===a?this.switchTo(b):this._switchTimer=setTimeout(function(){c.switchTo(b)},this.get("delay"))},_initPlugins:function(){this._plugins=[],this._plug(h),this._plug(i),this._plug(j)},switchTo:function(a){this.set("activeIndex",a)},_onRenderActiveIndex:function(a,b){this._switchTo(a,b)},_switchTo:function(a,b){this.trigger("switch",a,b),this._switchTrigger(a,b),this._switchPanel(this._getPanelInfo(a,b)),this.trigger("switched",a,b),this._isBackward=void 0},_switchTrigger:function(a,b){var c=this.get("triggers");c.length<1||(c.eq(b).removeClass(this.get("activeTriggerClass")),c.eq(a).addClass(this.get("activeTriggerClass")))},_switchPanel:function(a){a.fromPanels.hide(),a.toPanels.show()},_getPanelInfo:function(a,b){var c,d,e=this.get("panels").get(),g=this.get("step");return b>-1&&(c=e.slice(b*g,(b+1)*g)),d=e.slice(a*g,(a+1)*g),{toIndex:a,fromIndex:b,toPanels:f(d),fromPanels:f(c)}},prev:function(){this._isBackward=!0;var a=this.get("activeIndex"),b=(a-1+this.get("length"))%this.get("length");this.switchTo(b)},next:function(){this._isBackward=!1;var a=this.get("activeIndex"),b=(a+1)%this.get("length");this.switchTo(b)},_plug:function(a){var b=a.attrs;if(b)for(var c in b)!b.hasOwnProperty(c)||c in this.attrs||this.set(c,b[c]);a.isNeeded.call(this)&&(a.install&&a.install.call(this),this._plugins.push(a))},destroy:function(){var a=this;f.each(this._plugins,function(b,c){c.destroy&&c.destroy.call(a)}),k.superclass.destroy.call(this)}});c.exports=k}),define("arale/switchable/1.0.2/plugins/effects",["$","arale/easing/1.0.0/easing"],function(a,b,c){var d=a("$");a("arale/easing/1.0.0/easing");var e="scrollx",f="scrolly",g="fade";c.exports={attrs:{effect:"none",easing:"linear",duration:500},isNeeded:function(){return"none"!==this.get("effect")},install:function(){var a=this.get("panels");a.show();var b=this.get("effect"),c=this.get("step"),f=d.isFunction(b);if(f||0!==b.indexOf("scroll")){if(!f&&b===g){var i=this.get("activeIndex"),j=i*c,k=j+c-1;a.each(function(a,b){var c=a>=j&&k>=a;d(b).css({opacity:c?1:0,position:"absolute",zIndex:c?9:1})})}}else{var l=this.content,m=a.eq(0);l.css("position","relative"),"static"===l.parent().css("position")&&l.parent().css("position","relative"),b===e&&(a.css("float","left"),l.width("35791197px"));var n=this.get("viewSize");if(n[0]||(n[0]=m.outerWidth()*c,n[1]=m.outerHeight()*c,this.set("viewSize",n)),!n[0])throw new Error("Please specify viewSize manually")}this._switchPanel=function(a){var b=this.get("effect"),c=d.isFunction(b)?b:h[b];c.call(this,a)}}};var h={fade:function(a){if(this.get("step")>1)throw new Error('Effect "fade" only supports step === 1');var b=a.fromPanels.eq(0),c=a.toPanels.eq(0);if(this.anim&&this.anim.stop(!1,!0),c.css("opacity",1),c.show(),a.fromIndex>-1){var d=this,e=this.get("duration"),f=this.get("easing");this.anim=b.animate({opacity:0},e,f,function(){d.anim=null,c.css("zIndex",9),b.css("zIndex",1),b.css("display","none")})}else c.css("zIndex",9)},scroll:function(a){var b=this.get("effect")===e,c=this.get("viewSize")[b?0:1]*a.toIndex,d={};if(d[b?"left":"top"]=-c+"px",this.anim&&this.anim.stop(),a.fromIndex>-1){var f=this,g=this.get("duration"),h=this.get("easing");this.anim=this.content.animate(d,g,h,function(){f.anim=null})}else this.content.css(d)}};h[f]=h.scroll,h[e]=h.scroll,c.exports.Effects=h}),define("arale/switchable/1.0.2/plugins/autoplay",["$"],function(a,b,c){function d(a,b){function c(){c.stop(),d=setTimeout(a,b)}b=b||200;var d;return c.stop=function(){d&&(clearTimeout(d),d=0)},c}function e(a){var b=g.scrollTop(),c=b+g.height(),d=a.offset().top,e=d+a.height();return c>d&&e>b}var f=a("$"),g=f(window);c.exports={attrs:{autoplay:!1,interval:5e3},isNeeded:function(){return this.get("autoplay")},install:function(){function a(){b(),j.paused=!1,c=setInterval(function(){j.paused||j.next()},i)}function b(){c&&(clearInterval(c),c=null),j.paused=!0}var c,f=this.element,h="."+this.cid,i=this.get("interval"),j=this;a(),this.stop=b,this.start=a,this._scrollDetect=d(function(){j[e(f)?"start":"stop"]()}),g.on("scroll"+h,this._scrollDetect),this.element.hover(b,a)},destroy:function(){var a="."+this.cid;this.stop&&this.stop(),this._scrollDetect&&(this._scrollDetect.stop(),g.off("scroll"+a))}}}),define("arale/switchable/1.0.2/plugins/circular",["$","arale/switchable/1.0.2/plugins/effects","arale/easing/1.0.0/easing"],function(a,b,c){function d(a,b,c){var d=this.get("step"),e=this.get("length"),g=a?e-1:0,h=g*d,i=(g+1)*d,j=a?c:-c*e,k=a?-c*e:c*e,l=f(this.get("panels").get().slice(h,i));return l.css("position","relative"),l.css(b,k+"px"),j}function e(a,b,c){var d=this.get("step"),e=this.get("length"),g=a?e-1:0,h=g*d,i=(g+1)*d,j=f(this.get("panels").get().slice(h,i));j.css("position",""),j.css(b,""),this.content.css(b,a?-c*(e-1):"")}var f=a("$"),g="scrollx",h="scrolly",i=a("arale/switchable/1.0.2/plugins/effects").Effects;c.exports={isNeeded:function(){var a=this.get("effect"),b=this.get("circular");return b&&(a===g||a===h)},install:function(){this._scrollType=this.get("effect"),this.set("effect","scrollCircular")}},i.scrollCircular=function(a){var b=a.toIndex,c=a.fromIndex,f=this._scrollType===g,h=f?"left":"top",i=this.get("viewSize")[f?0:1],j=-i*b,k={};if(k[h]=j+"px",c>-1){this.anim&&this.anim.stop(!1,!0);var l=this.get("length"),m=0===c&&b===l-1,n=c===l-1&&0===b,o=void 0===this._isBackward?c>b:this._isBackward,p=o&&m||!o&&n;p&&(j=d.call(this,o,h,i),k[h]=j+"px");var q=this.get("duration"),r=this.get("easing"),s=this;this.anim=this.content.animate(k,q,r,function(){s.anim=null,p&&e.call(s,o,h,i)})}else this.content.css(k)}});
+define("arale/switchable/1.0.2/switchable",["$","arale/widget/1.1.1/widget","arale/base/1.1.1/base","arale/class/1.1.0/class","arale/events/1.1.0/events","./plugins/effects","arale/easing/1.0.0/easing","./plugins/autoplay","./plugins/circular"],function(a,b,c){function d(a,b,c,d){for(var e=f("<ul>"),g=0;a>g;g++){var h=g===b?c:"";f("<li>",{"class":h,html:g+1}).appendTo(e)}return d?e.children():e}function e(a){return{UI_SWITCHABLE:a||"",NAV_CLASS:a?a+"-nav":"",CONTENT_CLASS:a?a+"-content":"",TRIGGER_CLASS:a?a+"-trigger":"",PANEL_CLASS:a?a+"-panel":"",PREV_BTN_CLASS:a?a+"-prev-btn":"",NEXT_BTN_CLASS:a?a+"-next-btn":""}}var f=a("$"),g=a("arale/widget/1.1.1/widget"),h=a("./plugins/effects"),i=a("./plugins/autoplay"),j=a("./plugins/circular"),k=g.extend({attrs:{triggers:{value:[],getter:function(a){return f(a)}},panels:{value:[],getter:function(a){return f(a)}},classPrefix:"ui-switchable",hasTriggers:!0,triggerType:"hover",delay:100,activeIndex:{value:0,setter:function(a){return parseInt(a)||0}},step:1,length:{readOnly:!0,getter:function(){return Math.ceil(this.get("panels").length/this.get("step"))}},viewSize:[],activeTriggerClass:{getter:function(a){return a?a:this.get("classPrefix")+"-active"}}},setup:function(){this._initConstClass(),this._initElement();var a=this._getDatasetRole();this._initPanels(a),this._initTriggers(a),this._bindTriggers(),this._initPlugins(),this.render()},_initConstClass:function(){this.CONST=e(this.get("classPrefix"))},_initElement:function(){this.element.addClass(this.CONST.UI_SWITCHABLE)},_getDatasetRole:function(){var a=this,b={},c=["trigger","panel","nav","content"];return f.each(c,function(c,d){var e=a.$("[data-switchable-role="+d+"]");e.length&&(b[d]=e)}),b},_initPanels:function(a){var b=this.get("panels");if(b.length>0||(a.panel?this.set("panels",b=a.panel):a.content&&(this.set("panels",b=a.content.find("> *")),this.content=a.content)),0===b.length)throw new Error("panels.length is ZERO");this.content||(this.content=b.parent()),this.content.addClass(this.CONST.CONTENT_CLASS),this.get("panels").addClass(this.CONST.PANEL_CLASS)},_initTriggers:function(a){var b=this.get("triggers");b.length>0||(a.trigger?this.set("triggers",b=a.trigger):a.nav?(b=a.nav.find("> *"),0===b.length&&(b=d(this.get("length"),this.get("activeIndex"),this.get("activeTriggerClass"),!0).appendTo(a.nav)),this.set("triggers",b),this.nav=a.nav):this.get("hasTriggers")&&(this.nav=d(this.get("length"),this.get("activeIndex"),this.get("activeTriggerClass")).appendTo(this.element),this.set("triggers",b=this.nav.children()))),!this.nav&&b.length&&(this.nav=b.parent()),this.nav&&this.nav.addClass(this.CONST.NAV_CLASS),b.addClass(this.CONST.TRIGGER_CLASS).each(function(a,b){f(b).data("value",a)})},_bindTriggers:function(){function a(a){c._onFocusTrigger(a.type,f(this).data("value"))}function b(){clearTimeout(c._switchTimer)}var c=this,d=this.get("triggers");"click"===this.get("triggerType")?d.click(a):d.hover(a,b)},_onFocusTrigger:function(a,b){var c=this;"click"===a?this.switchTo(b):this._switchTimer=setTimeout(function(){c.switchTo(b)},this.get("delay"))},_initPlugins:function(){this._plugins=[],this._plug(h),this._plug(i),this._plug(j)},switchTo:function(a){this.set("activeIndex",a)},_onRenderActiveIndex:function(a,b){this._switchTo(a,b)},_switchTo:function(a,b){this.trigger("switch",a,b),this._switchTrigger(a,b),this._switchPanel(this._getPanelInfo(a,b)),this.trigger("switched",a,b),this._isBackward=void 0},_switchTrigger:function(a,b){var c=this.get("triggers");c.length<1||(c.eq(b).removeClass(this.get("activeTriggerClass")),c.eq(a).addClass(this.get("activeTriggerClass")))},_switchPanel:function(a){a.fromPanels.hide(),a.toPanels.show()},_getPanelInfo:function(a,b){var c,d,e=this.get("panels").get(),g=this.get("step");return b>-1&&(c=e.slice(b*g,(b+1)*g)),d=e.slice(a*g,(a+1)*g),{toIndex:a,fromIndex:b,toPanels:f(d),fromPanels:f(c)}},prev:function(){this._isBackward=!0;var a=this.get("activeIndex"),b=(a-1+this.get("length"))%this.get("length");this.switchTo(b)},next:function(){this._isBackward=!1;var a=this.get("activeIndex"),b=(a+1)%this.get("length");this.switchTo(b)},_plug:function(a){var b=a.attrs;if(b)for(var c in b)!b.hasOwnProperty(c)||c in this.attrs||this.set(c,b[c]);a.isNeeded.call(this)&&(a.install&&a.install.call(this),this._plugins.push(a))},destroy:function(){var a=this;f.each(this._plugins,function(b,c){c.destroy&&c.destroy.call(a)}),k.superclass.destroy.call(this)}});c.exports=k}),define("arale/switchable/1.0.2/plugins/effects",["$","arale/easing/1.0.0/easing"],function(a,b,c){var d=a("$");a("arale/easing/1.0.0/easing");var e="scrollx",f="scrolly",g="fade";c.exports={attrs:{effect:"none",easing:"linear",duration:500},isNeeded:function(){return"none"!==this.get("effect")},install:function(){var a=this.get("panels");a.show();var b=this.get("effect"),c=this.get("step"),f=d.isFunction(b);if(f||0!==b.indexOf("scroll")){if(!f&&b===g){var i=this.get("activeIndex"),j=i*c,k=j+c-1;a.each(function(a,b){var c=a>=j&&k>=a;d(b).css({opacity:c?1:0,position:"absolute",zIndex:c?9:1})})}}else{var l=this.content,m=a.eq(0);l.css("position","relative"),"static"===l.parent().css("position")&&l.parent().css("position","relative"),b===e&&(a.css("float","left"),l.width("35791197px"));var n=this.get("viewSize");if(n[0]||(n[0]=m.outerWidth()*c,n[1]=m.outerHeight()*c,this.set("viewSize",n)),!n[0])throw new Error("Please specify viewSize manually")}this._switchPanel=function(a){var b=this.get("effect"),c=d.isFunction(b)?b:h[b];c.call(this,a)}}};var h={fade:function(a){if(this.get("step")>1)throw new Error('Effect "fade" only supports step === 1');var b=a.fromPanels.eq(0),c=a.toPanels.eq(0);if(this.anim&&this.anim.stop(!1,!0),c.css("opacity",1),c.show(),a.fromIndex>-1){var d=this,e=this.get("duration"),f=this.get("easing");this.anim=b.animate({opacity:0},e,f,function(){d.anim=null,c.css("zIndex",9),b.css("zIndex",1),b.css("display","none")})}else c.css("zIndex",9)},scroll:function(a){var b=this.get("effect")===e,c=this.get("viewSize")[b?0:1]*a.toIndex,d={};if(d[b?"left":"top"]=-c+"px",this.anim&&this.anim.stop(),a.fromIndex>-1){var f=this,g=this.get("duration"),h=this.get("easing");this.anim=this.content.animate(d,g,h,function(){f.anim=null})}else this.content.css(d)}};h[f]=h.scroll,h[e]=h.scroll,c.exports.Effects=h}),define("arale/switchable/1.0.2/plugins/autoplay",["$"],function(a,b,c){function d(a,b){function c(){c.stop(),d=setTimeout(a,b)}b=b||200;var d;return c.stop=function(){d&&(clearTimeout(d),d=0)},c}function e(a){var b=g.scrollTop(),c=b+g.height(),d=a.offset().top,e=d+a.height();return c>d&&e>b}var f=a("$"),g=f(window);c.exports={attrs:{autoplay:!1,interval:5e3},isNeeded:function(){return this.get("autoplay")},install:function(){function a(){b(),j.paused=!1,c=setInterval(function(){j.paused||j.next()},i)}function b(){c&&(clearInterval(c),c=null),j.paused=!0}var c,f=this.element,h="."+this.cid,i=this.get("interval"),j=this;a(),this.stop=b,this.start=a,this._scrollDetect=d(function(){j[e(f)?"start":"stop"]()}),g.on("scroll"+h,this._scrollDetect),this.element.hover(b,a)},destroy:function(){var a="."+this.cid;this.stop&&this.stop(),this._scrollDetect&&(this._scrollDetect.stop(),g.off("scroll"+a))}}}),define("arale/switchable/1.0.2/plugins/circular",["$","arale/switchable/1.0.2/plugins/effects","arale/easing/1.0.0/easing"],function(a,b,c){function d(a,b,c){var d=this.get("step"),e=this.get("length"),g=a?e-1:0,h=g*d,i=(g+1)*d,j=a?c:-c*e,k=a?-c*e:c*e,l=f(this.get("panels").get().slice(h,i));return l.css("position","relative"),l.css(b,k+"px"),j}function e(a,b,c){var d=this.get("step"),e=this.get("length"),g=a?e-1:0,h=g*d,i=(g+1)*d,j=f(this.get("panels").get().slice(h,i));j.css("position",""),j.css(b,""),this.content.css(b,a?-c*(e-1):"")}var f=a("$"),g="scrollx",h="scrolly",i=a("arale/switchable/1.0.2/plugins/effects").Effects;c.exports={isNeeded:function(){var a=this.get("effect"),b=this.get("circular");return b&&(a===g||a===h)},install:function(){this._scrollType=this.get("effect"),this.set("effect","scrollCircular")}},i.scrollCircular=function(a){var b=a.toIndex,c=a.fromIndex,f=this._scrollType===g,h=f?"left":"top",i=this.get("viewSize")[f?0:1],j=-i*b,k={};if(k[h]=j+"px",c>-1){this.anim&&this.anim.stop(!1,!0);var l=this.get("length"),m=0===c&&b===l-1,n=c===l-1&&0===b,o=void 0===this._isBackward?c>b:this._isBackward,p=o&&m||!o&&n;p&&(j=d.call(this,o,h,i),k[h]=j+"px");var q=this.get("duration"),r=this.get("easing"),s=this;this.anim=this.content.animate(k,q,r,function(){s.anim=null,p&&e.call(s,o,h,i)})}else this.content.css(k)}});
diff --git a/dist/tabs-debug.js b/dist/tabs-debug.js
index 1e8f902..790c150 100644
--- a/dist/tabs-debug.js
+++ b/dist/tabs-debug.js
@@ -87,7 +87,7 @@ define("arale/switchable/1.0.2/switchable-debug", [ "$-debug", "arale/widget/1.1
             var role = {};
             var roles = [ "trigger", "panel", "nav", "content" ];
             $.each(roles, function(index, key) {
-                var elems = self.$("[data-role=" + key + "]");
+                var elems = self.$("[data-switchable-role=" + key + "]");
                 if (elems.length) {
                     role[key] = elems;
                 }
diff --git a/dist/tabs.js b/dist/tabs.js
index 3f7f33c..ad258c4 100644
--- a/dist/tabs.js
+++ b/dist/tabs.js
@@ -1 +1 @@
-define("arale/switchable/1.0.2/tabs",["./switchable","$","arale/widget/1.1.1/widget","arale/base/1.1.1/base","arale/class/1.1.0/class","arale/events/1.1.0/events","./plugins/effects","arale/easing/1.0.0/easing","./plugins/autoplay","./plugins/circular"],function(a,b,c){var d=a("./switchable");c.exports=d.extend({})}),define("arale/switchable/1.0.2/switchable",["$","arale/widget/1.1.1/widget","arale/base/1.1.1/base","arale/class/1.1.0/class","arale/events/1.1.0/events","arale/switchable/1.0.2/plugins/effects","arale/easing/1.0.0/easing","arale/switchable/1.0.2/plugins/autoplay","arale/switchable/1.0.2/plugins/circular"],function(a,b,c){function d(a,b,c,d){for(var e=f("<ul>"),g=0;a>g;g++){var h=g===b?c:"";f("<li>",{"class":h,html:g+1}).appendTo(e)}return d?e.children():e}function e(a){return{UI_SWITCHABLE:a||"",NAV_CLASS:a?a+"-nav":"",CONTENT_CLASS:a?a+"-content":"",TRIGGER_CLASS:a?a+"-trigger":"",PANEL_CLASS:a?a+"-panel":"",PREV_BTN_CLASS:a?a+"-prev-btn":"",NEXT_BTN_CLASS:a?a+"-next-btn":""}}var f=a("$"),g=a("arale/widget/1.1.1/widget"),h=a("arale/switchable/1.0.2/plugins/effects"),i=a("arale/switchable/1.0.2/plugins/autoplay"),j=a("arale/switchable/1.0.2/plugins/circular"),k=g.extend({attrs:{triggers:{value:[],getter:function(a){return f(a)}},panels:{value:[],getter:function(a){return f(a)}},classPrefix:"ui-switchable",hasTriggers:!0,triggerType:"hover",delay:100,activeIndex:{value:0,setter:function(a){return parseInt(a)||0}},step:1,length:{readOnly:!0,getter:function(){return Math.ceil(this.get("panels").length/this.get("step"))}},viewSize:[],activeTriggerClass:{getter:function(a){return a?a:this.get("classPrefix")+"-active"}}},setup:function(){this._initConstClass(),this._initElement();var a=this._getDatasetRole();this._initPanels(a),this._initTriggers(a),this._bindTriggers(),this._initPlugins(),this.render()},_initConstClass:function(){this.CONST=e(this.get("classPrefix"))},_initElement:function(){this.element.addClass(this.CONST.UI_SWITCHABLE)},_getDatasetRole:function(){var a=this,b={},c=["trigger","panel","nav","content"];return f.each(c,function(c,d){var e=a.$("[data-role="+d+"]");e.length&&(b[d]=e)}),b},_initPanels:function(a){var b=this.get("panels");if(b.length>0||(a.panel?this.set("panels",b=a.panel):a.content&&(this.set("panels",b=a.content.find("> *")),this.content=a.content)),0===b.length)throw new Error("panels.length is ZERO");this.content||(this.content=b.parent()),this.content.addClass(this.CONST.CONTENT_CLASS),this.get("panels").addClass(this.CONST.PANEL_CLASS)},_initTriggers:function(a){var b=this.get("triggers");b.length>0||(a.trigger?this.set("triggers",b=a.trigger):a.nav?(b=a.nav.find("> *"),0===b.length&&(b=d(this.get("length"),this.get("activeIndex"),this.get("activeTriggerClass"),!0).appendTo(a.nav)),this.set("triggers",b),this.nav=a.nav):this.get("hasTriggers")&&(this.nav=d(this.get("length"),this.get("activeIndex"),this.get("activeTriggerClass")).appendTo(this.element),this.set("triggers",b=this.nav.children()))),!this.nav&&b.length&&(this.nav=b.parent()),this.nav&&this.nav.addClass(this.CONST.NAV_CLASS),b.addClass(this.CONST.TRIGGER_CLASS).each(function(a,b){f(b).data("value",a)})},_bindTriggers:function(){function a(a){c._onFocusTrigger(a.type,f(this).data("value"))}function b(){clearTimeout(c._switchTimer)}var c=this,d=this.get("triggers");"click"===this.get("triggerType")?d.click(a):d.hover(a,b)},_onFocusTrigger:function(a,b){var c=this;"click"===a?this.switchTo(b):this._switchTimer=setTimeout(function(){c.switchTo(b)},this.get("delay"))},_initPlugins:function(){this._plugins=[],this._plug(h),this._plug(i),this._plug(j)},switchTo:function(a){this.set("activeIndex",a)},_onRenderActiveIndex:function(a,b){this._switchTo(a,b)},_switchTo:function(a,b){this.trigger("switch",a,b),this._switchTrigger(a,b),this._switchPanel(this._getPanelInfo(a,b)),this.trigger("switched",a,b),this._isBackward=void 0},_switchTrigger:function(a,b){var c=this.get("triggers");c.length<1||(c.eq(b).removeClass(this.get("activeTriggerClass")),c.eq(a).addClass(this.get("activeTriggerClass")))},_switchPanel:function(a){a.fromPanels.hide(),a.toPanels.show()},_getPanelInfo:function(a,b){var c,d,e=this.get("panels").get(),g=this.get("step");return b>-1&&(c=e.slice(b*g,(b+1)*g)),d=e.slice(a*g,(a+1)*g),{toIndex:a,fromIndex:b,toPanels:f(d),fromPanels:f(c)}},prev:function(){this._isBackward=!0;var a=this.get("activeIndex"),b=(a-1+this.get("length"))%this.get("length");this.switchTo(b)},next:function(){this._isBackward=!1;var a=this.get("activeIndex"),b=(a+1)%this.get("length");this.switchTo(b)},_plug:function(a){var b=a.attrs;if(b)for(var c in b)!b.hasOwnProperty(c)||c in this.attrs||this.set(c,b[c]);a.isNeeded.call(this)&&(a.install&&a.install.call(this),this._plugins.push(a))},destroy:function(){var a=this;f.each(this._plugins,function(b,c){c.destroy&&c.destroy.call(a)}),k.superclass.destroy.call(this)}});c.exports=k}),define("arale/switchable/1.0.2/plugins/effects",["$","arale/easing/1.0.0/easing"],function(a,b,c){var d=a("$");a("arale/easing/1.0.0/easing");var e="scrollx",f="scrolly",g="fade";c.exports={attrs:{effect:"none",easing:"linear",duration:500},isNeeded:function(){return"none"!==this.get("effect")},install:function(){var a=this.get("panels");a.show();var b=this.get("effect"),c=this.get("step"),f=d.isFunction(b);if(f||0!==b.indexOf("scroll")){if(!f&&b===g){var i=this.get("activeIndex"),j=i*c,k=j+c-1;a.each(function(a,b){var c=a>=j&&k>=a;d(b).css({opacity:c?1:0,position:"absolute",zIndex:c?9:1})})}}else{var l=this.content,m=a.eq(0);l.css("position","relative"),"static"===l.parent().css("position")&&l.parent().css("position","relative"),b===e&&(a.css("float","left"),l.width("35791197px"));var n=this.get("viewSize");if(n[0]||(n[0]=m.outerWidth()*c,n[1]=m.outerHeight()*c,this.set("viewSize",n)),!n[0])throw new Error("Please specify viewSize manually")}this._switchPanel=function(a){var b=this.get("effect"),c=d.isFunction(b)?b:h[b];c.call(this,a)}}};var h={fade:function(a){if(this.get("step")>1)throw new Error('Effect "fade" only supports step === 1');var b=a.fromPanels.eq(0),c=a.toPanels.eq(0);if(this.anim&&this.anim.stop(!1,!0),c.css("opacity",1),c.show(),a.fromIndex>-1){var d=this,e=this.get("duration"),f=this.get("easing");this.anim=b.animate({opacity:0},e,f,function(){d.anim=null,c.css("zIndex",9),b.css("zIndex",1),b.css("display","none")})}else c.css("zIndex",9)},scroll:function(a){var b=this.get("effect")===e,c=this.get("viewSize")[b?0:1]*a.toIndex,d={};if(d[b?"left":"top"]=-c+"px",this.anim&&this.anim.stop(),a.fromIndex>-1){var f=this,g=this.get("duration"),h=this.get("easing");this.anim=this.content.animate(d,g,h,function(){f.anim=null})}else this.content.css(d)}};h[f]=h.scroll,h[e]=h.scroll,c.exports.Effects=h}),define("arale/switchable/1.0.2/plugins/autoplay",["$"],function(a,b,c){function d(a,b){function c(){c.stop(),d=setTimeout(a,b)}b=b||200;var d;return c.stop=function(){d&&(clearTimeout(d),d=0)},c}function e(a){var b=g.scrollTop(),c=b+g.height(),d=a.offset().top,e=d+a.height();return c>d&&e>b}var f=a("$"),g=f(window);c.exports={attrs:{autoplay:!1,interval:5e3},isNeeded:function(){return this.get("autoplay")},install:function(){function a(){b(),j.paused=!1,c=setInterval(function(){j.paused||j.next()},i)}function b(){c&&(clearInterval(c),c=null),j.paused=!0}var c,f=this.element,h="."+this.cid,i=this.get("interval"),j=this;a(),this.stop=b,this.start=a,this._scrollDetect=d(function(){j[e(f)?"start":"stop"]()}),g.on("scroll"+h,this._scrollDetect),this.element.hover(b,a)},destroy:function(){var a="."+this.cid;this.stop&&this.stop(),this._scrollDetect&&(this._scrollDetect.stop(),g.off("scroll"+a))}}}),define("arale/switchable/1.0.2/plugins/circular",["$","arale/switchable/1.0.2/plugins/effects","arale/easing/1.0.0/easing"],function(a,b,c){function d(a,b,c){var d=this.get("step"),e=this.get("length"),g=a?e-1:0,h=g*d,i=(g+1)*d,j=a?c:-c*e,k=a?-c*e:c*e,l=f(this.get("panels").get().slice(h,i));return l.css("position","relative"),l.css(b,k+"px"),j}function e(a,b,c){var d=this.get("step"),e=this.get("length"),g=a?e-1:0,h=g*d,i=(g+1)*d,j=f(this.get("panels").get().slice(h,i));j.css("position",""),j.css(b,""),this.content.css(b,a?-c*(e-1):"")}var f=a("$"),g="scrollx",h="scrolly",i=a("arale/switchable/1.0.2/plugins/effects").Effects;c.exports={isNeeded:function(){var a=this.get("effect"),b=this.get("circular");return b&&(a===g||a===h)},install:function(){this._scrollType=this.get("effect"),this.set("effect","scrollCircular")}},i.scrollCircular=function(a){var b=a.toIndex,c=a.fromIndex,f=this._scrollType===g,h=f?"left":"top",i=this.get("viewSize")[f?0:1],j=-i*b,k={};if(k[h]=j+"px",c>-1){this.anim&&this.anim.stop(!1,!0);var l=this.get("length"),m=0===c&&b===l-1,n=c===l-1&&0===b,o=void 0===this._isBackward?c>b:this._isBackward,p=o&&m||!o&&n;p&&(j=d.call(this,o,h,i),k[h]=j+"px");var q=this.get("duration"),r=this.get("easing"),s=this;this.anim=this.content.animate(k,q,r,function(){s.anim=null,p&&e.call(s,o,h,i)})}else this.content.css(k)}});
+define("arale/switchable/1.0.2/tabs",["./switchable","$","arale/widget/1.1.1/widget","arale/base/1.1.1/base","arale/class/1.1.0/class","arale/events/1.1.0/events","./plugins/effects","arale/easing/1.0.0/easing","./plugins/autoplay","./plugins/circular"],function(a,b,c){var d=a("./switchable");c.exports=d.extend({})}),define("arale/switchable/1.0.2/switchable",["$","arale/widget/1.1.1/widget","arale/base/1.1.1/base","arale/class/1.1.0/class","arale/events/1.1.0/events","arale/switchable/1.0.2/plugins/effects","arale/easing/1.0.0/easing","arale/switchable/1.0.2/plugins/autoplay","arale/switchable/1.0.2/plugins/circular"],function(a,b,c){function d(a,b,c,d){for(var e=f("<ul>"),g=0;a>g;g++){var h=g===b?c:"";f("<li>",{"class":h,html:g+1}).appendTo(e)}return d?e.children():e}function e(a){return{UI_SWITCHABLE:a||"",NAV_CLASS:a?a+"-nav":"",CONTENT_CLASS:a?a+"-content":"",TRIGGER_CLASS:a?a+"-trigger":"",PANEL_CLASS:a?a+"-panel":"",PREV_BTN_CLASS:a?a+"-prev-btn":"",NEXT_BTN_CLASS:a?a+"-next-btn":""}}var f=a("$"),g=a("arale/widget/1.1.1/widget"),h=a("arale/switchable/1.0.2/plugins/effects"),i=a("arale/switchable/1.0.2/plugins/autoplay"),j=a("arale/switchable/1.0.2/plugins/circular"),k=g.extend({attrs:{triggers:{value:[],getter:function(a){return f(a)}},panels:{value:[],getter:function(a){return f(a)}},classPrefix:"ui-switchable",hasTriggers:!0,triggerType:"hover",delay:100,activeIndex:{value:0,setter:function(a){return parseInt(a)||0}},step:1,length:{readOnly:!0,getter:function(){return Math.ceil(this.get("panels").length/this.get("step"))}},viewSize:[],activeTriggerClass:{getter:function(a){return a?a:this.get("classPrefix")+"-active"}}},setup:function(){this._initConstClass(),this._initElement();var a=this._getDatasetRole();this._initPanels(a),this._initTriggers(a),this._bindTriggers(),this._initPlugins(),this.render()},_initConstClass:function(){this.CONST=e(this.get("classPrefix"))},_initElement:function(){this.element.addClass(this.CONST.UI_SWITCHABLE)},_getDatasetRole:function(){var a=this,b={},c=["trigger","panel","nav","content"];return f.each(c,function(c,d){var e=a.$("[data-switchable-role="+d+"]");e.length&&(b[d]=e)}),b},_initPanels:function(a){var b=this.get("panels");if(b.length>0||(a.panel?this.set("panels",b=a.panel):a.content&&(this.set("panels",b=a.content.find("> *")),this.content=a.content)),0===b.length)throw new Error("panels.length is ZERO");this.content||(this.content=b.parent()),this.content.addClass(this.CONST.CONTENT_CLASS),this.get("panels").addClass(this.CONST.PANEL_CLASS)},_initTriggers:function(a){var b=this.get("triggers");b.length>0||(a.trigger?this.set("triggers",b=a.trigger):a.nav?(b=a.nav.find("> *"),0===b.length&&(b=d(this.get("length"),this.get("activeIndex"),this.get("activeTriggerClass"),!0).appendTo(a.nav)),this.set("triggers",b),this.nav=a.nav):this.get("hasTriggers")&&(this.nav=d(this.get("length"),this.get("activeIndex"),this.get("activeTriggerClass")).appendTo(this.element),this.set("triggers",b=this.nav.children()))),!this.nav&&b.length&&(this.nav=b.parent()),this.nav&&this.nav.addClass(this.CONST.NAV_CLASS),b.addClass(this.CONST.TRIGGER_CLASS).each(function(a,b){f(b).data("value",a)})},_bindTriggers:function(){function a(a){c._onFocusTrigger(a.type,f(this).data("value"))}function b(){clearTimeout(c._switchTimer)}var c=this,d=this.get("triggers");"click"===this.get("triggerType")?d.click(a):d.hover(a,b)},_onFocusTrigger:function(a,b){var c=this;"click"===a?this.switchTo(b):this._switchTimer=setTimeout(function(){c.switchTo(b)},this.get("delay"))},_initPlugins:function(){this._plugins=[],this._plug(h),this._plug(i),this._plug(j)},switchTo:function(a){this.set("activeIndex",a)},_onRenderActiveIndex:function(a,b){this._switchTo(a,b)},_switchTo:function(a,b){this.trigger("switch",a,b),this._switchTrigger(a,b),this._switchPanel(this._getPanelInfo(a,b)),this.trigger("switched",a,b),this._isBackward=void 0},_switchTrigger:function(a,b){var c=this.get("triggers");c.length<1||(c.eq(b).removeClass(this.get("activeTriggerClass")),c.eq(a).addClass(this.get("activeTriggerClass")))},_switchPanel:function(a){a.fromPanels.hide(),a.toPanels.show()},_getPanelInfo:function(a,b){var c,d,e=this.get("panels").get(),g=this.get("step");return b>-1&&(c=e.slice(b*g,(b+1)*g)),d=e.slice(a*g,(a+1)*g),{toIndex:a,fromIndex:b,toPanels:f(d),fromPanels:f(c)}},prev:function(){this._isBackward=!0;var a=this.get("activeIndex"),b=(a-1+this.get("length"))%this.get("length");this.switchTo(b)},next:function(){this._isBackward=!1;var a=this.get("activeIndex"),b=(a+1)%this.get("length");this.switchTo(b)},_plug:function(a){var b=a.attrs;if(b)for(var c in b)!b.hasOwnProperty(c)||c in this.attrs||this.set(c,b[c]);a.isNeeded.call(this)&&(a.install&&a.install.call(this),this._plugins.push(a))},destroy:function(){var a=this;f.each(this._plugins,function(b,c){c.destroy&&c.destroy.call(a)}),k.superclass.destroy.call(this)}});c.exports=k}),define("arale/switchable/1.0.2/plugins/effects",["$","arale/easing/1.0.0/easing"],function(a,b,c){var d=a("$");a("arale/easing/1.0.0/easing");var e="scrollx",f="scrolly",g="fade";c.exports={attrs:{effect:"none",easing:"linear",duration:500},isNeeded:function(){return"none"!==this.get("effect")},install:function(){var a=this.get("panels");a.show();var b=this.get("effect"),c=this.get("step"),f=d.isFunction(b);if(f||0!==b.indexOf("scroll")){if(!f&&b===g){var i=this.get("activeIndex"),j=i*c,k=j+c-1;a.each(function(a,b){var c=a>=j&&k>=a;d(b).css({opacity:c?1:0,position:"absolute",zIndex:c?9:1})})}}else{var l=this.content,m=a.eq(0);l.css("position","relative"),"static"===l.parent().css("position")&&l.parent().css("position","relative"),b===e&&(a.css("float","left"),l.width("35791197px"));var n=this.get("viewSize");if(n[0]||(n[0]=m.outerWidth()*c,n[1]=m.outerHeight()*c,this.set("viewSize",n)),!n[0])throw new Error("Please specify viewSize manually")}this._switchPanel=function(a){var b=this.get("effect"),c=d.isFunction(b)?b:h[b];c.call(this,a)}}};var h={fade:function(a){if(this.get("step")>1)throw new Error('Effect "fade" only supports step === 1');var b=a.fromPanels.eq(0),c=a.toPanels.eq(0);if(this.anim&&this.anim.stop(!1,!0),c.css("opacity",1),c.show(),a.fromIndex>-1){var d=this,e=this.get("duration"),f=this.get("easing");this.anim=b.animate({opacity:0},e,f,function(){d.anim=null,c.css("zIndex",9),b.css("zIndex",1),b.css("display","none")})}else c.css("zIndex",9)},scroll:function(a){var b=this.get("effect")===e,c=this.get("viewSize")[b?0:1]*a.toIndex,d={};if(d[b?"left":"top"]=-c+"px",this.anim&&this.anim.stop(),a.fromIndex>-1){var f=this,g=this.get("duration"),h=this.get("easing");this.anim=this.content.animate(d,g,h,function(){f.anim=null})}else this.content.css(d)}};h[f]=h.scroll,h[e]=h.scroll,c.exports.Effects=h}),define("arale/switchable/1.0.2/plugins/autoplay",["$"],function(a,b,c){function d(a,b){function c(){c.stop(),d=setTimeout(a,b)}b=b||200;var d;return c.stop=function(){d&&(clearTimeout(d),d=0)},c}function e(a){var b=g.scrollTop(),c=b+g.height(),d=a.offset().top,e=d+a.height();return c>d&&e>b}var f=a("$"),g=f(window);c.exports={attrs:{autoplay:!1,interval:5e3},isNeeded:function(){return this.get("autoplay")},install:function(){function a(){b(),j.paused=!1,c=setInterval(function(){j.paused||j.next()},i)}function b(){c&&(clearInterval(c),c=null),j.paused=!0}var c,f=this.element,h="."+this.cid,i=this.get("interval"),j=this;a(),this.stop=b,this.start=a,this._scrollDetect=d(function(){j[e(f)?"start":"stop"]()}),g.on("scroll"+h,this._scrollDetect),this.element.hover(b,a)},destroy:function(){var a="."+this.cid;this.stop&&this.stop(),this._scrollDetect&&(this._scrollDetect.stop(),g.off("scroll"+a))}}}),define("arale/switchable/1.0.2/plugins/circular",["$","arale/switchable/1.0.2/plugins/effects","arale/easing/1.0.0/easing"],function(a,b,c){function d(a,b,c){var d=this.get("step"),e=this.get("length"),g=a?e-1:0,h=g*d,i=(g+1)*d,j=a?c:-c*e,k=a?-c*e:c*e,l=f(this.get("panels").get().slice(h,i));return l.css("position","relative"),l.css(b,k+"px"),j}function e(a,b,c){var d=this.get("step"),e=this.get("length"),g=a?e-1:0,h=g*d,i=(g+1)*d,j=f(this.get("panels").get().slice(h,i));j.css("position",""),j.css(b,""),this.content.css(b,a?-c*(e-1):"")}var f=a("$"),g="scrollx",h="scrolly",i=a("arale/switchable/1.0.2/plugins/effects").Effects;c.exports={isNeeded:function(){var a=this.get("effect"),b=this.get("circular");return b&&(a===g||a===h)},install:function(){this._scrollType=this.get("effect"),this.set("effect","scrollCircular")}},i.scrollCircular=function(a){var b=a.toIndex,c=a.fromIndex,f=this._scrollType===g,h=f?"left":"top",i=this.get("viewSize")[f?0:1],j=-i*b,k={};if(k[h]=j+"px",c>-1){this.anim&&this.anim.stop(!1,!0);var l=this.get("length"),m=0===c&&b===l-1,n=c===l-1&&0===b,o=void 0===this._isBackward?c>b:this._isBackward,p=o&&m||!o&&n;p&&(j=d.call(this,o,h,i),k[h]=j+"px");var q=this.get("duration"),r=this.get("easing"),s=this;this.anim=this.content.animate(k,q,r,function(){s.anim=null,p&&e.call(s,o,h,i)})}else this.content.css(k)}});
diff --git a/examples/accordion.md b/examples/accordion.md
index 7266e88..4b305ea 100644
--- a/examples/accordion.md
+++ b/examples/accordion.md
@@ -62,17 +62,17 @@
 
 ````html
 <div id="accordion-demo-1" class="accordion-demo">
-    <div class="ui-switchable-trigger ui-switchable-active" data-role="trigger"><h3>标题A</h3></div>
-    <div class="ui-switchable-panel" data-role="panel">
+    <div class="ui-switchable-trigger ui-switchable-active" data-switchable-role="trigger"><h3>标题A</h3></div>
+    <div class="ui-switchable-panel" data-switchable-role="panel">
         1、支持鼠标滑过和点击触点两种方式<br/>
         2、支持同时展开多个面板
     </div>
-    <div class="ui-switchable-trigger" data-role="trigger"><h3>标题B</h3></div>
-    <div class="ui-switchable-panel hidden" data-role="panel">内容B<br/>内容B<br/>内容B</div>
-    <div class="ui-switchable-trigger" data-role="trigger"><h3>标题C</h3></div>
-    <div class="ui-switchable-panel hidden" data-role="panel">内容C<br/>内容C<br/>内容C<br/>内容C<br/>内容C</div>
-    <div class="ui-switchable-trigger last-trigger" data-role="trigger"><h3>标题D</h3></div>
-    <div class="ui-switchable-panel last-panel hidden" data-role="panel">内容D<br/>内容D<br/>内容D</div>
+    <div class="ui-switchable-trigger" data-switchable-role="trigger"><h3>标题B</h3></div>
+    <div class="ui-switchable-panel hidden" data-switchable-role="panel">内容B<br/>内容B<br/>内容B</div>
+    <div class="ui-switchable-trigger" data-switchable-role="trigger"><h3>标题C</h3></div>
+    <div class="ui-switchable-panel hidden" data-switchable-role="panel">内容C<br/>内容C<br/>内容C<br/>内容C<br/>内容C</div>
+    <div class="ui-switchable-trigger last-trigger" data-switchable-role="trigger"><h3>标题D</h3></div>
+    <div class="ui-switchable-panel last-panel hidden" data-switchable-role="panel">内容D<br/>内容D<br/>内容D</div>
 </div>
 ````
 
diff --git a/examples/autorender.md b/examples/autorender.md
index e60c8b3..d11076b 100644
--- a/examples/autorender.md
+++ b/examples/autorender.md
@@ -63,13 +63,13 @@
 
 ````html
     <div id="tab-demo-1" class="tab-demo" data-widget="tabs">
-        <ul class="ui-switchable-nav" data-role="nav">
+        <ul class="ui-switchable-nav" data-switchable-role="nav">
             <li>标题 A</li>
             <li>标题 B</li>
             <li>标题 C</li>
             <li>标题 D</li>
         </ul>
-        <div class="ui-switchable-content" data-role="content">
+        <div class="ui-switchable-content" data-switchable-role="content">
             <div class="hidden">
                 内容 A
                 <pre>
@@ -141,12 +141,12 @@
 
 ````html
 <div id="slide-demo-2" class="slide-demo" data-widget="slide" data-active-index="1" data-effect="fade" data-interval="2000" data-easing="easeOutStrong">
-    <ul data-role="content" class="ui-switchable-content">
+    <ul data-switchable-role="content" class="ui-switchable-content">
         <li class="hidden ui-switchable-panel"><a href="#"><img src="./assets/slide_1.jpg" /></a></li>
         <li class="ui-switchable-panel"><a href="#"><img src="./assets/slide_2.jpg" /></a></li>
         <li class="hidden ui-switchable-panel"><a href="#"><img src="./assets/slide_3.jpg" /></a></li>
     </ul>
-    <ul data-role="nav" class="ui-switchable-nav">
+    <ul data-switchable-role="nav" class="ui-switchable-nav">
         <li class="ui-switchable-trigger">●</li>
         <li class="ui-switchable-trigger ui-switchable-active">●</li>
         <li class="ui-switchable-trigger">●</li>
@@ -203,10 +203,10 @@
 
 ````html
 <div id="carousel-demo-1" class="carousel-demo" data-widget="carousel" data-has-triggers="false" data-effect="scrollx" data-easing="easeOutStrong" data-step="2" data-view-size="[332]" data-circular="false" data-autoplay="true">
-    <span class="ui-switchable-prev-btn" data-role="prev">&lsaquo; 上一页</span>
-    <span class="ui-switchable-next-btn" data-role="next">下一页 &rsaquo;</span>
+    <span class="ui-switchable-prev-btn" data-switchable-role="prev">&lsaquo; 上一页</span>
+    <span class="ui-switchable-next-btn" data-switchable-role="next">下一页 &rsaquo;</span>
     <div class="scroller">
-        <div class="ui-switchable-content" data-role="content">
+        <div class="ui-switchable-content" data-switchable-role="content">
             <img src="https://i.alipayobjects.com/e/201306/SzpUxptFt.png" alt="" class="ui-switchable-panel">
             <img src="https://i.alipayobjects.com/e/201306/SzpaKukGz.png" alt="" class="ui-switchable-panel">
             <img src="https://i.alipayobjects.com/e/201306/SzpBApQi5.png" alt="" class="ui-switchable-panel">
@@ -265,17 +265,17 @@
 
 ````html
 <div id="accordion-demo-1" class="accordion-demo" data-widget="accordion">
-    <div class="ui-switchable-trigger ui-switchable-active" data-role="trigger"><h3>标题A</h3></div>
-    <div class="ui-switchable-panel" data-role="panel">
+    <div class="ui-switchable-trigger ui-switchable-active" data-switchable-role="trigger"><h3>标题A</h3></div>
+    <div class="ui-switchable-panel" data-switchable-role="panel">
         1、支持鼠标滑过和点击触点两种方式<br/>
         2、支持同时展开多个面板
     </div>
-    <div class="ui-switchable-trigger" data-role="trigger"><h3>标题B</h3></div>
-    <div class="ui-switchable-panel hidden" data-role="panel">内容B<br/>内容B<br/>内容B</div>
-    <div class="ui-switchable-trigger" data-role="trigger"><h3>标题C</h3></div>
-    <div class="ui-switchable-panel hidden" data-role="panel">内容C<br/>内容C<br/>内容C<br/>内容C<br/>内容C</div>
-    <div class="ui-switchable-trigger last-trigger" data-role="trigger"><h3>标题D</h3></div>
-    <div class="ui-switchable-panel last-panel hidden" data-role="panel">内容D<br/>内容D<br/>内容D</div>
+    <div class="ui-switchable-trigger" data-switchable-role="trigger"><h3>标题B</h3></div>
+    <div class="ui-switchable-panel hidden" data-switchable-role="panel">内容B<br/>内容B<br/>内容B</div>
+    <div class="ui-switchable-trigger" data-switchable-role="trigger"><h3>标题C</h3></div>
+    <div class="ui-switchable-panel hidden" data-switchable-role="panel">内容C<br/>内容C<br/>内容C<br/>内容C<br/>内容C</div>
+    <div class="ui-switchable-trigger last-trigger" data-switchable-role="trigger"><h3>标题D</h3></div>
+    <div class="ui-switchable-panel last-panel hidden" data-switchable-role="panel">内容D<br/>内容D<br/>内容D</div>
 </div>
 ````
 
diff --git a/examples/carousel.md b/examples/carousel.md
index 0acf094..5d4ffd0 100644
--- a/examples/carousel.md
+++ b/examples/carousel.md
@@ -64,10 +64,10 @@ step 为步长, 即每切换一次, 移动多少个 panels. 而 viewSize 为滑
 
 ````html
 <div id="carousel-demo-1" class="carousel-demo">
-    <span class="ui-switchable-prev-btn" data-role="prev">&lsaquo; 上一页</span>
-    <span class="ui-switchable-next-btn" data-role="next">下一页 &rsaquo;</span>
+    <span class="ui-switchable-prev-btn" data-switchable-role="prev">&lsaquo; 上一页</span>
+    <span class="ui-switchable-next-btn" data-switchable-role="next">下一页 &rsaquo;</span>
     <div class="scroller">
-        <div class="ui-switchable-content" data-role="content">
+        <div class="ui-switchable-content" data-switchable-role="content">
             <img src="https://i.alipayobjects.com/e/201306/SzpUxptFt.png" alt="" class="ui-switchable-panel">
             <img src="https://i.alipayobjects.com/e/201306/SzpaKukGz.png" alt="" class="ui-switchable-panel">
             <img src="https://i.alipayobjects.com/e/201306/SzpBApQi5.png" alt="" class="ui-switchable-panel">
@@ -165,10 +165,10 @@ seajs.use(['carousel', '$'], function(Carousel, $) {
 
 ````html
 <div id="carousel-demo-2" class="carousel-demo">
-    <span class="ui-switchable-prev-btn" data-role="prev">&lsaquo; 上一页</span>
-    <span class="ui-switchable-next-btn" data-role="next">下一页 &rsaquo;</span>
+    <span class="ui-switchable-prev-btn" data-switchable-role="prev">&lsaquo; 上一页</span>
+    <span class="ui-switchable-next-btn" data-switchable-role="next">下一页 &rsaquo;</span>
     <div class="scroller">
-        <div class="ui-switchable-content" data-role="content">
+        <div class="ui-switchable-content" data-switchable-role="content">
             <img src="./assets/slide_1.jpg" alt="" class="ui-switchable-panel">
             <img src="./assets/slide_2.jpg" alt="" class="ui-switchable-panel">
             <img src="./assets/slide_2.jpg" alt="" class="ui-switchable-panel">
diff --git a/examples/index.md b/examples/index.md
index c2ab12b..77e991d 100644
--- a/examples/index.md
+++ b/examples/index.md
@@ -101,7 +101,7 @@
 ````
 
 
-## data-role 形式
+## data-switchable-role 形式
 
 ````css
 #slide-demo-1 {
@@ -157,7 +157,7 @@
 
 ````html
 <div id="slide-demo-1" class="slide-demo">
-    <ul class="ui-switchable-content" data-role="content">
+    <ul class="ui-switchable-content" data-switchable-role="content">
         <li class="ui-switchable-panel"><a href="#"><img src="./assets/slide_1.jpg" /></a></li>
         <li class="hidden ui-switchable-panel"><a href="#"><img src="./assets/slide_2.jpg" /></a></li>
         <li class="hidden ui-switchable-panel"><a href="#"><img src="./assets/slide_3.jpg" /></a></li>
@@ -179,9 +179,9 @@ seajs.use(['slide'], function(Slide) {
 
 ## 自定义 Class
 
-DOM 中, 默认会给 element 添加  `${classPrefix}` 类, data-role="content" 添加 `${classPrefix}-content`, data-role="nav" 添加 `${classPrefix}-nav`,
-data-role="panel" 添加 `${classPrefix}-panel`, data-role="trigger" 添加 `${classPrefix}-trigger`,
-data-role="prev" 添加 `${classPrefix}-prev-btn`, data-role="next" 添加 `${classPrefix}-next-btn`, prev/next 元素不可用状态时添加 `${classPrefix}-disabled-btn`,
+DOM 中, 默认会给 element 添加  `${classPrefix}` 类, data-switchable-role="content" 添加 `${classPrefix}-content`, data-switchable-role="nav" 添加 `${classPrefix}-nav`,
+data-switchable-role="panel" 添加 `${classPrefix}-panel`, data-switchable-role="trigger" 添加 `${classPrefix}-trigger`,
+data-switchable-role="prev" 添加 `${classPrefix}-prev-btn`, data-switchable-role="next" 添加 `${classPrefix}-next-btn`, prev/next 元素不可用状态时添加 `${classPrefix}-disabled-btn`,
 当前激活的 trigger 添加 `${classPrefix}-active`.
 
 可以通过设置 classPrefix 为 `null` 或 `''` , 这样不会在 DOM 中添加 class.
diff --git a/examples/slide.md b/examples/slide.md
index f72a065..4c264cf 100644
--- a/examples/slide.md
+++ b/examples/slide.md
@@ -71,7 +71,7 @@
 
 ````html
 <div id="slide-demo-1" class="slide-demo">
-    <ul class="ui-switchable-content" data-role="content">
+    <ul class="ui-switchable-content" data-switchable-role="content">
         <li class="ui-switchable-panel"><a href="#"><img src="./assets/slide_1.jpg" /></a></li>
         <li class="hidden ui-switchable-panel"><a href="#"><img src="./assets/slide_2.jpg" /></a></li>
         <li class="hidden ui-switchable-panel"><a href="#"><img src="./assets/slide_3.jpg" /></a></li>
@@ -144,12 +144,12 @@ seajs.use(['slide'], function(Slide) {
 
 ````html
 <div id="slide-demo-2" class="slide-demo">
-    <ul data-role="content" class="ui-switchable-content">
+    <ul data-switchable-role="content" class="ui-switchable-content">
         <li class="hidden ui-switchable-panel"><a href="#"><img src="./assets/slide_1.jpg" /></a></li>
         <li class="ui-switchable-panel"><a href="#"><img src="./assets/slide_2.jpg" /></a></li>
         <li class="hidden ui-switchable-panel"><a href="#"><img src="./assets/slide_3.jpg" /></a></li>
     </ul>
-    <ul data-role="nav" class="ui-switchable-nav">
+    <ul data-switchable-role="nav" class="ui-switchable-nav">
         <li class="ui-switchable-trigger">●</li>
         <li class="ui-switchable-trigger ui-switchable-active">●</li>
         <li class="ui-switchable-trigger">●</li>
@@ -223,7 +223,7 @@ seajs.use(['slide'], function(Slide) {
 ````html
 <div id="slide-demo-3" class="slide-demo">
     <div class="wrapper">
-        <ul data-role="content" class="ui-switchable-content">
+        <ul data-switchable-role="content" class="ui-switchable-content">
             <li class="ui-switchable-panel"><strong>公告1: </strong>Arale 立足于支付宝的前端需求和国内前端社区，基于 Sea.js 和 CMD 规范，致力发展小而美的前端模块架构，建立了一套从编码测试到部署的开发体系， 是一个开放、简单、易用的前端解决方案。</li>
             <li class="hidden ui-switchable-panel"><strong>公告2: </strong>Arale 立足于支付宝的前端需求和国内前端社区，基于 Sea.js 和 CMD 规范，致力发展小而美的前端模块架构，建立了一套从编码测试到部署的开发体系， 是一个开放、简单、易用的前端解决方案。</li>
             <li class="hidden ui-switchable-panel"><strong>公告3: </strong>Arale 立足于支付宝的前端需求和国内前端社区，基于 Sea.js 和 CMD 规范，致力发展小而美的前端模块架构，建立了一套从编码测试到部署的开发体系， 是一个开放、简单、易用的前端解决方案。</li>
@@ -332,12 +332,12 @@ seajs.use(['slide', '$'], function(Slide, $) {
 
 ````html
 <div id="slide-demo-4" class="slide-demo">
-    <ul data-role="content" class="ui-switchable-content">
+    <ul data-switchable-role="content" class="ui-switchable-content">
         <li class="hidden ui-switchable-panel"><a href="#"><img src="./assets/slide_1.jpg" /></a></li>
         <li class="ui-switchable-panel"><a href="#"><img src="./assets/slide_2.jpg" /></a></li>
         <li class="hidden ui-switchable-panel"><a href="#"><img src="./assets/slide_3.jpg" /></a></li>
     </ul>
-    <ul data-role="nav" class="ui-switchable-nav">
+    <ul data-switchable-role="nav" class="ui-switchable-nav">
         <li class="ui-switchable-trigger"><span>缩略/标题一</span><b class="arrow">◆</b></li>
         <li class="ui-switchable-trigger ui-switchable-active"><span>缩略/标题二</span><b class="arrow">◆</b></li>
         <li class="ui-switchable-trigger"><span>缩略/标题三</span><b class="arrow">◆</b></li>
diff --git a/src/carousel.js b/src/carousel.js
index fba23eb..0fcded4 100644
--- a/src/carousel.js
+++ b/src/carousel.js
@@ -54,7 +54,7 @@ define(function(require, exports, module) {
             var self = this;
             var roles = ['next', 'prev'];
             $.each(roles, function(index, key) {
-              var elems = self.$('[data-role=' + key + ']');
+              var elems = self.$('[data-switchable-role=' + key + ']');
               if (elems.length) {
                 role[key] = elems;
               }
diff --git a/src/switchable.js b/src/switchable.js
index 06dd45c..d8d282f 100644
--- a/src/switchable.js
+++ b/src/switchable.js
@@ -98,7 +98,7 @@ define(function(require, exports, module) {
             var role = {};
             var roles = ['trigger', 'panel', 'nav', 'content'];
             $.each(roles, function(index, key) {
-              var elems = self.$('[data-role=' + key + ']');
+              var elems = self.$('[data-switchable-role=' + key + ']');
               if (elems.length) {
                 role[key] = elems;
               }
@@ -134,7 +134,7 @@ define(function(require, exports, module) {
             // 再获取 triggers 和 nav
             if (triggers.length > 0) {
             }
-            // attr 里没找到时，才根据 data-role 来解析
+            // attr 里没找到时，才根据 data-switchable-role 来解析
             else if (role.trigger) {
                 this.set('triggers', triggers = role.trigger);
             } else if (role.nav) {
@@ -151,7 +151,7 @@ define(function(require, exports, module) {
 
                 this.nav = role.nav;
             }
-            // 用户没有传入 triggers，也没有通过 data-role 指定时，如果
+            // 用户没有传入 triggers，也没有通过 data-switchable-role 指定时，如果
             // hasTriggers 为 true，则自动生成 triggers
             else if (this.get('hasTriggers')) {
                 this.nav = generateTriggersMarkup(
diff --git a/tests/switchable-spec.js b/tests/switchable-spec.js
index d1c5220..e4335bb 100644
--- a/tests/switchable-spec.js
+++ b/tests/switchable-spec.js
@@ -38,13 +38,13 @@ define(function(require) {
             var elem = [];
             elem.push('<div id="demo1">');
             elem.push('<span id="scroller-prev" class="prev"');
-            elem.push(' data-role="prev">上一页</span>');
+            elem.push(' data-switchable-role="prev">上一页</span>');
             elem.push('<span id="scroller-next" class="next" ');
-            elem.push(' data-role="next">下一页</span>');
-            elem.push('<ul class="ui-switchable-nav" data-role="nav"> ');
+            elem.push(' data-switchable-role="next">下一页</span>');
+            elem.push('<ul class="ui-switchable-nav" data-switchable-role="nav"> ');
             elem.push('<li>NA</li>><li>NB</li>><li>NC</li></ul>');
             elem.push('<div class="ui-switchable-content"');
-            elem.push(' data-role="content">');
+            elem.push(' data-switchable-role="content">');
             elem.push('<div style="display: none">CA</div>');
             elem.push('<div style="display: none">CB</div>');
             elem.push('<div style="display: none">CC</div></div>');
@@ -66,7 +66,7 @@ define(function(require) {
             var elem3 = [];
             elem3.push('<div id="demo3">');
             elem3.push('<div class="ui-switchable-content"');
-            elem3.push(' data-role="content">');
+            elem3.push(' data-switchable-role="content">');
             elem3.push('<div>CA</div>');
             elem3.push('<div style="display: none">CB</div>');
             elem3.push('<div style="display: none">CC</div></div>');