1.动态生成tabs
//左侧菜单数据请求
function managerMenu(){
$.ajax({
type:"GET",
url:'js/data.json',
dataTtype:"json",
async:true,
cache:false,
contentType:"application/json",
success:function(data){
if(!data){return ;}
//debugger
var result = data.data;
leftManagerMenu(result);
//console.log(123)
}
})
}
//生成左侧菜单
function leftManagerMenu(result){
// console.log(result);
var statu = 0;
var menus = [];
//var icons=new Array('glyphicon glyphicon-th-list','glyphicon glyphicon-list-alt','icon-bubbles2');
for(var i=0;i<result.length;i++){
menus.push({id:result[i].id,fid:result[i].fid,status:statu});
}
//debugger
for(var i=0;i<menus.length;i++){ //循环出一级菜单
var html='';
if(menus[i].fid==0 && menus[i].status==0){
//一级菜单
var title=result[i].menu_Name;
var did=result[i].id;
html+='<div title="'+ result[i].menu_Name+'" style=" " id="#nav'+result[i].id+'"><ul class="tree">';
menus[i].status=1;
for(var j=0;j<menus.length;j++){ //循环出二级菜单
if(menus[j].fid ==menus[i].id && menus[j].status==0){
//console.log(result[j]);
html+='<li οnmοuseοver="menusTypeStyle()"><span><a id="#nav'+result[j].id+'" οnclick=\'addTab("'+result[j].menu_Name+'","'+result[j].the_url+'")\' >'+result[j].menu_Name+'</a><span></li>'; //二级菜单
menus[j].status=1;
// for(var k=0;k<menus.length;k++){ //循环出三级菜单
// if(menus[k].fid==menus[j].id && menus[k].status==0){
// html+='<li><a οnclick=\'addTab("'+result[k].menu_Name+'","'+result[k].the_url+'")\' class="nav_3" >'+result[k].menu_Name+'</a></li>'; //三级菜单
// menus[k].status=1;
// }
// } //οnclick="addTab('1',"2")"
// html+='</ul></li>';
}
}
html+='</ul></div>';
$("#aa").accordion("add",{
title: title,
content: html,
selected: false
})
}
}
}
//添加选项
function addTab(subtitle, url) {
var tabLen =$(".tabs li").length;
if(tabLen<9){
if (!$('#tabs').tabs('exists', subtitle) ) {
$('#tabs').tabs('add', {
title: subtitle,//标题
content: createFrame(url),
closable: true
});
var li = $(".tabs-wrap ul li:last-child");
$("#close").remove();
li.after("<li id='close'><a class='tabs-inner' href='javascript:void()' onClick='javascript:closeAll()' style='height: 27px; line-height: 33px;''><span>关闭全部</span></a></li>");
} else {
$('#tabs').tabs('select', subtitle);
}
}else{
alert("请先关闭部分选项卡");
}
}
function createFrame(url) {
var s = '<iframe name="mainFrame" scrolling="true" frameborder="0" src="' + url + '" οnlοad="this.height=this.contentWindow.document.documentElement.scrollHeight" style="width:100%;height:100%;"></iframe>';
return s;
}true
function closeAll() {
$(".tabs li").each(function(index, obj) {
//获取所有可关闭的选项卡
var tab = $(".tabs-closable", this).text();
$(".easyui-tabs").tabs('close', tab);
});
$("#close").remove();//同时把此按钮关闭
}
2.easyui布局
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>测试首页</title>
<link rel="stylesheet" type="text/css" href="css/easyui.css">
<link rel="stylesheet" type="text/css" href="css/icon.css">
<link href="../css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="css/index.css" rel="stylesheet" type="text/css" />
</head>
<style>
</style>
<body class="easyui-layout container-fluid" fit="true" style="min-width:1300px;overflow：auto;">
<div region="north" class="row top-bg" border="true" style=" height: 120px;padding:0px;margin:0px; display:table-cell; vertical-align:middle;">
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2" style="display:inline-block;"> </div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> </div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4" style="display:inline-block;">
<ul class="nav navbar-nav header-right" style="display:block;">
<li class="dropdown ">
<span><img src = "css/icons/man.png"></span>
<span>橙橙czp</span>
<i class ="dropdown-toggle setting" data-toggle="dropdown" >
</i>
<ul role="menu" class="dropdown-menu" style="position:absolute;z-index:999999 !important;">
<li><a href="#" οnclick="addTab('个人资料', '../jichixingxi/jibenziliao.html')"><i class="glyphicon glyphicon-user" style="color:#3175dd;margin-right:5px;"></i>个人资料</a></li>
<li class="divider"></li>
<li><a href="#"><i class="glyphicon glyphicon-random" style="color:#3175dd;margin-right:5px;"></i>切换用户</a></li>
</ul>
</li>
<li><span class="navLine1"><img src="css/images/jianbian.png"</span> </li>
<li>
<span class="message"></span>
</li>
<li><span class="navLine2"><img src="css/images/jianbian.png"</span> </li>
<li>
<span class = "navClose" οnclick="logOut()"></span>
</li>
</ul>
</div>
</div> <!--top end-->
<div region="west" split="true" title="操作导航" class="col-lg-2 col-md-2 col-sm-2 col-xs-2" style="max-width: 210px;">
<div id="aa" class="easyui-accordion " style="position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px;background-color:#ecf5fc !important">
</div>
</div> <!--left end-->
<div id="mainPanle" region="center" class="col-lg-10 col-md-10 col-sm-10 col-xs-10" style="overflow：hidden;padding:0px;">
<div id="tabs" class="easyui-tabs " fit="true" border="false" style="min-width:1100px">
<div title="首页" style="padding: 20px; overflow: hidden;" id="home" closable='true'
>
<!-- div style="padding: 20px; overflow: hidden;" id="home"> -->
<h1>Welcome to jQuery UI!</h1>
</div>
</div>
</div><!--center end-->
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/bootstrap.min.js"></script>
<script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
2483
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
