<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>

展示效果图片：

关于easyui-accordion的添加以及显示隐藏菜单的使用的更多相关文章

  1. 可以兼容ie6的纯CSS三级鼠标悬停显示/隐藏菜单实现

    本来在chrome上用js写的好好的三级显隐菜单,放到ie6上一测试竟然奇葩般的会瞎闪.问题原因至今没参透,可能是我每次响应事件的处理代码过长??总之我是对ie6幻灭了,去网上搜一搜能支持ie6的下拉 ...

  2. Android上实现各种风格的隐藏菜单,比如左右滑动菜单、上下滑动显示隐藏菜单

    Android上的菜单展示风格目前是各式各样的,但用的最多且体验最好的莫过于左右滑动来显示隐藏的菜单本示例实现了各种方式的菜单展示效果,只有你想不到的源码:https://github.com/Sim ...

  3. WinForm实现类似QQ停靠，显示隐藏过程添加特效效果

    原文:WinForm实现类似QQ停靠,显示隐藏过程添加特效效果 这可能是个老题长谈的问题了,只是在项目中会用到这个效果,所以今天做个记录.大家见了别喷我.在项目中的需求是这样的. 打开程序,在屏幕的右 ...

  4. [Easyui - Grid]为easyui的datagrid、treegrid增加表头菜单，用于显示或隐藏列

    为easyui的datagrid.treegrid增加表头菜单,用于显示或隐藏列 /** * @author 孙宇 * * @requires jQuery,EasyUI * * 为datagrid. ...

  5. easyui datagrid里的toobar按钮隐藏、显示、禁用等方式的实现

    easyui datagrid里的toobar按钮隐藏.显示.禁用等方式的实现 //隐藏第一个按钮 $('div.datagrid-toolbar a').eq(0).hide(); //隐藏第一条分 ...

  6. winform学习（4）控件的添加、显示和隐藏

    窗体的添加.显示与隐藏 可以直接通过工具栏将某个控件直接拖动至UI界面(也可以在工具栏里双击某个控件) 也可以在代码里直接添加:窗体的标识.Controls.Add(控件标识符); Button my ...

  7. Easyui datagrid 显示隐藏列

    html:         <div style="float: left; width: 1450px; height:auto;  ">             & ...

  8. jq点击改变元素样式、添加类，显示隐藏，图标旋转，再次点击还原；表格点击显示下拉详情

    点击前 点击后 <tr> <td class="right" data-id="{$vo.id}" id="{$vo.id}&quo ...

  9. 布局-EasyUI Panel 面板、EasyUI Tabs 标签页/选项卡、EasyUI Accordion 折叠面板、EasyUI Layout 布局

    EasyUI Panel 面板 通过 $.fn.panel.defaults 重写默认的 defaults. 面板(panel)当做其他内容的容器使用.它是创建其他组件(比如:Layout 布局.Ta ...

随机推荐

  1. cordova android

    Image.png Image.png http://www.jscss.cc/2016/10/18/cordova.html 装一个全局的cordova: 官网介绍:http://cordova.a ...

  2. SpringMVC整合Shiro，Shiro是一个强大易用的Java安全框架,提供了认证、授权、加密和会话管理等功能

    SpringMVC整合Shiro,Shiro是一个强大易用的Java安全框架,提供了认证.授权.加密和会话管理等功能. 第一步:配置web.xml <!-- 配置Shiro过滤器,先让Shiro ...

  3. Qt开发程序在Windows 10应用须要管理员执行的解决思路

    Qt开发程序在Windows 10应用须要管理员执行的解决思路 过了非常长的时间没有公布博客了.可是我依旧努力地开发Qt程序.眼下呢.我发现开发Qt程序在Windows 10上有一个怪现象--有些程序 ...

  4. thinkphp事务机制

    thinkphp事务机制 一.总结 下面文章也要看,下面有抛出异常(自己提供错误信息那种) 1.事务机制(原子性):所有的事情都完成了就提交,否则回滚.电商里面用的多,付钱买东西的时候. 2.样例(简 ...

  5. windows SID

    显示SID whoami /user 修改SID C:\windows\system32\sysprep\sysprep.exe /generalize /oobe /reboot

  6. Nutch关于robot.txt的处理 分类： H3_NUTCH 2015-01-28 11:20 472人阅读 评论(0) 收藏

    在nutch中,默认情况下尊重robot.txt的配置,同时不提供配置项以忽略robot.txt. 以下是其中一个解释.即作为apache的一个开源项目,必须遵循某些规定,同时由于开放了源代码,可以简 ...

  7. java开发中序列化与反序列化起到的作用

    基本概念: 序列化是将对象状态转换为可保持或传输的格式的过程.与序列化相对的是反序列化,它将流转换为对象. 这两个过程结合起来,能够轻松地存储和数据传输. 特别在网络传输中,它的作用显得尤为重要.我们 ...

  8. 【25.64%】【codeforces 570E】Pig and Palindromes

    time limit per test4 seconds memory limit per test256 megabytes inputstandard input outputstandard o ...

  9. Android自定义组件系列【3】——自定义ViewGroup实现侧滑

    有关自定义ViewGroup的文章已经很多了,我为什么写这篇文章,对于初学者或者对自定义组件比较生疏的朋友虽然可以拿来主义的用了,但是要一步一步的实现和了解其中的过程和原理才能真真脱离别人的代码,举一 ...

  10. asp.net中，&lt;%#%&gt;,&lt;%=%&gt;和&lt;%%&gt;各自是什么意思，有什么差别

    在asp.net中经常出现包括这样的形式<%%>的html代码,总的来说包括以下这样几种格式: 一. <%%> 这样的格式实际上就是和asp的使用方法一样的,仅仅是asp中里面 ...