Permalink
Browse files

add popbox

  • Loading branch information...
1 parent ccf060b commit 8c058cdd113e06f08b3080e6c152c9b2c84428ce @switer committed Jan 23, 2013
Showing with 166 additions and 40 deletions.
  1. +52 −5 css/sdkui.css
  2. BIN img/Thumbs.db
  3. BIN img/ico.png
  4. +17 −7 index.html
  5. +44 −2 input.html
  6. +36 −22 js/ui.button.js
  7. +17 −4 js/ui.input.js
  8. 0 js/ui.popbox.js
  9. 0 popbox.html
View
@@ -2,11 +2,15 @@
.sui-w-full {width: 100%;}
.sui-w-half {width: 50%;}
.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-mg-top {margin-top: 10px!important;}
+.sui-mg-right {margin-right: 10px!important;}
+.sui-mg6 {margin: 6px;}
/*Button style Begin*/
.sui-btn {
/*layout:padding,margin,display*/
- display: block;margin: 15px 0;padding:0 15px;
+ display: block;padding:0 15px;
/*shape:width,height,line-height,boder,border-radius*/
height: 45px;line-height: 100%;border-radius: 5px;border: 1px solid rgba(0, 0, 0, 0.2);
/*style:font(size,family,color),text(align,shadow),background*/
@@ -37,7 +41,24 @@
/*disabled*/
.sui-btn-nav .sui-btn.disabled {color:#AAA;}
-/*theme*/
+/*Select btn*/
+.sui-btn-sel {
+ width: 32px;height: 32px;border: 1px solid #D5D5D5;border-radius: 5px;
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #F8F8F8), color-stop(100%, #E2E2E2));
+}
+.sui-sel-box {
+ height: 100%;width: 100%;
+ -webkit-background-size: 32px 138px;
+ background-position: 0 -74px;background-repeat: no-repeat;background-image: url(../img/ico.png);
+}
+.sui-sel {
+ -webkit-appearance: button;top: 0;margin: 0 0;
+ border: none;width: 100%;height: 100%;
+ opacity: 0.1;
+ color:transparent!important;
+}
+
+/*Button Theme*/
.sui-btn-primary {
border: 1px solid rgba(0, 0, 0, 0.1);
color: #333;background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #F8F8F8), color-stop(100%, #E2E2E2));
@@ -53,15 +74,41 @@
.sui-nav-silver {
background: -webkit-gradient(linear,0 0,0 100%,from(#E1E1E1),to(#C3C7CF));
}
+/*Button Themee End*/
/*Button style End*/
/*Input style begin*/
-.sui-inp-cmp {
+.sui-inp-box {
display: -webkit-box;
height: 45px;border-radius: 5px;border: 1px solid #CCC;
background: white;
}
-.sui-inp-cmp .sui-inp {
+.sui-inp-box .sui-inp {
display: block;-webkit-box-flex:1;padding: 10px 0px 10px 1em;margin-top: 3px;
height: 20px;outline: none;line-height: 100%;border: none;
background-color: transparent;
}
+.sui-inp-cmp {display: -webkit-box;}
+.sui-inp-cmp .sui-inp-box {-webkit-box-flex:1;}
+.sui-inp-label {
+ padding-left: 4px;
+ line-height: 20px;width: 45px;
+ font-size: 14px;
+ margin-top: 10px;
+ text-align: left;vertical-align: middle;
+}
+.sui-inp-group .sui-inp-box {
+ border-bottom: 0;
+ border-radius: 0;
+}
+.sui-inp-group .sui-inp-box:first-child {border-radius: 5px 5px 0 0;}
+.sui-inp-group .sui-inp-box:last-child {
+ border-bottom: 1px solid #CCC;border-radius: 0 0 5px 5px;
+}
+
+/*Input Box Theme*/
+.sui-inp-shadow-top {-webkit-box-shadow:0 1px 5px rgba(0, 0, 0, .2) inset;}
+.sui-inp-shadow-bottom {-webkit-box-shadow:0 -1px 5px rgba(0, 0, 0, .2) inset;}
+.sui-inp-shadow-none {-webkit-box-shadow:0 0px 5px rgba(0, 0, 0, .2) inset;}
+
+/*Custom Size*/
+.sui-size-custom {height: 93px;width: 108px;}
View
Binary file not shown.
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
@@ -11,16 +11,26 @@
<script type="text/javascript" src="js/ui.button.js"></script>
</head>
<body>
- <input class="sui-btn sui-btn-primary" data-toggle="2000" type="button" value="toggle">
- <input class="sui-btn sui-btn-silver" type="button" value="修改密码">
- <input class="sui-btn sui-w-full" type="button" value="登录">
- <input class="sui-btn sui-btn-inverse sui-w-full" type="button" value="注册">
- <input class="sui-btn sui-btn-primary sui-w-full" type="button" value="注册">
- <div class="sui-btn-group">
+ <div class="sui-btn-sel">
+ <div class="sui-sel-box">
+ <select class="sui-sel">
+ <option>1</option>
+ <option>2</option>
+ <option>3</option>
+ </select>
+ </div>
+ </div>
+ <input class="sui-btn sui-btn-primary 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-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="注册">
+ <input class="sui-btn sui-btn-primary sui-w-full sui-mg-top" type="button" value="注册">
+ <div class="sui-btn-group sui-mg-top">
<input class="sui-btn sui-btn-primary" type="button" value="登录">
<input class="sui-btn" type="button" value="注册">
</div>
- <div class="sui-btn-nav sui-nav-silver">
+ <div class="sui-btn-nav sui-nav-silver sui-mg-top">
<input class="sui-btn sui-btn-silver" data-toggle="2000" type="button" value="导航1">
<input class="sui-btn sui-btn-silver" type="button" value="导航2">
<input class="sui-btn sui-btn-silver" type="button" value="导航3">
View
@@ -11,11 +11,53 @@
<script type="text/javascript" src="js/ui.input.js"></script>
</head>
<body>
- <div class="sui-inp-cmp">
+ <div class="sui-inp-box sui-mg-top">
<input class="sui-inp" type="text" placeholder="6-20位数字" />
+ <div class="sui-btn-sel sui-mg6">
+ <div class="sui-sel-box">
+ <select class="sui-sel">
+ <option>1</option>
+ <option>2</option>
+ <option>3</option>
+ </select>
+ </div>
+ </div>
</div>
- <div class="sui-inp-cmp">
+ <div class="sui-inp-cmp sui-mg-top">
+ <div class="sui-inp-label">登录</div>
+ <div class="sui-inp-box">
+ <input class="sui-inp" type="text" placeholder="6-20位数字" />
+ </div>
+ </div>
+ <div class="sui-inp-box sui-mg-top sui-inp-shadow-top">
<input class="sui-inp" type="text" placeholder="6-20位数字" />
</div>
+ <div class="sui-inp-group sui-mg-top">
+ <div class="sui-inp-box">
+ <input class="sui-inp" type="text" placeholder="6-20位数字" />
+ </div>
+ <div class="sui-inp-box">
+ <input class="sui-inp" type="text" placeholder="6-20位数字" />
+ </div>
+ </div>
+ <div class="sui-disp-box sui-mg-top">
+ <div class="sui-inp-group sui-box-chi sui-mg-right">
+ <div class="sui-inp-box">
+ <input class="sui-inp" type="text" placeholder="6-20位数字" />
+ </div>
+ <div class="sui-inp-box">
+ <input class="sui-inp" type="text" placeholder="6-20位数字" />
+ </div>
+ </div>
+ <input class="sui-btn sui-size-custom " type="button" value="登录">
+ </div>
+ <div class="sui-inp-group sui-mg-top">
+ <div class="sui-inp-box sui-inp-shadow-top">
+ <input class="sui-inp" type="text" placeholder="6-20位数字" />
+ </div>
+ <div class="sui-inp-box sui-inp-shadow-bottom">
+ <input class="sui-inp" type="text" placeholder="6-20位数字" />
+ </div>
+ </div>
</body>
</html>
View
@@ -8,16 +8,44 @@
"nav_on" : 'sui-on',
"button" : '.sui-btn'
}
+ $.fn.toggle = function (time, callback) {
+ var $this = this;
+ $this.disabled();
+ if ( time && time !== 0 ) {
+ setTimeout (function () {
+ $this.enabled();
+ callback && callback.apply($this);
+ }, time);
+ }
+ }
+ $.fn.enabled = function () {
+ $(this).removeClass(conf.disabled);
+ }
+ $.fn.disabled = function () {
+ $(this).addClass(conf.disabled)
+ }
+ /**
+ * @return bool
+ **/
+ $.fn.isdisabled = function () {
+ return $(this).hasClass(conf.disabled);
+ }
+ $.fn.feed = function () {
+ $(this).removeClass(conf.feed_class);
+ }
+ $.fn.unFeed = function () {
+ $(this).addClass(conf.feed_class)
+ }
/**
* Button Event
**/
$(document).on('click.sui-btn', function (e) {
var $btn = $(e.target);
- $btn.addClass(conf.feed_class);
+ $btn.feed();
//按钮处于disabled状态
- if ($btn.hasClass(conf.disabled)) return;
+ if ($btn.isdisabled()) return;
//检查按钮的toggle配置
var toggle = $btn.attr('data-toggle'),
@@ -26,31 +54,17 @@
//改按钮配置了toggle属性
if (toggle) {
-
- //添加disabled状态
- $btn.addClass(conf.disabled);
-
- //按自定义的toggle时间来清除disabled
- setTimeout(function () {
- //disabled状态根据disabled的时间来定时清除反馈
- $btn.removeClass(conf.feed_class);
- //取消disabled状态
- $btn.removeClass(conf.disabled);
- }, parseInt(toggle))
- }
- else {
- //取消默认反馈
- setTimeout(function () {
- $btn.removeClass(conf.feed_class);
- }, conf.feed_time);
+ //disabled开关
+ $btn.toggle(parseInt(toggle));
}
+ //取消默认反馈
+ setTimeout(function () {
+ $btn.removeClass(conf.feed_class);
+ }, conf.feed_time);
if (isNavBtn) {
$parent.find(conf.button).removeClass(conf.nav_on);
$btn.addClass(conf.nav_on);
}
-
-
-
})
}(window.$);
View
@@ -1,8 +1,21 @@
!function ($) {
- var conf = {
+ var conf = {};
+ /*Input public method*/
+ $.fn.flushInp = _fulshInput;
+
+ $(document).on('click.sui-inp', _fulshInput);
+
+ /*flush Placeholder*/
+ function _fulshInput (e) {
+
+ var $inp = $(e.target);
+ if( _isEmpty( $inp.val() ) ) {
+ $( event.target ).val( '' );
+ }
+ }
+ //String is empty
+ function _isEmpty(val) {
+ return (val === undefined || val === null || val.length === 0);
}
- /**
- * Input Event
- **/
}(window.$);
View
No changes.
View
No changes.

0 comments on commit 8c058cd

Please sign in to comment.