Home Explore Help
Sign In
chendeben
/
zheng
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

增加checkbix

shuzheng 9 years ago
parent
a9a8832394
commit
de54318d94
6 changed files with 241 additions and 5 deletions
Split View Show Diff Stats
  1. 6 5
      zheng-ui/src/login.html
  2. 233 0
      zheng-ui/src/plugins/checkbix/css/checkbix.css
  3. 0 0
      zheng-ui/src/plugins/checkbix/css/checkbix.min.css
  4. 1 0
      zheng-ui/src/plugins/checkbix/js/checkbix.js
  5. 0 0
      zheng-ui/src/plugins/checkbix/js/checkbix.min.css
  6. 1 0
      zheng-ui/src/plugins/checkbix/js/checkbix.min.js

+ 6 - 5
zheng-ui/src/login.html
View File 

@@ -9,6 +9,7 @@
 
 	<link href="plugins/bootstrap-3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
 
 	<link href="plugins/material-design-iconic-font-2.2.0/css/material-design-iconic-font.min.css" rel="stylesheet"/>
 
 	<link href="plugins/waves-0.7.5/waves.min.css" rel="stylesheet"/>
 
+	<link href="plugins/checkbix/css/checkbix.min.css" rel="stylesheet"/>
 
 	<link href="css/login.css" rel="stylesheet"/>
 
 </head>
 
 <body>
 
@@ -28,18 +29,18 @@
 
 	<div class="clearfix">
 
 	</div>
 
 	<div class="checkbox">
 
-		<label>
 
-		<input type="checkbox" value="">
 
-		<i class="input-helper"></i>
 
-			自动登录
 
-		</label>
 
+		<input id="rememberMe" type="checkbox" class="checkbix" data-text="自动登录">
 
 	</div>
 
 	<a id="login-bt" href="javascript:;" class="waves-effect waves-button waves-float"><i class="zmdi zmdi-arrow-forward"></i></a>
 
 </div>
 
 <script src="plugins/jquery.1.12.4.min.js"></script>
 
 <script src="plugins/bootstrap-3.3.0/js/bootstrap.min.js"></script>
 
 <script src="plugins/waves-0.7.5/waves.min.js"></script>
 
+<script src="plugins/checkbix/js/checkbix.min.js"></script>
 
 
 <script src="js/login.js"></script>
 
+<script type="text/javascript">
 
+	Checkbix.init();
 
+</script>
 
 </body>
 
 </html>

+ 233 - 0
zheng-ui/src/plugins/checkbix/css/checkbix.css
View File 

@@ -0,0 +1,233 @@
 
+input[type='checkbox'].checkbix { 
+    position: absolute;
 
+    opacity: 0;
 
+    z-index: -1;
 
+}
 
+
 
+input[type='checkbox'].checkbix + label {
 
+  position: relative;
 
+  display: -webkit-inline-box;
 
+  display: -ms-inline-flexbox;
 
+  display: inline-flex;
 
+  -webkit-box-align: center;
 
+      -ms-flex-align: center;
 
+          align-items: center;
 
+  color: inherit;
 
+  -webkit-transition: all 250ms cubic-bezier(.4,.0,.23,1);
 
+  transition: all 250ms cubic-bezier(.4,.0,.23,1);
 
+  margin-bottom: .15rem;
 
+}
 
+
 
+input[type='checkbox'].checkbix + label > span {
 
+  display: -webkit-box;
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  -webkit-box-pack: center;
 
+      -ms-flex-pack: center;
 
+          justify-content: center;
 
+  -webkit-box-align: center;
 
+      -ms-flex-align: center;
 
+          align-items: center;
 
+  margin-right: .5em;
 
+  width: 16px;
 
+  height: 16px;
 
+  background: transparent;
 
+  border: .1rem solid #333;
 
+  border-radius: 1px;
 
+  cursor: pointer;  
+  -webkit-transition: all 250ms cubic-bezier(.4,.0,.23,1);  
+  transition: all 250ms cubic-bezier(.4,.0,.23,1);
 
+  position: relative;
 
+}
 
+
 
+input[type='checkbox'].checkbix:focus + label > span {
 
+    outline: 0;
 
+    border-color: rgb(0,20,20);
 
+    box-shadow: 0 0 0 1px rgba(0,20,20,.5);
 
+}
 
+
 
+input[type='checkbox'].checkbix:checked + label > span {
 
+  background: #5ECD62;
 
+  border: .1rem solid transparent;
 
+  -webkit-animation: reveal 200ms cubic-bezier(.4,.0,.5,1);
 
+          animation: reveal 200ms cubic-bezier(.4,.0,.5,1);
 
+}
 
+
 
