SkyID
/
zheng
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

美化滚动条

This commit is contained in:
shuzheng 2016-11-30 15:24:22 +08:00
parent ec2fab65b6
commit 136990a950
8 changed files with 3870 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

103
cms/cms-web/src/main/webapp/resources/css/admin.css
View File

@ -1,5 +1,6 @@
body, html {height: 100%; position: relative; font-family: 'Microsoft yahei'; font-size: 13px; font-weight: 400;} body, html {height: 100%; position: relative; font-family: 'Microsoft yahei'; font-size: 13px; font-weight: 400;}
img {vertical-align: middle;} img {vertical-align: middle;}
a, a:hover, a:active, a:focus {text-decoration: none;}
/* 头部 */ /* 头部 */
#header {width: 100%; height: 70px; padding: 0 20px; position: fixed; z-index: 11; left: 0; top: 0; box-shadow: 0 1px 4px rgba(0,0,0,.3);} #header {width: 100%; height: 70px; padding: 0 20px; position: fixed; z-index: 11; left: 0; top: 0; box-shadow: 0 1px 4px rgba(0,0,0,.3);}
#menu {position: relative; list-style: none; padding: 17px 0; margin-bottom: 0; height: 70px;} #menu {position: relative; list-style: none; padding: 17px 0; margin-bottom: 0; height: 70px;}
@ -83,6 +84,106 @@ img {vertical-align: middle;}
.zmdi-caret-down:before { .zmdi-caret-down:before {
content: '\f2f2'; content: '\f2f2';
} }
.main-menu {
list-style: none;
padding-left: 0;
margin: 20px 0 0;
}
.main-menu a {
-webkit-transition: color;
-o-transition: color;
transition: color;
-webkit-transition-duration: .3s;
transition-duration: .3s;
}
.main-menu>li>a {
padding: 14px 20px 14px 65px;
display: block;
font-weight: 500;
position: relative;
color: #4C4C4C;
}
.main-menu>li>a>i {
position: absolute;
left: 25px;
font-size: 18px;
top: 2px;
width: 25px;
text-align: center;
padding: 13px 0;
}
.sub-menu ul {
list-style: none;
display: none;
padding: 0;
}
.sub-menu ul>li:first-child>a {
padding-top: 14px;
}
.sub-menu ul>li>a {
padding: 8px 20px 8px 65px;
font-weight: 500;
display: block;
color: #989898;
}
.sub-menu.toggled>ul{
display: block;
}
.sub-menu>a:after, .sub-menu>a:before {
position: absolute;
top: 50%;
margin-top: -11px;
font-family: Material-Design-Iconic-Font;
font-size: 17px;
right: 15px;
-webkit-transition: all;
-o-transition: all;
transition: all;
-webkit-transition-duration: 250ms;
transition-duration: 250ms;
}
.sub-menu>a:before {
content: "\f278";
-webkit-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
.sub-menu.toggled>a:before {
content: "\f278";
-webkit-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
}
.sub-menu>a:after, .sub-menu>a:before {
position: absolute;
top: 50%;
margin-top: -11px;
font-family: Material-Design-Iconic-Font;
font-size: 17px;
right: 15px;
-webkit-transition: all;
-o-transition: all;
transition: all;
-webkit-transition-duration: 250ms;
transition-duration: 250ms;
}
.sub-menu>a:after {
content: "\f273";
transform: scale(0);
}
.sub-menu.toggled>a:after {
content: "\f273";
-webkit-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
.main-menu a:hover {
color: #262626;
}
.upms-version{margin-top: 10px; height: 46px; line-height: 46px; font-size: 12px; color: #777; text-align: center; border-top: 1px solid #eee;}
/* 内容区响应式 */ /* 内容区响应式 */
@media (min-width: 768px) { @media (min-width: 768px) {
#content {padding-left: 0;} #content {padding-left: 0;}
@ -96,6 +197,8 @@ img {vertical-align: middle;}
#content {height: 100%; padding-right: 0; transition: all;} #content {height: 100%; padding-right: 0; transition: all;}
/* 底部 */ /* 底部 */
#footer {display:none;} #footer {display:none;}
/* 滚动条 */
.mCSB_scrollTools .mCSB_dragger_bar {border-radius: 0!important;}
/** skins **/ /** skins **/
#header {background: #29a176;} #header {background: #29a176;}

36
cms/cms-web/src/main/webapp/resources/index.html
View File

@ -9,6 +9,7 @@
<link href="plugins/bootstrap-3.3.0/css/bootstrap.min.css" rel="stylesheet"/> <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/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/waves-0.7.5/waves.min.css" rel="stylesheet"/>
<link href="plugins/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.min.css" rel="stylesheet"/>
<link href="css/admin.css" rel="stylesheet"/> <link href="css/admin.css" rel="stylesheet"/>
</head> </head>
<body> <body>
@ -110,46 +111,46 @@
<!-- 菜单区 --> <!-- 菜单区 -->
<ul class="main-menu"> <ul class="main-menu">
<li> <li>
<a class="waves-effect" href="javascript:;" ng-click="addTab('首页', 'home.html')"><i class="zmdi zmdi-home"></i> 首页</a> <a class="waves-effect" href="javascript:;"><i class="zmdi zmdi-home"></i> 首页</a>
</li> </li>
<li class="sub-menu"> <li class="sub-menu">
<a class="waves-effect" href="" data-ma-action="submenu-toggle"><i class="zmdi zmdi-widgets"></i> 系统组织管理</a> <a class="waves-effect" href="javascript:;"><i class="zmdi zmdi-widgets"></i> 系统组织管理</a>
<ul> <ul>
<li><a class="waves-effect" href="javascript:;" ng-click="addTab('系统注册', 'crud.html')">系统注册</a></li> <li><a class="waves-effect" href="javascript:;">系统注册</a></li>
<li><a class="waves-effect" href="javascript:;" ng-click="addTab('组织管理', 'crud-tree.html')">组织管理</a></li> <li><a class="waves-effect" href="javascript:;">组织管理</a></li>
</ul> </ul>
</li> </li>
<li class="sub-menu"> <li class="sub-menu">
<a class="waves-effect" href="" data-ma-action="submenu-toggle"><i class="zmdi zmdi-widgets"></i> 用户角色管理</a> <a class="waves-effect" href="javascript:;"><i class="zmdi zmdi-widgets"></i> 用户角色管理</a>
<ul> <ul>
<li><a class="waves-effect" href="javascript:;" ng-click="addTab('用户管理', 'form-components.html')">用户管理</a></li> <li><a class="waves-effect" href="javascript:;">用户管理</a></li>
<li><a class="waves-effect" href="javascript:;" ng-click="addTab('角色管理', 'typography.html')">角色管理</a></li> <li><a class="waves-effect" href="javascript:;" ng-click="addTab('角色管理', 'typography.html')">角色管理</a></li>
</ul> </ul>
</li> </li>
<li class="sub-menu"> <li class="sub-menu">
<a class="waves-effect" href="" data-ma-action="submenu-toggle"><i class="zmdi zmdi-widgets"></i> 资源权限管理</a> <a class="waves-effect" href="javascript:;"><i class="zmdi zmdi-widgets"></i> 资源权限管理</a>
<ul> <ul>
<li><a class="waves-effect" href="javascript:;" ng-click="addTab('资源管理', 'table.html')">资源管理</a></li> <li><a class="waves-effect" href="javascript:;">资源管理</a></li>
<li><a class="waves-effect" href="javascript:;" ng-click="addTab('权限管理', 'table.html')">权限管理</a></li> <li><a class="waves-effect" href="javascript:;">权限管理</a></li>
</ul> </ul>
</li> </li>
<li class="sub-menu"> <li class="sub-menu">
<a class="waves-effect" href="" data-ma-action="submenu-toggle"><i class="zmdi zmdi-widgets"></i> 权限分配管理</a> <a class="waves-effect" href="javascript:;"><i class="zmdi zmdi-widgets"></i> 权限分配管理</a>
<ul> <ul>
<li><a class="waves-effect" href="javascript:;" ng-click="addTab('角色权限', 'table.html')">角色权限</a></li> <li><a class="waves-effect" href="javascript:;">角色权限</a></li>
<li><a class="waves-effect" href="javascript:;" ng-click="addTab('用户权限', 'table.html')">用户权限</a></li> <li><a class="waves-effect" href="javascript:;">用户权限</a></li>
</ul> </ul>
</li> </li>
<li class="sub-menu"> <li class="sub-menu">
<a class="waves-effect" href="" data-ma-action="submenu-toggle"><i class="zmdi zmdi-widgets"></i> DEMO</a> <a class="waves-effect" href="javascript:;"><i class="zmdi zmdi-widgets"></i> DEMO</a>
<ul> <ul>
<li><a class="waves-effect" href="javascript:;" ng-click="addTab('获取资源(DEMO)', 'table.html')">获取资源(DEMO)</a></li> <li><a class="waves-effect" href="javascript:;">获取资源(DEMO)</a></li>
<li><a class="waves-effect" href="javascript:;" ng-click="addTab('获取权限(DEMO)', 'table.html')">获取权限(DEMO)</a></li> <li><a class="waves-effect" href="javascript:;">获取权限(DEMO)</a></li>
<li><a class="waves-effect" href="javascript:;" ng-click="addTab('单点登录(DEMO)', 'table.html')">单点登录(DEMO)</a></li> <li><a class="waves-effect" href="javascript:;">单点登录(DEMO)</a></li>
</ul> </ul>
</li> </li>
<li> <li>
<div class="upms-version">&copy; ZHENG-UPMS V1.0.1</div> <div class="upms-version">&copy; ZHENG-UPMS V1.0.0</div>
</li> </li>
</ul> </ul>
<!-- /菜单区 --> <!-- /菜单区 -->
@ -165,6 +166,7 @@
<script src="plugins/jquery.1.12.4.min.js"></script> <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/bootstrap-3.3.0/js/bootstrap.min.js"></script>
<script src="plugins/waves-0.7.5/waves.min.js"></script> <script src="plugins/waves-0.7.5/waves.min.js"></script>
<script src="plugins/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.concat.min.js"></script>
<script src="js/admin.js"></script> <script src="js/admin.js"></script>
</body> </body>
</html> </html>

18
cms/cms-web/src/main/webapp/resources/js/admin.js
View File

@ -2,8 +2,24 @@ $(function() {
// 侧边栏操作按钮 // 侧边栏操作按钮
$('#guide').click(function() { $('#guide').click(function() {
$(this).toggleClass('toggled'); $(this).toggleClass('toggled');
$('#aside').toggleClass('toggled'); $('#sidebar').toggleClass('toggled');
});
// 侧边栏二级菜单
$('.sub-menu a').click(function() {
$(this).next().slideToggle(200);
$(this).parent().toggleClass('toggled');
}); });
// Waves初始化 // Waves初始化
Waves.displayEffect(); Waves.displayEffect();
// 滚动条初始化
$('#sidebar').mCustomScrollbar({
theme: 'minimal-dark',
scrollInertia: 100,
axis: 'yx',
mouseWheel: {
enable: true,
axis: 'y',
preventDefault: true
}
});
}); });

5
cms/cms-web/src/main/webapp/resources/plugins/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.concat.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1267
cms/cms-web/src/main/webapp/resources/plugins/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.css Normal file
View File

File diff suppressed because it is too large Load Diff

2458
cms/cms-web/src/main/webapp/resources/plugins/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.js Normal file
View File

File diff suppressed because it is too large Load Diff

1
cms/cms-web/src/main/webapp/resources/plugins/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

BIN
cms/cms-web/src/main/webapp/resources/plugins/malihu-custom-scrollbar-plugin/mCSB_buttons.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.9 KiB