U: data-role -> data-switchable-role, fix #32

aralejs · Dec 1, 2013 · 6306771 · 6306771
1 parent 381eb79
commit 6306771
Show file tree

Hide file tree

Showing 19 changed files with 63 additions and 60 deletions.
diff --git 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
@@ -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
diff --git 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
diff --git 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
diff --git 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
diff --git 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
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>');