zoukankan html css js c++ java

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

<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,
            $('#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="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=" 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>

展示效果图片：

查看全文

相关阅读:
jsonp原理
 Mysql FUNCTION 示例
 数据库设计心得
 《杀死一只知更鸟》读后感
 《必然》读后感
 承接各种字牌算法
 关于麻将的算法构想
 十三水最优组合问题快速运算求解方案
 如何表示扑克牌?
如何比较牌大小?

原文地址：https://www.cnblogs.com/ToFlying/p/3511605.html