From 2d967737c8783de12bd7cd4522861e020752f7b2 Mon Sep 17 00:00:00 2001
From: bobi1234 <jxjy.ing@foxmail.com>
Date: Wed, 11 Jul 2018 09:13:54 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E6=BB=9A=E5=8A=A8=E6=9D=A1?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 css/scroll-bar.css            | 14 +++++++++++---
 data/{data.json => user.json} |  0
 user.html                     | 31 ++++++++++++++++++++++++-------
 3 files changed, 35 insertions(+), 10 deletions(-)
 rename data/{data.json => user.json} (100%)

diff --git a/css/scroll-bar.css b/css/scroll-bar.css
index 9f28e89..61cb798 100644
--- a/css/scroll-bar.css
+++ b/css/scroll-bar.css
@@ -1,30 +1,38 @@
-/*美化滚动条代码*/
+/*==============================================美化滚动条代码==============================================*/
+/*滚动条整体部分*/
 ::-webkit-scrollbar {
     width: 10px;
     height: 10px;
 }
 
+/*滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。*/
 ::-webkit-scrollbar-button:vertical {
     display: none;
 }
 
+/*滚动条的轨道（里面装有Thumb）*/
 ::-webkit-scrollbar-track:vertical {
     background-color: black;
 }
 
+/*内层轨道，滚动条中间部分（除去）*/
 ::-webkit-scrollbar-track-piece {
     background-color: #F5F5F5;
 }
 
-::-webkit-scrollbar-thumb:vertical {
+/*滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）*/
+/*如何只控制横向滚动条样式则应该写成： ::-webkit-scrollbar-thumb:vertical */
+::-webkit-scrollbar-thumb {
     margin-right: 10px;
     background-color: #A6A6A6;
 }
 
-::-webkit-scrollbar-thumb:vertical:hover {
+/*如何只控制横向滚动条样式则应该写成： ::-webkit-scrollbar-thumb:vertical:hover */
+::-webkit-scrollbar-thumb:hover {
     background-color: #aaa;
 }
 
+/*边角，即两个滚动条的交汇处*/
 ::-webkit-scrollbar-corner:vertical {
     background-color: #535353;
 }
diff --git a/data/data.json b/data/user.json
similarity index 100%
rename from data/data.json
rename to data/user.json
diff --git a/user.html b/user.html
index c99b34e..4e0fd0d 100644
--- a/user.html
+++ b/user.html
@@ -44,7 +44,7 @@
             <button class="layui-btn layui-btn-danger" id="batchDel">
                 <i class="layui-icon layui-icon-delete"></i>批量删除
             </button>
-            <button class="layui-btn">
+            <button class="layui-btn" id="addUser">
                 <i class="layui-icon">&#xe61f;</i>添加用户
             </button>
             <span>共有数据：<i id="countNum"></i> 条</span>
@@ -74,7 +74,7 @@
 			
 			table.render({
 				elem: '#tableId',
-				url:'data/data.json',
+				url:'data/user.json',
 				limit: 10,
 				page: true,
 				cols: [[
@@ -88,7 +88,7 @@
 					{field:'email', title:'邮箱', width:200},
 					{field:'createTime', title:'创建时间', width:200},
 					{field:'logins', title:'登陆次数', width:100},
-					{title:'操作', width:280, templet: '#operationTpl',  align:'center'}
+					{title:'操作', width:200, templet: '#operationTpl',  align:'center'}
 				]],
 				done: function(res, curr, count){
 					$("#countNum").text(count);
@@ -118,29 +118,46 @@
 						}
 					});
                 }else if(layEvent === 'del'){
-					layer.confirm("确定要删除吗？", {skin: 'layui-layer-lan', icon: 2, title:'提示', anim: 4}, function () {
+					layer.confirm("确定要删除吗？", {skin: 'layui-layer-lan', icon: 2, title:'提示', anim: 6}, function () {
 						layer.msg("操作成功！", {icon: 1, time: 1000});
 					});
                 }
             });
 			
 			$("#batchEnabled").click(function(){
-				layer.confirm("确定要批量启用吗？", {icon: 3, title:'提示'}, function () {
+				layer.confirm("确定要批量启用吗？", {icon: 3, title:'提示', anim: 1}, function () {
                     layer.msg("操作成功！", {icon: 1, time: 1000});
                 });
 			})
 			
 			$("#batchDisabled").click(function(){
-				layer.confirm("确定要批量停用吗？", {icon: 3, title:'提示'}, function () {
+				layer.confirm("确定要批量停用吗？", {icon: 3, title:'提示', anim: 2}, function () {
 					layer.msg("操作成功！", {icon: 1, time: 1000});
 				});
 			})
 			
 			$("#batchDel").click(function(){
-				layer.confirm("确定要批量删除吗？", {icon: 2, title:'提示'}, function () {
+				layer.confirm("确定要批量删除吗？", {icon: 2, title:'提示', anim: 6}, function () {
 					layer.msg("操作成功！", {icon: 1, time: 1000});
 				});
 			})
+			
+			$("#addUser").click(function(){
+				layer.open({
+					title: '添加用户',
+					type: 2,
+					shade: false,
+					maxmin: true,
+					shade: 0.5,
+					anim: 4,
+					area: ['90%', '90%'],
+					content: 'user-edit.html',
+					zIndex: layer.zIndex,
+					end: function () {
+						// $(".layui-laypage-btn")[0].click();
+					}
+				});
+			})
         })
     </script>
 	<!--模板-->