+input[type='checkbox'].checkbix:checked + label > span:before {
 
+  content: "";
 
+  position: absolute;
 
+  top: 0;
 
+  left: 22%;
 
+  margin-left: auto;
 
+  margin-right: auto;
 
+  border-right: 2px solid transparent;
 
+  border-bottom: 2px solid transparent;
 
+  -webkit-transform: rotate(45deg);
 
+          transform: rotate(45deg);
 
+  -webkit-transform-origin: 0% 100%;
 
+          transform-origin: 0% 100%;
 
+  -webkit-animation: checkboxcheck 125ms 50ms cubic-bezier(.1,.0,.1,1) forwards;
 
+          animation: checkboxcheck 125ms 50ms cubic-bezier(.1,.0,.1,1) forwards;
 
+}
 
+
 
+@-webkit-keyframes reveal{
 
+  0%{
 
+    -webkit-transform: scale(1);
 
+            transform: scale(1);
 
+  }
 
+  33%{    
+    -webkit-transform: scale(.5);    
+            transform: scale(.5);
 
+  }
 
+  100%{
 
+    -webkit-transform: scale(1);
 
+            transform: scale(1);    
+  }
 
+}
 
+
 
+@keyframes reveal{
 
+  0%{
 
+    -webkit-transform: scale(1);
 
+            transform: scale(1);
 
+  }
 
+  33%{    
+    -webkit-transform: scale(.5);    
+            transform: scale(.5);
 
+  }
 
+  100%{
 
+    -webkit-transform: scale(1);
 
+            transform: scale(1);    
+  }
 
+}
 
+
 
+@-webkit-keyframes checkboxcheck {
 
+  0%{
 
+    width: 0;
 
+    height: 0;
 
+    border-color: white;
 
+    -webkit-transform: rotate(45deg);
 
+            transform: rotate(45deg);
 
+  }
 
+  33%{
 
+    width: .2em;
 
+    height: .3em;
 
+    -webkit-transform: rotate(45deg);
 
+            transform: rotate(45deg);
 
+  }
 
+  100%{    
+    width: .2em;
 
+    height: .4em;    
+    border-color: white;
 
+    -webkit-transform: rotate(45deg);
 
+            transform: rotate(45deg);
 
+  }
 
+}
 
+
 
+@keyframes checkboxcheck {
 
+  0%{
 
+    width: 0;
 
+    height: 0;
 
+    border-color: white;
 
+    -webkit-transform: rotate(45deg);
 
+            transform: rotate(45deg);
 
+  }
 
+  33%{
 
+    width: .2em;
 
+    height: .3em;
 
+    -webkit-transform: rotate(45deg);
 
+            transform: rotate(45deg);
 
+  }
 
+  100%{    
+    width: .2em;
 
+    height: .4em;    
+    border-color: white;
 
+    -webkit-transform: rotate(45deg);
 
+            transform: rotate(45deg);
 
+  }
 
+}
 
+
 
+/* Size */
 
+input[type='checkbox'].checkbix[data-size='large'] + label > span {
 
+	width: 24px;
 
+	height: 24px;
 
+}
 
+
 
+input[type='checkbox'].checkbix[data-size='large'] + label > span:before {
 
+	-webkit-animation: checkboxchecklarge 125ms 50ms cubic-bezier(.1,.0,.1,1) forwards;
 
+	        animation: checkboxchecklarge 125ms 50ms cubic-bezier(.1,.0,.1,1) forwards;
 
+	border-right: 3px solid transparent;
 
+	border-bottom: 3px solid transparent;
 
+}
 
+
 
+@-webkit-keyframes checkboxchecklarge {
 
+  0%{
 
+    width: 0;
 
+    height: 0;
 
+    border-color: white;
 
+    -webkit-transform: rotate(45deg);
 
+            transform: rotate(45deg);
 
+  }
 
+  33%{
 
+    width: .3em;
 
+    height: .6em;
 
+    -webkit-transform: rotate(45deg);
 
+            transform: rotate(45deg);
 
+  }
 
+  100%{    
+    width: .3em;
 
+    height: .6em;    
+    border-color: white;
 
+    -webkit-transform: rotate(45deg);
 
+            transform: rotate(45deg);
 
+  }
 
+}
 
+
 
+@keyframes checkboxchecklarge {
 
+  0%{
 
+    width: 0;
 
+    height: 0;
 
+    border-color: white;
 
+    -webkit-transform: rotate(45deg);
 
+            transform: rotate(45deg);
 
+  }
 
+  33%{
 
+    width: .3em;
 
+    height: .6em;
 
+    -webkit-transform: rotate(45deg);
 
+            transform: rotate(45deg);
 
+  }
 
+  100%{    
+    width: .3em;
 
+    height: .6em;    
+    border-color: white;
 
+    -webkit-transform: rotate(45deg);
 
+            transform: rotate(45deg);
 
+  }
 
+}
 
