easyui layout ,tabs

時間 2019-11-09
標籤 easyui layout tabs 简体版
原文原文鏈接
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" isELIgnored="false"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>首頁</title>
<!-- rel這個屬性必定要添加  -->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/js/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/js/easyui/themes/icon.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/js/easyui/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/easyui/locale/easyui-lang-zh_CN.js"></script>
<style type="text/css">
ul {
list-style:none;
}
 
  ul li a{
   text-decoration:none;
   
  }

</style>
</head>

 <script type="text/javascript">


  $(function(){
     
      $.post("${pageContext.request.contextPath}/menu/findAllMenus.htm",function(data){
         
        //初始化左側
          
              $("#nav").accordion({animate:false});//爲id爲nav的div增長手風琴效果，並去除動態滑動效果
              
              $.each(data.menus, function(i, n) {//$.each 遍歷
                 
                  var menulist ='';
                  menulist +='<ul>';
                  $.each(n.sonMenus, function(j, o) {
                      menulist += '<li><div><a ref="'+o.id+'" href="#" rel="' + o.url + '" ><span class="'+o.icon+'" >&nbsp;</span><span class="nav">' + o.name + '</span></a></div></li> ';
                  
                  })
                  menulist += '</ul>';

                  $('#nav').accordion('add', {
                      title: n.name,
                      content: menulist,
                      iconCls: '' + n.icon
                  });

              });

              $('.easyui-accordion li a').click(function(){//當單擊菜單某個選項時，在右邊出現對用的內容
                  var tabTitle = $(this).children('.nav').text();//獲取超鏈裏span中的內容做爲新打開tab的標題

                  var url = $(this).attr("rel");
                  var menuid = $(this).attr("ref");//獲取超連接屬性中ref中的內容
                  var icon = getIcon(menuid,icon);

                  addTab(tabTitle,url,icon);//增長tab
                  $('.easyui-accordion li div').removeClass("selected");
                  $(this).parent().addClass("selected");
              }).hover(function(){
                  $(this).parent().addClass("hover");
              },function(){
                  $(this).parent().removeClass("hover");
              });

              //選中第一個
              var panels = $('#nav').accordion('panels');
              var t = panels[0].panel('options').title;
              $('#nav').accordion('select', t);
         
          //獲取左側導航的圖標
          function getIcon(menuid){
              var icon = 'icon ';
              $.each(data.menus, function(i, n) {
                   $.each(n.sonMenus, function(j, o) {
                       if(o.id==menuid){
                          icon += o.icon;
                      }
                   })
              })

              return icon;
          }

          function addTab(subtitle,url,icon){
              if(!$('#tabs').tabs('exists',subtitle)){
                  $('#tabs').tabs('add',{
                      title:subtitle,
                      content:createFrame(url),
                      closable:true,
                      icon:icon
                  });
              }else{
                  $('#tabs').tabs('select',subtitle);
                  $('#mm-tabupdate').click();
              }
              tabClose();
          }

          function createFrame(url)
          {
              var s = '<iframe scrolling="auto" frameborder="0"  src="'+url+'" style="width:100%;height:100%;"></iframe>';
              return s;
          }

          function tabClose()
          {
              /*雙擊關閉TAB選項卡*/
              $(".tabs-inner").dblclick(function(){
                  var subtitle = $(this).children(".tabs-closable").text();
                  $('#tabs').tabs('close',subtitle);
              })
              /*爲選項卡綁定右鍵*/
              $(".tabs-inner").bind('contextmenu',function(e){
                  $('#mm').menu('show', {
                      left: e.pageX,
                      top: e.pageY
                  });

                  var subtitle =$(this).children(".tabs-closable").text();

                  $('#mm').data("currtab",subtitle);
                  $('#tabs').tabs('select',subtitle);
                  return false;
              });
          }
          //綁定右鍵菜單事件
          function tabCloseEven()
          {
              //刷新
              $('#mm-tabupdate').click(function(){
                  var currTab = $('#tabs').tabs('getSelected');
                  var url = $(currTab.panel('options').content).attr('src');
                  $('#tabs').tabs('update',{
                      tab:currTab,
                      options:{
                          content:createFrame(url)
                      }
                  })
              })
              //關閉當前
              $('#mm-tabclose').click(function(){
                  var currtab_title = $('#mm').data("currtab");
                  $('#tabs').tabs('close',currtab_title);
              })
              //所有關閉
              $('#mm-tabcloseall').click(function(){
                  $('.tabs-inner span').each(function(i,n){
                      var t = $(n).text();
                      $('#tabs').tabs('close',t);
                  });
              });
              //關閉除當前以外的TAB
              $('#mm-tabcloseother').click(function(){
                  $('#mm-tabcloseright').click();
                  $('#mm-tabcloseleft').click();
              });
              //關閉當前右側的TAB
              $('#mm-tabcloseright').click(function(){
                  var nextall = $('.tabs-selected').nextAll();
                  if(nextall.length==0){
                      //msgShow('系統提示','後邊沒有啦~~','error');
                      alert('後邊沒有啦~~');
                      return false;
                  }
                  nextall.each(function(i,n){
                      var t=$('a:eq(0) span',$(n)).text();
                      $('#tabs').tabs('close',t);
                  });
                  return false;
              });
              //關閉當前左側的TAB
              $('#mm-tabcloseleft').click(function(){
                  var prevall = $('.tabs-selected').prevAll();
                  if(prevall.length==0){
                      alert('到頭了，前邊沒有啦~~');
                      return false;
                  }
                  prevall.each(function(i,n){
                      var t=$('a:eq(0) span',$(n)).text();
                      $('#tabs').tabs('close',t);
                  });
                  return false;
              });

              //退出
              $("#mm-exit").click(function(){
                  $('#mm').menu('hide');
              })
          }

          //彈出信息窗口 title:標題 msgString:提示信息 msgType:信息類型 [error,info,question,warning]
          function msgShow(title, msgString, msgType) {
              $.messager.alert(title, msgString, msgType);
          }
      },"json");
    
      
  });
  

  
  

  
  
 
 </script>

 <body>
   <div id="cc" class="easyui-layout" style="width:*;height:600px">   
   <div region="north" split="true" border="false" style="overflow: hidden; height: 30px;
        background: url(images/layout-browser-hd-bg.gif) #7f99be repeat-x center 50%;
        line-height: 20px;color: #fff; font-family: Verdana, 微軟雅黑,黑體"> 
        
         <span style="padding-left:10px;float:left; font-size: 16px; "><img src="images/blocks.gif" width="20" height="20" />Xwolf後臺管理系統</span>
        
        <span style="float:right; padding-right:20px;" class="head">歡迎您,<c:if test="${ empty user.username}">遊客</c:if>
        <c:if test="${ not empty user.username}">${user.username}</c:if>
        
        <a href="javascript:void(0)" id="mb" class="easyui-menubutton"     
        data-options="menu:'#mm',iconCls:'icon-edit'">我的中心</a>   
      <div id="mm" style="width:150px;">   
    <div data-options="iconCls:'icon-redo'">修改密碼</div>   
    <div class="menu-sep"></div>   
    <div data-options="iconCls:'icon-undo'">安全退出</div>   
      
