关于easyui-accordion的添加以及显示隐藏菜单的使用

最新推荐文章于 2019-06-17 23:20:29 发布

diaobianpan6784

最新推荐文章于 2019-06-17 23:20:29 发布

阅读量360

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/ToFlying/p/3511605.html

本文介绍如何使用EasyUI框架实现左侧菜单栏与顶部Tab页的集成，通过JavaScript动态生成菜单并链接到相应的Tab页面，提升用户在报表查询系统中的操作体验。

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

<script type="text/javascript">
   
   $(function()
   {
         leftMenus();
   });
   
   function leftMenus()
   {
       var _menus=<%=jsonStr %>;
         //$(".easyui-accordion").empty();
         $.each(_menus.menus, function(i, n) {
              $(".easyui-accordion").accordion('add',
                {
                   title: n.text,
                   content:moduleIndex(n.menus)
             });
        });
        $(".easyui-accordion").accordion();
                $('.easyui-accordion li a').click(function()
                {
                    var tabTitle = $(this).text();
                    var url = $(this).attr("href");
                    //alert(url);
                    addTab(tabTitle,url);
                    $('.easyui-accordion li div').removeClass("selected");
                    $(this).parent().addClass("selected");
               }).hover(function()
               {
                    $(this).parent().addClass("hover");
               },function()
               {
                    $(this).parent().removeClass("hover");
               });   
   }
   
   function addTab(subtitle,url){
    if(!$('#tabs').tabs('exists',subtitle)){
        $('#tabs').tabs('add',{
            title:subtitle,
            content:createFrame(url),
            closable:true,
            width:$('#mainPanle').width()-10,
            height:$('#mainPanle').height()-26
        });
    }else{
        $('#tabs').tabs('select',subtitle);
    }
    //tabClose();
}

    function createFrame(url)
    {
        var s = '<iframe name="mainFrame" scrolling="auto" frameborder="0"  src="'+url+'" style="width:100%;height:100%;"></iframe>';
        return s;
    }
    
   function moduleIndex(menusData)
   {
      var text="";
      text += '<ul>';
      $.each(menusData,function(j,o)
      {
          text += '<li><div ><a target="mainFrame" href="'+o.attributes+'" >' + o.text + '</a></div></li> ';
      });
      text += '</ul>';
      return text;
   }
    </script>

<body id="cc" class="easyui-layout">
    <div data-options="region:'west',split:true" title="导航菜单" style="width: 200px;">
        <div class="easyui-accordion" data-options="fit:true,border:false">
        
        </div>
    </div>
    <div id="mainPanle" data-options="region:'center'">
     <div id="tabs" class="easyui-tabs"  fit="true" border="false" >
            <div title="欢迎使用" style="padding:20px;overflow:hidden;" id="home">
                
            <h1>欢迎您使用，报表在线查询系统</h1>

            </div>
        </div>
    </div>
</body>