jQ UI 后台管理系统基础UI

jQ UI 后台管理系统基础UI
- 基础页面![在这里插入图片描述](https://img-blog.csdnimg.cn/44464b1228d740779a3cdfadeca60726.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5b-D54G155qE5Yi26YCg5ZWG,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)
- 核心代码

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">&times;</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到0touchbehavior: 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到0touchbehavior: 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');}}});//menuNinivar 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到0touchbehavior: 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到0touchbehavior: false, //使光标拖动滚动像在台式电脑触摸设备cursorwidth: "5px", //像素光标的宽度cursorborder: "0", //   游标边框css定义cursorborderradius: "5px",//以像素为光标边界半径autohidemode: false //是否隐藏滚动条});// 菜单结束
});