toast组件支持自定义显示时间和自定义样式

sdc-alibaba · Nov 24, 2015 · 87068a9 · 87068a9
1 parent 6d05b64
commit 87068a9
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 18 deletions.
diff --git a/docs/_includes/_components/modal.html b/docs/_includes/_components/modal.html
@@ -771,11 +771,20 @@ <h1 class="title">指示器(indicator)</h1>
 
 <article class="component active" id='toast' data-url='toast'>
   <h2 class="component-title">toast</h2>
-  <p class="component-description">toast是一种轻量的提示，在页面中间显示，并且会在2秒之后自动消失。</p>
+  <p class="component-description">toast是一种轻量的提示，在页面中间显示，并且会在2秒(默认值，可修改)之后自动消失。</p>
   <p>可以用来显示一些不会打断用户操作的提示。</p>
 
+{% highlight html%}  
+/* msg{string}: toast内容
+ * duration{number}：toast显示时间,默认2000
+ * extraclass{string}：给toast根节点附加class，高度自定义属性，方便用户自行控制不同场景的样式。
+ * 如果使用了第三个参数，请自行在业务css里添加extraclass对应的样式
+ * /
+{% endhighlight %}
 {% highlight js %}  
 $.toast("操作失败");
+
+$.toast('操作成功，正在跳转...', 2345, 'success top');
+
 {% endhighlight %}
-  <p>toast 组件后续会支持不同的情景，包括操作成功、操作失败等，显示出不同的颜色</p>
 </article>
diff --git a/js/fastclick.js b/js/fastclick.js
@@ -220,8 +220,6 @@
 
 	/**
 	 * 判断是否组合型label
-	 * 夏苒添加
-	 * 
 	 * @type {Boolean}
 	 */
 	var isCompositeLabel = false;
@@ -234,16 +232,8 @@
 	 */
 	FastClick.prototype.needsClick = function(target) {
 
-	    // 修复bug: 如果父元素中有 label 
-	    // 夏苒删除
-	    /*
-	    var parent = target;
-	    while(parent && (parent.tagName.toUpperCase() !== "BODY")) {
-	      if(parent.tagName.toUpperCase() === "LABEL") return true;
-	      parent = parent.parentNode;
-	    }
-	    */
-	    //  夏苒添加start，如果label上有needsclick这个类，则用原生的点击，否则，用模拟点击
+	    // 修复bug: 如果父元素中有 label
+	    // 夏苒添加start，如果label上有needsclick这个类，则用原生的点击，否则，用模拟点击
 	    var parent = target;
 	    while(parent && (parent.tagName.toUpperCase() !== "BODY")) {
 	      if (parent.tagName.toUpperCase() === "LABEL") {
@@ -687,7 +677,6 @@
 
 			// Cancel the event
 			event.stopPropagation();
-			// event.preventDefault(); 夏苒删除
 			// 允许组合型label冒泡，夏苒添加start
 			if (!isCompositeLabel) {
 				event.preventDefault();

diff --git a/js/modal.js b/js/modal.js
@@ -268,12 +268,12 @@
         return modal[0];
     };
     //显示一个消息，会在2秒钟后自动消失
-    $.toast = function(msg) {
-      var $toast = $("<div class='modal toast'>"+msg+"</div>").appendTo(document.body);
+    $.toast = function(msg, duration, extraclass) {
+      var $toast = $('<div class="modal toast ' + (extraclass || '') + '">' + msg + '</div>').appendTo(document.body);
       $.openModal($toast);
       setTimeout(function() {
         $.closeModal($toast);
-      }, 2000);
+      }, duration || 2000);
     };
     $.openModal = function (modal) {
         modal = $(modal);