easyUI 布局加tabs

最新推荐文章于 2023-05-17 11:41:33 发布

原创最新推荐文章于 2023-05-17 11:41:33 发布 · 426 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#easyui

js 专栏收录该内容

16 篇文章

订阅专栏

本文介绍了一个使用EasyUI实现的网页布局案例，其中包括顶部导航栏、左侧动态生成的菜单以及中心区域的Tabs页。通过JavaScript实现了左侧菜单的数据加载与动态生成，以及Tabs页的添加与管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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 onmouseover="menusTypeStyle()"><span><a id="#nav'+result[j].id+'"  onclick=\'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 onclick=\'addTab("'+result[k].menu_Name+'","'+result[k].the_url+'")\' class="nav_3" >'+result[k].menu_Name+'</a></li>'; //三级菜单
               	      	// 	menus[k].status=1;
               	      	// }
               	     // }                          //onclick="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 + '"  onload="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="#" onclick="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" onclick="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>