updata some api

switer · Feb 28, 2013 · 9db27e5 · 9db27e5
1 parent 146598c
commit 9db27e5
Show file tree

Hide file tree

Showing 8 changed files with 98 additions and 41 deletions.
diff --git a/button.html b/button.html
@@ -8,12 +8,9 @@
 	<meta name="format-detection" content="telephone=no">
 	<link rel="stylesheet" type="text/css" href="css/sui.css">
 	<script type="text/javascript" src="js/zepto.js"></script>
-	<script type="text/javascript" src="js/sui.min.js"></script>
-	<!-- 
-	<script type="text/javascript" src="js/ui.base.js"></script>
-	<script type="text/javascript" src="js/ui.button.js"></script>
-	 -->
-
+	<!--<script type="text/javascript" src="js/sui.min.js"></script>-->
+	<script type="text/javascript" src="js/component/ui.base.js"></script>
+	<script type="text/javascript" src="js/component/ui.button.js"></script>
 </head>
 <!--header-->
 <body>
@@ -26,9 +23,9 @@
 			</select>
 		</div>
 	</div>
-	<input class="sui-btn sui-btn-primary sui-mg-top" data-toggle="2000" type="button" value="toggle">
+	<input id="test" class="sui-btn sui-btn-primary sui-mg-top" data-toggle="2000" type="button" value="toggle">
 	<input class="sui-btn sui-btn-pure sui-mg-top" data-toggle="2000" type="button" value="toggle">
-	<input class="sui-btn sui-btn-silver sui-mg-top" type="button" value="修改密码">
+	<input class="sui-btn sui-btn-silver sui-mg-top" data-feedback="sui-feedback" type="button" value="修改密码">
 	<input class="sui-btn sui-w-full sui-mg-top" type="button" value="登录">
 	<input class="sui-btn sui-size-custom sui-mg-top" type="button" value="登录">
 	<input class="sui-btn sui-btn-inverse sui-w-full sui-mg-top" type="button" value="注册">
@@ -42,5 +39,10 @@
 		<input class="sui-btn sui-btn-silver" type="button" value="导航2">
 		<input class="sui-btn sui-btn-silver" type="button" value="导航3">
 	</div>
+	<script type="text/javascript">
+		$('#test').on('click', function () {
+			console.log('hello');
+		})
+	</script>
 </body>
 </html>
diff --git a/css/sui.css b/css/sui.css
@@ -4,6 +4,7 @@
 .sui-no-feed {-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
 .sui-disp-box {display:-webkit-box;}
 .sui-box-chi {-webkit-box-flex:1;}
+.sui-feedback {background: cornflowerBlue!important;color:white!important;text-shadow:none!important;}
 .sui-mg-top {margin-top: 10px!important;}
 .sui-mg-right {margin-right: 10px!important;}
 .sui-mg6 {margin: 6px;}

diff --git a/input.html b/input.html
@@ -10,8 +10,8 @@
 	<script type="text/javascript" src="js/zepto.js"></script>
 	<script type="text/javascript" src="js/sui.min.js"></script>
 	<!-- 
-	<script type="text/javascript" src="js/ui.base.js"></script>
-	<script type="text/javascript" src="js/ui.input.js"></script>
+	<script type="text/javascript" src="js/component/ui.base.js"></script>
+	<script type="text/javascript" src="js/component/ui.input.js"></script>
 	 -->
 
 </head>

diff --git a/js/component/ui.base.js b/js/component/ui.base.js
@@ -4,12 +4,12 @@
     'hide_class' : 'sui-disp-none',
     "delay_time" : 100
   }
-  //public method
-  $.fn.delayHide = function () {
+  $.fn.delayHide = function (time) {
+    time = (typeof time) == 'number' ? time : conf.delay_time;
     var $sui = $(this);
     setTimeout(function () {
       $sui.suiHide();
-    } , conf.delay_time);
+    } , time);
   }
   $.fn.isHide = function () {
     return $(this).hasClass(conf.hide_class);

diff --git a/js/component/ui.button.js b/js/component/ui.button.js
@@ -6,22 +6,21 @@
     "disabled" : 'sui-disabled',
     "nav_btn" : 'sui-btn-nav',
     "nav_on" : 'sui-on',
-    "button" : '.sui-btn'
+    "button" : '.sui-btn',
+    "feedback_class" : 'sui-feedback'
   }
   $.fn.toggle = function  (time, callback) {
     var $this = this;
-    $this.disabled();
-    if ( time && time !== 0 ) {
-      setTimeout (function () {
-        $this.enabled();
-        callback && callback.apply($this);
-      }, time);
-    }
+    $this.on('click', function () {
+      _toggle.call($this, time, callback)
+    })
   }
   $.fn.enabled = function () {
+    $(this).removeAttr('disabled');
     $(this).removeClass(conf.disabled);
   }
   $.fn.disabled = function () {
+    $(this).attr('disabled', 'disabled');
     $(this).addClass(conf.disabled)
   }
   /**
@@ -33,9 +32,33 @@
   $.fn.feed = function () {
     $(this).removeClass(conf.feed_class);
   }
-  $.fn.unFeed = function () {
+  $.fn.unfeed = function () {
     $(this).addClass(conf.feed_class)
   }
+  $.fn.feedback = function (className) {
+    var $this = this;
+    $this.on('click', function () {
+      _feedback.call($(this), className);
+    })
+  }
+  function _toggle (time, callback) {
+    var $this = this;
+    $this.disabled();
+    if ( time && time !== 0 ) {
+      setTimeout (function () {
+        $this.enabled();
+        callback && callback.apply($this);
+      }, time);
+    }
+  }
+  function _feedback (className) {
+    var $this = this;
+    className = className || conf.feedback_class;
+    $this.addClass(className);
+    setTimeout(function () {
+      $this.removeClass(className);
+    }, conf.feed_time);
+  }
   /**
   * Button Event
   **/
