jquery 的排版布局，以及初始化树形菜单

猪↘專屬|华

浏览: 164064 次
性别:
来自: 深圳

最近访客更多访客>>

wyx065747

zhfpoet

冷月宫主

zjy_369

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

jQuery json JavaScript Ajax HTML

上代码：

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/common/include.jspf"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src='js/jquery.outlook.js'></script>
<script type="text/javascript">
$(function(){
  $.ajax({
   data:{
    "id":'0'
   },
   url: Liyong.base+'/system/menu/initInfoMenu.so',
   type:'post',
   dataType:"json",
   success:function(data){
    if(data.success) {
     if (data.json)
     $(data.json).each(function (index, data) {
      $('#west_accordion').accordion('add',{
       title:data.text,
       iconCls:'icon-menu',
       content:'<div style="overflow:auto;width:100%;height:100%;">'+
          '<ul id="'+data.id+'" class="jquery-tree"></ul>'+
             '</div>'
      });
      $('#'+data.id).tree("loadData",data.children).tree({
       onClick:function(node){
        if (node.attributes.url)
         addTab(Liyong.base+node.attributes.url, node.text);
       }
      });
     });
    } else {
     $.messager.show({
      icon:'error',
      msg:data.err,
      title:'错误信息'
     });
    }
   }
  });

  function tabClose()
  {
   /*双击关闭TAB选项卡*/
   $(".tabs-inner").dblclick(function(){
    var subtitle = $(this).children("span").text();
    $('#tabs').tabs('close',subtitle);
   });

   $(".tabs-inner").bind('contextmenu',function(e){
    $('#mm').menu('show', {
     left: e.pageX,
     top: e.pageY
    });

    var subtitle =$(this).children("span").text();
    $('#mm').data("currtab",subtitle);

    return false;
   });
  }
  //绑定右键菜单事件
  //关闭当前
  $('#mm-tabclose').click(function(){
   var currtab_title = $('#mm').data("currtab");
   $('#center_panel').tabs('close',currtab_title);
  });
  //全部关闭
  $('#mm-tabcloseall').click(function(){
   $('.tabs-inner span').each(function(i,n){
    var t = $(n).text();
    $('#center_panel').tabs('close',t);
   });
  });
  //关闭除当前之外的TAB
  $('#mm-tabcloseother').click(function(){
   var currtab_title = $('#mm').data("currtab");
   $('.tabs-inner span').each(function(i,n){
    var t = $(n).text();
    if(t!=currtab_title)
     $('#center_panel').tabs('close',t);
   });
  });
  //关闭当前右侧的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();
    $('#center_panel').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();
    $('#center_panel').tabs('close',t);
   });
   return false;
  });

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

});
</script>
</head>
<body class="jquery-layout">
<noscript><div style=" position:absolute; z-index:100000; height:2046px;top:0px;left:0px; width:100%; background:white; text-align:center;">
     <img src='<c:url value="/common/themes/icons/noscript.gif" />' />
</div></noscript>

<div region="north" style="height:60px;padding:10px;">north region</div>
<div region="west" title="<img src='<c:url value="/common/themes/icons/tree.gif" />' style='vertical-align:text-bottom;'>${session.bus_name}导航菜单" split="true" style="width:250px;">
  <div id="west_accordion" class="jquery-accordion" fit="true" border="false"></div>
</div>
<div region="center">
  <div id="center_panel" class="jquery-tabs" fit="true" border="false">
   
  </div>
</div>

<div id="mm" class="jquery-menu" style="width:150px;">
  <div id="mm-tabclose">关闭</div>
  <div id="mm-tabcloseall">全部关闭</div>
  <div id="mm-tabcloseother">除此之外全部关闭</div>
  <div class="menu-sep"></div>
  <div id="mm-tabcloseright">当前页右侧全部关闭</div>
  <div id="mm-tabcloseleft">当前页左侧全部关闭</div>
  <div class="menu-sep"></div>
  <div id="mm-exit">退出</div>
</div>
</body>
</html>