</div>  
 
    </div> 
        
    <div data-options="region:'south'" style="height:40px;text-align:center">
      <span style="font-size:16px;line-height:40px;"><b>snowxwolf@sina.cn &copy;全部</b>   <span><b></b>QQ:2324808561</span></span> 
    </div>   
    <div data-options="region:'east',title:'其餘',split:true" style="width:187px;">
    <!-- 日曆 -->
    <div  class="easyui-calendar">
    </div>  
    <!-- 友情連接,動態實現 -->
   
    
    </div>   
    <div data-options="region:'west',title:'導航菜單',split:true" style="width:160px;">
    
     <!-- 動態生成菜單項  -->
     
     <div id="nav" class="easyui-accordion" >
     
     </div>
    
    </div>   
    <div data-options="region:'center'" style="padding:0px;background:#eee;">
     <div id="tabs" class="easyui-tabs" fit="true">   
    <div title="歡迎光臨Xwolf後臺管理系統" style="text-align:center;">   
      <span style="color:red;font-size:20px;"> Xwlof是一個集合和J2SE/J2EE相關的技術網站,在這裏盡情的遨遊在知識的海洋吧!</span>
    </div>   
    
</div>  
     
    </div>   
</div>  

</body>
</html>
1. easyui tree tabs
2. easyui-tabs
3. Easyui tabs學習
4. easyui 框架Layout插件
5. easyui系列之佈局Layout,Panel,Accordion,Tabs（1）
6. EasyUI之Layout佈局和Tabs頁籤的使用
7. EasyUI入門（LinkButton，Tabs）
8. easyui Full Layout
9. jQuery EasyUI中的Layout佈局
10. layout
更多相關文章...
• XSL-FO layout-master-set 對象 - XSL-FO 教程
• ionic tab(選項卡) - ionic 教程
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。