@@ -49,13 +72,17 @@
 
     //检查按钮的toggle配置
     var toggle = $btn.attr('data-toggle'),
-        $parent = $btn.parent();
+        feedback = $btn.attr('data-feedback'),
+        $parent = $btn.parent(),
         isNavBtn = $parent ? $btn.parent().hasClass(conf.nav_btn) : false;
 
     //改按钮配置了toggle属性
     if (toggle) {
       //disabled开关
-      $btn.toggle(parseInt(toggle));
+      _toggle.call($btn, parseInt(toggle));
+    }
+    if (feedback) {
+      _feedback.call($btn, feedback);
     }
     //取消默认反馈
     setTimeout(function () {

diff --git a/js/sui.js b/js/sui.js
@@ -111,22 +111,21 @@
     "disabled" : 'sui-disabled',
     "nav_btn" : 'sui-btn-nav',
     "nav_on" : 'sui-on',
-    "button" : '.sui-btn'
+    "button" : '.sui-btn',
+    "feedback_class" : 'sui-feedback'
   }
   $.fn.toggle = function  (time, callback) {
     var $this = this;
-    $this.disabled();
-    if ( time && time !== 0 ) {
-      setTimeout (function () {
-        $this.enabled();
-        callback && callback.apply($this);
-      }, time);
-    }
+    $this.on('click', function () {
+      _toggle.call($this, time, callback)
+    })
   }
   $.fn.enabled = function () {
+    $(this).removeAttr('disabled');
     $(this).removeClass(conf.disabled);
   }
   $.fn.disabled = function () {
+    $(this).attr('disabled', 'disabled');
     $(this).addClass(conf.disabled)
   }
   /**
@@ -138,9 +137,33 @@
   $.fn.feed = function () {
     $(this).removeClass(conf.feed_class);
   }
-  $.fn.unFeed = function () {
+  $.fn.unfeed = function () {
     $(this).addClass(conf.feed_class)
   }
+  $.fn.feedback = function (className) {
+    var $this = this;
+    $this.on('click', function () {
+      _feedback.call($(this), className);
+    })
+  }
+  function _toggle (time, callback) {
+    var $this = this;
+    $this.disabled();
+    if ( time && time !== 0 ) {
+      setTimeout (function () {
+        $this.enabled();
+        callback && callback.apply($this);
+      }, time);
+    }
+  }
+  function _feedback (className) {
+    var $this = this;
+    className = className || conf.feedback_class;
+    $this.addClass(className);
+    setTimeout(function () {
+      $this.removeClass(className);
+    }, conf.feed_time);
+  }
   /**
   * Button Event
   **/
@@ -154,13 +177,17 @@
 
     //检查按钮的toggle配置
     var toggle = $btn.attr('data-toggle'),
-        $parent = $btn.parent();
+        feedback = $btn.attr('data-feedback'),
+        $parent = $btn.parent(),
         isNavBtn = $parent ? $btn.parent().hasClass(conf.nav_btn) : false;
 
     //改按钮配置了toggle属性
     if (toggle) {
       //disabled开关
-      $btn.toggle(parseInt(toggle));
+      _toggle.call($btn, parseInt(toggle));
+    }
+    if (feedback) {
+      _feedback.call($btn, feedback);
     }
     //取消默认反馈
     setTimeout(function () {
@@ -180,12 +207,12 @@
     'hide_class' : 'sui-disp-none',
     "delay_time" : 100
   }
-  //public method
-  $.fn.delayHide = function () {
+  $.fn.delayHide = function (time) {
+    time = (typeof time) == 'number' ? time : conf.delay_time;
     var $sui = $(this);
     setTimeout(function () {
       $sui.suiHide();
-    } , conf.delay_time);
+    } , time);
   }
   $.fn.isHide = function () {
     return $(this).hasClass(conf.hide_class);

diff --git a/js/sui.min.js b/js/sui.min.js
diff --git a/popbox.html b/popbox.html
@@ -10,8 +10,8 @@
 	<script type="text/javascript" src="js/zepto.js"></script>
 	<script type="text/javascript" src="js/sui.min.js"></script>
 	<!-- 
-	<script type="text/javascript" src="js/ui.input.js"></script>
-	<script type="text/javascript" src="js/ui.button.js"></script>
+	<script type="text/javascript" src="js/component/ui.input.js"></script>
+	<script type="text/javascript" src="js/component/ui.button.js"></script>
 	 -->