easyUI 布局加tabs

来源：互联网发布：java 多个泛型编辑：程序博客网时间：2024/06/04 18:53

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 ;}//debuggervar 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;}truefunction 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>

阅读全文

0 0