增加checkbix

wangguiyu · Feb 27, 2017 · de54318 · de54318
1 parent a9a8832
commit de54318
Show file tree

Hide file tree

Showing 6 changed files with 243 additions and 5 deletions.
diff --git a/zheng-ui/src/login.html b/zheng-ui/src/login.html
@@ -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>
diff --git a/zheng-ui/src/plugins/checkbix/css/checkbix.css b/zheng-ui/src/plugins/checkbix/css/checkbix.css
@@ -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;
+}
+
diff --git a/zheng-ui/src/plugins/checkbix/css/checkbix.min.css b/zheng-ui/src/plugins/checkbix/css/checkbix.min.css
diff --git a/zheng-ui/src/plugins/checkbix/js/checkbix.js b/zheng-ui/src/plugins/checkbix/js/checkbix.js
diff --git a/zheng-ui/src/plugins/checkbix/js/checkbix.min.css b/zheng-ui/src/plugins/checkbix/js/checkbix.min.css
diff --git a/zheng-ui/src/plugins/checkbix/js/checkbix.min.js b/zheng-ui/src/plugins/checkbix/js/checkbix.min.js