jQ UI 后台管理系统基础UI
jQ UI 后台管理系统基础UI
基础UI框架！ 基于jquery HTML CSS 没有多余的代码，只有基础东西 所展示的基础界面如下图。左侧点击菜单，右侧显示内容，支持右侧选项卡关闭等，更多功能效果自己拓展开发
基础页面
核心代码
HTML代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>后台管系统框架</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width"/>
<link rel="Bookmark" href="static/images/logo.png">
<link rel="Shortcut Icon" href="static/images/logo.png">
<link rel="stylesheet" type="text/css" href="static/css/reset.css">
<link rel="stylesheet" type="text/css" href="static/css/iconfont.css">
<link rel="stylesheet" type="text/css" href="static/css/style.css">
</head>
<body>
<!-- 左侧菜单 -->
<div class="scrollbarMenu" >
<div class="sysLogo">
<div class="logoImg"></div>
<div class="sysTitle">后台管系统框架</div>
</div>
<div class="lsm-container">
<div class="lsm-scroll" >
<div class="lsm-sidebar leftMenu">
<ul>
<li class="lsm-sidebar-item ">
<a href="javascript:;" data-menu-url="dashboard.html"><i class="ift tbyibiaopan"></i><span>仪表盘</span></a>
</li>
<li class="lsm-sidebar-item">
<a href="javascript:;"><i class="ift tbleixing"></i><span>原型</span><i class="ift tbarrow-right"></i></a>
<ul>
<li><a href="javascript:;" data-menu-url="modalExample.html"><span>综合示例</span></a></li>
<li><a href="javascript:;" data-menu-url="add.html"><span>综合表单</span></a></li>
</ul>
</li>
<li class="lsm-sidebar-item">
<a href="javascript:;"><i class="ift tbcunchushebei1"></i><span>组件</span><i class="ift tbarrow-right"></i></a>
<ul>
<li><a href="javascript:;" data-menu-url="button.html"><span>按钮</span></a></li>
<li><a href="javascript:;" data-menu-url="checkRadio.html"><span>多选&单选</span></a></li>
<li><a href="javascript:;" data-menu-url="table.html"><span>表格</span></a></li>
</ul>
</li>
<li class="lsm-sidebar-item">
<a href="javascript:;"><i class="ift tbelasticsearche"></i><span>插件</span><i class="ift tbarrow-right"></i></a>
<ul>
<li><a href="javascript:;" data-menu-url="dateTime.html"><span>日期时间</span></a></li>
<li><a href="javascript:;" data-menu-url="dialog.html"><span>弹出窗</span></a></li>
</ul>
</li></ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="rightView">
<div class="vTop">
<div class="vheader">
<a class="menuShowHid menuNini-btn">
<label>
<input type="checkbox" checked="checked">
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="30" />
<path class="line--1" d="M0 40h62c18 0 18-20-17 5L31 55" />
<path class="line--2" d="M0 50h80" />
<path class="line--3" d="M0 60h62c18 0 18 20-17-5L31 45" />
</svg>
</label>
</a>
<ul class="sysPath">
<li>控制台</li>
<li>设置管理</li>
<li>微信设置</li>
</ul>
<div class="right-menu">
<div class="navQuery">
<i class="ift tbzhishichaxun"></i>
<input type="text" class="inputq" placeholder="请输入..." />
</div>
<div class="fullScreen" id="quanPing">
<i class="ift tbquanping"></i>
</div>
<div class="sysFontSet">
<i class="ift tbzifu fontSeting"></i>
<div class="ftMdown">
<ul>
<li class="active">默认</li>
<li>中</li>
<li>小</li>
<li>迷你</li>
</ul>
</div>
</div>
<div class="member">
<span class="loginName">admin</span>
<i class="imgUser"></i>
<div class="mdown">
<ul>
<li><i class="ift tbgeren"></i>个人中心</li>
<li><i class="ift tbyibiaopan"></i>视图</li>
<li><i class="ift tbtuichu"></i>退出登录</li>
</ul>
</div>
</div>
</div>
</div>
<div id="navTabs">
<ul class="vNav">
<!-- 第一个页面不可以关闭 -->
<li class="active"><a href="javascript:;" class="t_name">视图</a></li>
</ul>
</div>
<ul class="updateNav">
<li><a href="javascript:;">刷新</a></li>
<li><a href="javascript:;">关闭</a></li>
<li><a href="javascript:;">关闭其他</a></li>
<li><a href="javascript:;">全部关闭</a></li>
</ul>
<!-- 关闭其他、全部关闭不能关闭欢迎页面“视图”页面 -->
</div>
<div class="view-waper" id="view">
<object data="welcome.html"></object>
</div>
</div>
<script type="text/javascript" src="static/js/jquery.min.js"></script>
<script type="text/javascript" src="static/js/jquery.slimscroll.min.js"></script>
<script type="text/javascript" src="static/js/fullscreen.js"></script>
<!-- <script type="text/javascript" src="static/js/sidebarMenu.js"></script> -->
<script type="text/javascript" src="static/js/ui-main.js"></script>
CSS代码
.scrollbarMenu{height:100%;}
.scrollbarMenu,
.lsm-popup.lsm-sidebar ul li,
.lsm-container.menuNini .lsm-sidebar>ul>li.lsm-sidebar-item>ul>li.lsm-sidebar-item>ul{
background:#363e47;
}
.scrollbarMenu .sysLogo{height:50px;padding:5px 10px;background:#303841;}
.scrollbarMenu .sysLogo .logoImg{height:40px;width:40px;margin-right:10px;float:left;
background:url(../images/logo.png) no-repeat;
background-size:100%;
border-radius:50px;
}
.scrollbarMenu .sysLogo .sysTitle{height:40px;float:left;color:#fff;line-height:40px;}
.scrollbarMenu {-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none; user-select: none; }
.scrollbarMenu{width:220px;position: absolute;}
.menuShowHid{height:30px;width:30px;float:left;border-radius:50px;
overflow:hidden;margin:10px 0px 0px 15px;position:relative;}
.menuShowHid:hover{background:#f5f8fb;}
.menuNini-btn svg{margin:-12px 0px 0px -14px;cursor:pointer;}
.menuNini-btn input[type="checkbox"]{display: none;}
.menuNini-btn path {
fill: none;
stroke: #333;
stroke-width: 3;
stroke-linecap: round;
stroke-linejoin: round;
--length: 24;
--offset: -38;
stroke-dasharray: var(--length) var(--total-length);
stroke-dashoffset: var(--offset);
transition: all .8s cubic-bezier(.645, .045, .355, 1);
}
.menuNini-btn circle {fill: #fff3;opacity: 0;}
.menuNini-btn label {display:block;width:40px;height:40px;}
.menuNini-btn label:hover circle {opacity: 1;}
.menuNini-btn input:checked+svg .line--1,
.menuNini-btn input:checked+svg .line--3 {--length: 8.602325267;}
.menuNini-btn .line--1,
.menuNini-btn .line--3 {--total-length: 126.38166809082031;}
.menuNini-btn .line--2 {--total-length: 80;}
.menuNini-btn input:checked+svg .line--1,
.menuNini-btn input:checked+svg .line--3 {--offset: -109.1770175568;}
.lsm-container {height: calc(100% - 65px); transition: all .3s;z-index: 100}
.lsm-container li>a.active{ background: #c55b03; color: #fff; }
.lsm-sidebar a{display: block;overflow: hidden;padding-left:20px;line-height: 40px;max-height: 40px;color:#fff;transition: all .3s;}
.lsm-container ul:first-child > li> a, .lsm-container ul:first-child > li> a span{ line-height: 55px;max-height: 55px; }
.lsm-sidebar a .ift{font-size:22px;}
.lsm-sidebar a span{margin-left:15px;}
.lsm-sidebar .lsm-sidebar-item .lsm-sidebar-item >ul>li a span{margin-left: 60px;}
.lsm-sidebar-item{position: relative;}
.lsm-sidebar-item.lsm-sidebar-show{border-bottom: none;}
.lsm-sidebar-item ul{display: none;background: rgba(0,0,0,.1);}
.lsm-sidebar-item.lsm-sidebar-show ul{display: block;}
.lsm-sidebar-item>a:before{content: "";position: absolute;left: 0px;width: 2px;height: 40px;background: #34A0CE;opacity:0;transition: all .3s;}
.lsm-container ul:first-child>li.lsm-sidebar-item>a:before{height: 55px;}
.lsm-sidebar .lsm-sidebar-icon{font-size: 20px;position: absolute;margin-left:-1px;}
/* 此处修改导航图标 可自定义iconfont 替换*/
.icon_1::after{content: "\e62b";}
.icon_2::after{content: "\e669";}
.icon_3::after{content: "\e61d";}
.icon_3::after{content: "\e698";}
.lsm-container .ift.tbarrow-right{float:right;margin-right: 20px;font-size: 12px;transition: transform .3s;}
.lsm-sidebar-show > a > i.ift.tbarrow-right{transform:rotate(90deg);}
.lsm-sidebar-show,.lsm-sidebar-item>a:hover{color: #FFF;background:#3f4953;}
.lsm-sidebar-show>a:before,.lsm-sidebar-item>a:hover:before{opacity:1;}
.lsm-sidebar-item li>a:hover,.lsm-popup>div>ul>li>a:hover{color: #FFF; background: #6e809c;}
.menuNini .lsm-container, .menuNini .lsm-container{width: 60px;}
.menuNini .sysLogo .sysTitle{display:none;}
.lsm-container.menuNini .lsm-sidebar .lsm-sidebar-icon{/* margin-left:-2px; */}
.scrollbarMenu.menuNini ul:first-child>li.lsm-sidebar-item>a span{display: none;}
.scrollbarMenu.menuNini ul:first-child>li.lsm-sidebar-item>a> i.tbarrow-right{margin-right: -20px;}
.lsm-container.menuNini .lsm-sidebar>ul>li.lsm-sidebar-item>ul>li.lsm-sidebar-item>ul{
display:none;
position: absolute;top:0px;left:180px;width: 180px;z-index: 99;
bottom: 0px;
top: 0px;
overflow: hidden;
}
.scrollbarMenu.menuNini ul:first-child > li > ul{
display: none;
}
.transform { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); }
.lsm-popup div{background: #05161f;}
.lsm-popup{
display: block;
position: absolute;
border: 3px solid rgba(60, 71, 76, 0);
}
.lsm-popup > div > a > i.ift.tbarrow-right{
transform:rotate(90deg);
}
.lsm-popup.second{
left: 60px;
}
.lsm-popup.third{
left: 243px;
}
.lsm-popup.third.lsm-sidebar > div > ul {
display: block;
}
.lsm-popup div {
border-radius: 5px;
}
.lsm-popup .lsm-sidebar-icon{
display: none;
}
.lsm-popup.lsm-sidebar a span{
margin-left: 0px;
}
.lsm-popup.lsm-sidebar > div > ul > li.lsm-sidebar-item>ul{position: absolute;top:0px;left:180px;width: 180px;z-index: 99;}
.lsm-popup.lsm-sidebar ul {
width: 180px;
}
.lsm-popup.lsm-sidebar ul li{
width: 180px;
}
.lsm-popup.lsm-sidebar ul li:last-child, .lsm-popup>div>ul>li:last-child>a{
border-radius: 0 0 5px 5px ;
}
/*右侧数据区域*/
.rightView{margin-left:220px;height:100%;}
.rightView.viewNini{margin-left:60px;}
.rightView .view-waper{clear:both;height:calc(100% - 90px);}
.rightView .view-waper object{width:100%;height:100%;overflow-y:auto;background:#f0f3fa;}
.layout_main{background:#ffffff;padding:15px;margin:15px;border-radius:5px;min-height:calc(100% - 30px);}
.welcome{background:url(../images/welcome.png) no-repeat;background-size:100%;min-height:500px;height:100%;border-radius:5px;}
.rightView .vTop{width: 100%;height:90px;
/*position: relative;*/
}
.rightView .vTop .vheader{height:50px;
position: relative;
background: #fff;
-webkit-box-shadow: 0 1px 4px rgb(0 21 41 / 8%);
box-shadow: 0 1px 4px rgb(0 21 41 / 8%);
}
.rightView .vTop #navTabs{
width:100%;
overflow-x: scroll;
border-bottom: 1px solid #d8dce5;
}
.rightView .vTop .vNav{height: 40px;
display: flex;
padding:3px 10px;
width: 100%;
background: #fff;
/*overflow-y:hidden;
overflow-x:auto;*/
-webkit-box-shadow: 0 1px 3px 0 rgb(0 0 0 / 12%), 0 0 3px 0 rgb(0 0 0 / 4%);
box-shadow: 0 1px 3px 0 rgb(0 0 0 / 12%), 0 0 3px 0 rgb(0 0 0 / 4%);
}
.rightView .sysPath{float:left;margin-left:20px;}
.rightView .sysPath li{display: inline-block;color:#97a8be;font-size: 14px;
line-height: 50px;}
.rightView .sysPath li+li:before {
padding: 0px 5px;
color: #ccc;
content: "/\00a0";
}
.rightView .sysPath li:first-child{color:#333;}
.rightView .right-menu{float:right;}
.right-menu .navQuery{float:left;margin-right:20px;transition: all .13s;}
.right-menu .navQuery .ift{line-height:50px;cursor:pointer;}
.right-menu .navQuery .inputq{
border-bottom:1px solid #d9d9d9;
border-width:0px 0px 1px 0px;
height:35px;display:none;
}
.rightView .right-menu .sysFontSet{float:left;}
.right-menu .sysFontSet{float:left;}
.right-menu .fullScreen{float:left;margin-right:20px;cursor:pointer;line-height:48px;height:30px;}
.right-menu .fullScreen .iconfont{font-size:20px;}
.fullScreen{background:#fff;}
.fullScreen .fullScreen .i-juzhong:before {content: "\e63c";}
.right-menu .fontSeting{line-height:50px;margin:13px 30px 0px 0px;cursor:pointer;}
.rightView .right-menu div.member{float:left;}
.right-menu div.member { position:relative; padding-right:10px; margin-right:10px; cursor:pointer;margin-top: 8px;}
.right-menu div.member .loginName{ float:left; margin-top:8px; font-size:16px; margin-right:5px;font-weight:bold;}
.right-menu div.member i.imgUser { float:right;margin-left:5px;display:block;width: 35px;height:35px;
background:url(../images/yonghu.png)no-repeat;background-size:cover;
border-radius:30px;
overflow:hidden;border:1px solid #333;
}
.right-menu .ftMdown {position:absolute; border:#d1d5db 1px solid; background:#fff;top:50px; width:85px; box-shadow: 0px 0px 4px rgba(0, 0, 0, .25); height:auto; display:none;}
.right-menu .mdown{ position:absolute; border:#d1d5db 1px solid; background:#fff; right:-10px; top:50px; width:150px; max-height:251px; box-shadow: 0px 0px 4px rgba(0, 0, 0, .25); height:auto; display:none;}
.right-menu .mdown li,.right-menu .ftMdown li { text-align:left; height:36px; line-height:36px; padding:0 10px; color:#000; font-size:12px; clear:both;}
.right-menu .mdown li:hover,.right-menu .ftMdown li:hover { background:#f5f8fb;}
.right-menu .mdown li i ,.h_right div.mdown li i.icon-geren{ font-size:20px; margin-right:5px;float:left;}
.right-menu .mdown li label { margin-right:5px;}
.right-menu .mdown li.active,.right-menu .ftMdown li.active{color:#2196F6;}
脚本代码
$(function(){
$('.lsm-scroll').slimscroll({
height: 'auto',
position: 'right',
railOpacity: 1,
size: "5px",
opacity: .4,
color: '#fffafa',
wheelStep: 5,
touchScrollStep: 50
});
$('.lsm-container ul ul').css("display", "none");
// lsm-sidebar收缩展开
$('.lsm-sidebar a').on('click',function(){
$('.lsm-scroll').slimscroll({
height: 'auto',
position: 'right',
size: "8px",
color: '#9ea5ab',
wheelStep: 5,
touchScrollStep: 50
});
if (!$('.scrollbarMenu').hasClass('menuNini')) {
$(this).parent("li").siblings("li.lsm-sidebar-item").children('ul').slideUp(200);
if ($(this).next().css('display') == "none") {
//展开未展开
// $('.lsm-sidebar-item').children('ul').slideUp(300);
$(this).next('ul').slideDown(200);
$(this).parent('li').addClass('lsm-sidebar-show').siblings('li').removeClass('lsm-sidebar-show');
}else{
//收缩已展开
$(this).next('ul').slideUp(200);
//$('.lsm-sidebar-item.lsm-sidebar-show').removeClass('lsm-sidebar-show');
$(this).parent('li').removeClass('lsm-sidebar-show');
}
}
});
//menuNini
$('.menuNini-btn svg').on('click',function(){
if ($('.menuNini-btn input[type="checkbox"]').prop("checked")) {
$('.lsm-sidebar-item.lsm-sidebar-show').removeClass('lsm-sidebar-show');
$('.lsm-container ul').removeAttr('style');
$('.scrollbarMenu').addClass('menuNini');
$('.scrollbarMenu').stop().animate({width : 60},200);
$('.rightView').addClass('viewNini');
}else{
$('.scrollbarMenu').removeClass('menuNini');
$('.lsm-container ul ul').css("display", "none");
$('.scrollbarMenu').stop().animate({width: 240},200);
$('.rightView').removeClass('viewNini');
}
});
$(document).on('mouseover','.menuNini .lsm-container ul:first>li',function(){
$(".lsm-popup.third").hide();
$(".lsm-popup.second").length == 0 && ($(".lsm-container").append("<div class='second lsm-popup lsm-sidebar'><div></div></div>"));
$(".lsm-popup.second>div").html($(this).html());
$(".lsm-popup.second").show();
$(".lsm-popup.third").hide();
var top = $(this).offset().top;
var d = $(window).height() - $(".lsm-popup.second>div").height();
if(d - top <= 0 ){
top = d >= 0 ? d - 8 : 0;
}
$(".lsm-popup.second").stop().animate({"top":top}, 100);
});
$(document).on('mouseover','.second.lsm-popup.lsm-sidebar > div > ul > li',function(){
if(!$(this).hasClass("lsm-sidebar-item")){
$(".lsm-popup.third").hide();
return;
}
$(".lsm-popup.third").length == 0 && ($(".lsm-container").append("<div class='third lsm-popup lsm-sidebar'><div></div></div>"));
$(".lsm-popup.third>div").html($(this).html());
$(".lsm-popup.third").show();
var top = $(this).offset().top;
var d = $(window).height() - $(".lsm-popup.third").height();
if(d - top <= 0 ){
top = d >= 0 ? d - 8 : 0;
}
$(".lsm-popup.third").stop().animate({"top":top}, 100);
});
$(document).on('mouseleave','.menuNini .lsm-container ul:first, .menuNini .slimScrollBar,.second.lsm-popup ,.third.lsm-popup',function(){
$(".lsm-popup.second").hide();
$(".lsm-popup.third").hide();
});
$(document).on('mouseover','.menuNini .slimScrollBar,.second.lsm-popup',function(){
$(".lsm-popup.second").show();
});
$(document).on('mouseover','.third.lsm-popup',function(){
$(".lsm-popup.second").show();
$(".lsm-popup.third").show();
});
});
const TAB_HEAD_TEMP = '<li class="active"><a href="javascript:;" class="t_name">{TITLE}</a><i class="t_close">×</i></li>';
var cached_view_pages = [];//缓存的视图页面
//创建页签页
function createTabPage(t, f){
if(t && '' != t && f && '' != f){
var p_idx = cached_view_pages.findIndex(itm=> t === itm.title);
if(-1 < p_idx){
activeTabPage(p_idx, t);
return false;
}
//生成页签头
$('.vNav>li').removeClass('active');
var $li_obj = $(TAB_HEAD_TEMP.replace('{TITLE}', t));
$li_obj.click(function(){
activeTabPage($li_obj.index(), t);
});
$li_obj.bind('contextmenu', function(){
$('.updateNav').css({ 'top': '0', 'left': '0', 'display': 'none' });
let offset = $('.updateNav').offset({top:89, left: $li_obj.position().left});
$('.updateNav').show('fast');
return false;
});
$li_obj.find('i').click(function(){
var i_idx = $li_obj.index();
if(-1 < i_idx){
closeTabPage(i_idx);
}
});
$('.vNav').append($li_obj);
$('.vNav>li:eq(0)>i').remove();
//创建页签内容
$('.view-waper>object').attr('data', f);
cached_view_pages.push({title: t, file: f});
}
}
function menuCk(){
$('.nav-container li').click(function(i){
if(0 < $(this).children('ul').length){return false;}
var $a = $(this).children('a').first();
var title = $a.find('span').text();
var pageFileName = $a.attr('data-menu-url');
if(!title || '' == title){
alert('页签标题不能为空!');
return false;
}
if(!pageFileName || '' == pageFileName){
alert('页签的url不能为空!');
return false;
}
createTabPage(title, pageFileName);
});
}
$(function(){
$('.vNav>li:gt(0)').remove();
cached_view_pages = [{title: '欢迎页', file: 'welcome.html'}];
//首页事件
$('.vNav>li:eq(0)').click(function(){
activeTabPage(0, cached_view_pages[0].title);
});
//注册点击左侧子菜单事件
menuCk();
//右键菜单事件
$('.updateNav').mouseleave(function(){
$('.updateNav').hide("fast");
});
$('.updateNav li').click(function(){
var idx = $(this).index();
switch(idx){
case 0:
$('.view-waper>object').attr('data', $('.view-waper>object').attr('data'));
break;
case 1:
closeTabPage($('.vNav').find('.active').index());
break;
case 2:
var t_idx = $('.vNav').find('.active').index();
var aGt = $('.vNav>li:gt('+t_idx+')');
for(var i=0;i<aGt.length;i++){
removeTabCache(aGt[i]);
}
aGt.remove();
$('.vNav>li:lt('+t_idx+')').each(function(i){
if(i > 0){
removeTabCache($(this)[0]);
$(this).remove();
}
});
break;
case 3:
closeTabPage(-1);
break;
default:
break;
}
});
//关闭页签
function closeTabPage(idx, ignoreConfirm){
if(!ignoreConfirm){
var result = confirm('确认关闭 ?');
if(!result){
return false;
}
}
if(-1 !== idx){
removeTabCache($('.vNav>li:eq('+idx+')')[0]);
$('.vNav>li:eq('+idx+')').remove();
}else{
var aLi = $('.vNav>li:gt(0)');
for(var i=0;i<aLi.length;i++){
removeTabCache(aLi[i]);
}
aLi.remove();
}
}
//关闭
//激活当前页签
function activeTabPage(idx, title){
if(-1 < idx){
$('.vNav>li').removeClass('active');
$('.vNav>li:eq('+idx+')').addClass('active');
var p_item = cached_view_pages.find(itm=> title === itm.title);
$('.view-waper>object').attr('data', p_item.file);
}
}
//移除页签数据缓存
function removeTabCache(doc_obj){
var title = $(doc_obj).find('a').text();
var idx = cached_view_pages.findIndex(itm=> title === itm.title);
if(-1 !== idx){
cached_view_pages.splice(idx,1);
}
}
//菜单
$('.nav-scroll').niceScroll({
cursorcolor: "#ccc",//#CC0071 光标颜色
cursoropacitymax: 1, //改变不透明度非常光标处于活动状态（scrollabar“可见”状态），范围从1到0
touchbehavior: false, //使光标拖动滚动像在台式电脑触摸设备
cursorwidth: "5px", //像素光标的宽度
cursorborder: "0", // 游标边框css定义
cursorborderradius: "5px",//以像素为光标边界半径
autohidemode: false //是否隐藏滚动条
});
$('.nav-container ul ul').css("display", "none");
// nav-sidebar收缩展开
$('.nav-sidebar a').on('click',function(){
$('.nav-scroll').niceScroll({
cursorcolor: "#ccc",//#CC0071 光标颜色
cursoropacitymax: 1, //改变不透明度非常光标处于活动状态（scrollabar“可见”状态），范围从1到0
touchbehavior: false, //使光标拖动滚动像在台式电脑触摸设备
cursorwidth: "5px", //像素光标的宽度
cursorborder: "0", // 游标边框css定义
cursorborderradius: "5px",//以像素为光标边界半径
autohidemode: false //是否隐藏滚动条
});
if (!$('.scrollbarMenu').hasClass('menuNini')) {
$(this).parent("li").siblings("li.nav-sidebar-item").children('ul').slideUp(200);
if ($(this).next().css('display') == "none") {
//展开未展开
// $('.nav-sidebar-item').children('ul').slideUp(300);
$(this).next('ul').slideDown(200);
$(this).parent('li').addClass('nav-sidebar-show').siblings('li').removeClass('nav-sidebar-show');
}else{
//收缩已展开
$(this).next('ul').slideUp(200);
//$('.nav-sidebar-item.nav-sidebar-show').removeClass('nav-sidebar-show');
$(this).parent('li').removeClass('nav-sidebar-show');
}
}
});
//menuNini
var bodyHiehgt = document.body.clientHeight - 50;
var bodyWidth = document.body.clientWidth;
$('.menuNini-btn svg').on('click',function(){
if ($('.menuNini-btn input[type="checkbox"]').prop("checked")) {
$('.nav-sidebar-item.nav-sidebar-show').removeClass('nav-sidebar-show');
$('.nav-container ul').removeAttr('style');
$('.scrollbarMenu').addClass('menuNini');
$('.scrollbarMenu').stop().animate({width : 60},200);
$('.rightView').addClass('viewNini');
$("#leftNavMenu").getNiceScroll().hide();
}else{
$('.scrollbarMenu').removeClass('menuNini');
$('.nav-container ul ul').css("display", "none");
$('.scrollbarMenu').stop().animate({width: 220},200);
$('.rightView').removeClass('viewNini');
$('.nav-scroll').niceScroll({
cursorcolor: "#ccc",//#CC0071 光标颜色
cursoropacitymax: 1, //改变不透明度非常光标处于活动状态（scrollabar“可见”状态），范围从1到0
touchbehavior: false, //使光标拖动滚动像在台式电脑触摸设备
cursorwidth: "5px", //像素光标的宽度
cursorborder: "0", // 游标边框css定义
cursorborderradius: "5px",//以像素为光标边界半径
autohidemode: false //是否隐藏滚动条
});
}
});
$(document).on('mouseover','.menuNini .nav-container ul:first>li',function(){
$(".nav-popup.third").hide();
$(".nav-popup.second").length == 0 && ($(".nav-container").append("<div class='second nav-popup nav-sidebar'><div></div></div>"));
$(".nav-popup.second>div").html($(this).html());
$(".nav-popup.second").show();
$(".nav-popup.third").hide();
var top = $(this).offset().top;
var d = $(window).height() - $(".nav-popup.second>div").height();
if(d - top <= 0 ){
top = d >= 0 ? d - 8 : 0;
}
$(".nav-popup.second").stop().animate({"top":top}, 100);
menuCk();
});
$(document).on('mouseover','.second.nav-popup.nav-sidebar > div > ul > li',function(){
if(!$(this).hasClass("nav-sidebar-item")){
$(".nav-popup.third").hide();
return;
}
$(".nav-popup.third").length == 0 && ($(".nav-container").append("<div class='third nav-popup nav-sidebar'><div></div></div>"));
$(".nav-popup.third>div").html($(this).html());
$(".nav-popup.third").show();
var top = $(this).offset().top;
var d = $(window).height() - $(".nav-popup.third").height();
if(d - top <= 0 ){
top = d >= 0 ? d - 8 : 0;
}
$(".nav-popup.third").stop().animate({"top":top}, 100);
});
$(document).on('mouseleave','.menuNini .nav-container ul:first, .menuNini .slimScrollBar,.second.nav-popup ,.third.nav-popup',function(){
$(".nav-popup.second").hide();
$(".nav-popup.third").hide();
});
$(document).on('mouseover','.menuNini .slimScrollBar,.second.nav-popup',function(){
$(".nav-popup.second").show();
});
$(document).on('mouseover','.third.nav-popup',function(){
$(".nav-popup.second").show();
$(".nav-popup.third").show();
});
$('.member').click(function(event){
if($(this).find('.mdown').is(':hidden')){
$(this).find('.mdown').show();
}else{
$(this).find('.mdown').hide();
}
event.stopPropagation();
});
$('body').click(function(){$(this).find('.mdown').hide();});
$('object').click(function(){$(this).find('.mdown').hide();});
$('.mdown').click(function(event){
event.stopPropagation();
});
$('.sysFontSet').click(function(event){
if($(this).find('.ftMdown').is(':hidden')){
$(this).find('.ftMdown').show();
}else{
$(this).find('.ftMdown').hide();
}
event.stopPropagation();
});
$('body').click(function(){$(this).find('.ftMdown').hide();});
$('object').click(function(){$(this).find('.ftMdown').hide();});
$('.ftMdown').click(function(event){
event.stopPropagation();
});
$('.navQuery').click(function(event){
if($(this).find('.inputq').is(':hidden')){
$(this).find('.inputq').show();
}else{
$(this).find('.inputq').hide();
}
event.stopPropagation();
});
$('body').click(function(){$(this).find('.inputq').hide(); });
$('object').click(function(){$(this).find('.inputq').hide(); });
$('.inputq').click(function(event){
event.stopPropagation();
});
$('#navTabs').niceScroll({
cursorcolor: "#ccc",//#CC0071 光标颜色
cursoropacitymax: 1, //改变不透明度非常光标处于活动状态（scrollabar“可见”状态），范围从1到0
touchbehavior: false, //使光标拖动滚动像在台式电脑触摸设备
cursorwidth: "5px", //像素光标的宽度
cursorborder: "0", // 游标边框css定义
cursorborderradius: "5px",//以像素为光标边界半径
autohidemode: false //是否隐藏滚动条
});
// 菜单结束
});
以上是核心代码，完整代码云盘下载地址
链接：https://pan.baidu.com/s/1j9x4VMUBjkwnL1gwQzSv6Q?pwd=ttv3
提取码：ttv3
下载地址二：下载
477
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
