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

上代码:

<%@ 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 addTab(url,tabTitle){
   if(!$('#center_panel').tabs('exists', tabTitle)) {
    $('#center_panel').tabs('add',{
     title:tabTitle,
     content:createFrame(url),
     iconCls:'icon-save',
     closable:true
    });
    tabClose();
   }else{
    $('#center_panel').tabs('select', tabTitle);
   }
  };
  
  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("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>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
您好!要创建一个基于 jQuery树形菜单,可以按照以下步骤进行操作: 1. 首先,确保您已引入了 jQuery 库。可以从 jQuery 官方网站下载最新版本的 jQuery,并在 HTML 文件中引入它,例如: ```html <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> ``` 2. 在 HTML 中创建一个容器元素,用于承载树形菜单的结构。例如: ```html <div id="tree-menu"></div> ``` 3. 使用 JavaScript/jQuery 编写代码来生成树形菜单的结构和行为。这里我们将使用递归函数来循环遍历菜单数据,并生成相应的 HTML 结构。以下是一个简单的示例: ```javascript // 菜单数据 var menuData = [ { label: '菜单项1', children: [ { label: '子菜单项1' }, { label: '子菜单项2' } ] }, { label: '菜单项2', children: [ { label: '子菜单项3' }, { label: '子菜单项4', children: [ { label: '子子菜单项1' }, { label: '子子菜单项2' } ] } ] } ]; // 递归生成树形菜单的函数 function generateTreeMenu(parentElement, data) { var ul = $('<ul>'); // 创建一个 ul 元素 data.forEach(function(item) { var li = $('<li>').text(item.label); // 创建一个 li 元素,并设置文本内容 if (item.children && item.children.length > 0) { generateTreeMenu(li, item.children); // 如果有子菜单,则递归生成子菜单 } ul.append(li); // 将 li 添加到 ul 中 }); parentElement.append(ul); // 将 ul 添加到父元素中 } // 调用函数生成树形菜单 generateTreeMenu($('#tree-menu'), menuData); ``` 以上代码会根据 `menuData` 数据生成一个嵌套列表结构,形成树形菜单。 您可以根据自己的需求修改数据和样式,使其适应您的项目。希望对您有帮助!如果您有任何问题,请随时提问。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值