<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. 【Codeforces Round #442 (Div. 2) A】Alex and broken contest

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 注意是所有的名字里面,只出现了其中某一个名字一次. [代码] #include <bits/stdc++.h> usin ...

  2. Iceberg使用

    Iceberg是Mac下比較好用的pkg生成工具. 在files中选择你想要存放(自己文件的目录),生成pkg后目录就会存储在设置的那个目录下. 点击scripts选择pkg安装各个阶段所要运行脚本路 ...

  3. Android java取得实时上周的时间

    import java.text.SimpleDateFormat; import java.util.Calendar; import java.util.Date; public class Te ...

  4. linux 内核源代码目录结构

    /arch:目录包括了所有和体系结构相关的核心代码.它下面的每一个子目录都代表一种Linux支持的体系结构,例如i386就是Intel CPU及与之相兼容体系结构的子目录.PC机一般都基于此目录. / ...

  5. 从零开始使用git第三篇：git撤销操作、分支操作和常见冲突

    从零开始使用git 第三篇:git撤销操作.分支操作和常见冲突 第一篇:从零开始使用git第一篇:下载安装配置 第二篇:从零开始使用git第二篇:git实践操作 第三篇:从零开始使用git第三篇:gi ...

  6. 11.2 Android显示系统框架_android源码禁用hwc和GPU

    2. 修改tiny4412_Android源码禁用hwc和gpu(厂家不会提供hwc和gpu的源代码,没有源代码就没法分析了,因此在这里禁用该功能并用软件库实现)最终源码: git clone htt ...

  7. shiro简单配置（转）

    注:这里只介绍spring配置模式. 因为官方例子虽然中有更加简洁的ini配置形式,但是使用ini配置无法与spring整合.而且两种配置方法一样,只是格式不一样. 涉及的jar包 Jar包名称 版本 ...

  8. php实现兼容Unicode文字的字符串大写和小写转换strtolower()和strtoupper()

    前言 网上流传着这么一个腾讯笔试题: PHP的strtolower()和strtoupper()函数在安装非中文系统的server下可能会导致将汉字转换为乱码,请写两个替代的函数实现兼容Unicode ...

  9. [spark]Spark Streaming教程

      (一)官方入门示例 废话不说,先来个示例,有个感性认识再介绍. 这个示例来自spark自带的example,基本步骤如下: (1)使用以下命令输入流消息: $ nc -lk 9999 (2)在一个 ...

  10. ZOJ-1649 Rescue BFS (HDU 1242)

    看题传送门: ZOJ http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=1649 HDU http://acm.hdu.edu. ...