+
 
+/* Shape */
 
+input[type='checkbox'].checkbix[data-shape='circled'] + label > span {
 
+	border-radius: 100%;
 
+}
 
+
 
+/* Colors */
 
+input[type='checkbox'].checkbix[data-color='black']:checked + label > span {
 
+	background: #111;
 
+}
 
+
 
+input[type='checkbox'].checkbix[data-color='blue']:checked + label > span {
 
+	background: #0074D9;
 
+}
 
+
 
+input[type='checkbox'].checkbix[data-color='red']:checked + label > span {
 
+	background: #FF4136;
 
+}
 
+
 
+input[type='checkbox'].checkbix[data-color='gray']:checked + label > span {
 
+	background: #AAAAAA;
 
+}
 
+
 
+input[type='checkbox'].checkbix[data-color='orange']:checked + label > span {
 
+	background: #FF851B;
 
+}
 
+

File diff suppressed because it is too large
+ 0 - 0
zheng-ui/src/plugins/checkbix/css/checkbix.min.css


+ 1 - 0
zheng-ui/src/plugins/checkbix/js/checkbix.js
View File 

@@ -0,0 +1 @@
 
+(function(t,e){"use strict";if(typeof define==="function"&&define.amd){define("Checkbix",e)}else if(typeof exports==="object"){exports=module.exports=e()}else{t.Checkbix=e()}})(this,function(){"use strict";var t={};var e;var a={initClass:"checkbix"};var r=function(t,e,a){if(Object.prototype.toString.call(t)==="[object Object]"){for(var r in t){if(Object.prototype.hasOwnProperty.call(t,r)){e.call(a,t[r],r,t)}}}else{for(var n=0,i=t.length;n<i;n++){e.call(a,t[n],n,t)}}};var n=function(t,e){var a={};r(t,function(e,r){a[r]=t[r]});r(e,function(t,r){a[r]=e[r]});return a};var i=function(){var t=document.querySelectorAll("."+e.initClass);for(var a=0;a<t.length;a++){var r=t[a].getAttribute("data-size")?t[a].getAttribute("data-size"):"";var n=t[a].getAttribute("data-arialabel")?t[a].getAttribute("data-arialabel"):"";t[a].insertAdjacentHTML("afterend",'<label aria-label="'+n+'" role="checkbox" for="'+t[a].id+'" class="'+e.initClass+'"><span class="'+r+'"></span>'+t[a].getAttribute("data-text")+"</label>")}};t.destroy=function(){if(!e)return;document.removeEventListener("click",i,false);e=null};t.init=function(r){t.destroy();e=n(a,r||{});document.addEventListener("DOMContentLoaded",i,false)};return t});

File diff suppressed because it is too large
+ 0 - 0
zheng-ui/src/plugins/checkbix/js/checkbix.min.css


+ 1 - 0
zheng-ui/src/plugins/checkbix/js/checkbix.min.js
View File 

@@ -0,0 +1 @@
 
+!function(t,e){"use strict";"function"==typeof define&&define.amd?define("Checkbix",e):"object"==typeof exports?exports=module.exports=e():t.Checkbix=e()}(this,function(){"use strict";var t,e={},n={initClass:"checkbix"},i=function(t,e,n){if("[object Object]"===Object.prototype.toString.call(t))for(var i in t)Object.prototype.hasOwnProperty.call(t,i)&&e.call(n,t[i],i,t);else for(var a=0,r=t.length;a<r;a++)e.call(n,t[a],a,t)},a=function(t,e){var n={};return i(t,function(e,i){n[i]=t[i]}),i(e,function(t,i){n[i]=e[i]}),n},r=function(){for(var e=document.querySelectorAll("."+t.initClass),n=0;n<e.length;n++){var i=e[n].getAttribute("data-size")?e[n].getAttribute("data-size"):"",a=e[n].getAttribute("data-arialabel")?e[n].getAttribute("data-arialabel"):"";e[n].insertAdjacentHTML("afterend",'<label aria-label="'+a+'" role="checkbox" for="'+e[n].id+'" class="'+t.initClass+'"><span class="'+i+'"></span>'+e[n].getAttribute("data-text")+"</label>")}};return e.destroy=function(){t&&(document.removeEventListener("click",r,!1),t=null)},e.init=function(i){e.destroy(),t=a(n,i||{}),document.addEventListener("DOMContentLoaded",r,!1)},e});

Some files were not shown because too many files changed in this diff