<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. orabbix 报错No suitable driver found for

     orabbix报错如下:   2018-07-11 14:35:20,119 [main] ERROR Orabbix - Error on Configurator for database qa ...

  2. 《JavaScript高级程序设计》笔记——第一章到第三章

    2019年,新年伊始,我打算好好重读一下<JavaScript高级程序设计>这本前端必备经典书.每天半小时. 以下内容摘自<JavaScript高级程序设计> 2019-2-1 ...

  3. (转)chrome浏览器收藏夹（书签）的导出与导入

    导出chrome浏览器的书签到一个文件中.首先选择chrome浏览器的书签管理器菜单.然后点击“整理”,然后选择“将书签导出到html文件”. 步骤阅读 2 将导出的html文件保存,用于下次导入,这 ...

  4. linux中的rootfs/initrd/ramfs/initramfs

    什么是ramfs?ramfs是空间规模动态变化的RAM文件系统.它非常简单,是用来实现Linux缓存机制(缓存page cache and dentry cache)的文件系统.通常情况下,Linux ...

  5. css3-11 如何实现2D动画

    css3-11 如何实现2D动画 一.总结 一句话总结:就是transform属性,属性值为1.translate()    2.rotate()    3.scale(),而这是哪个属性值是带参数的 ...

  6. SharedPreferences基础 分类： H1_ANDROID 2013-11-04 22:35 2559人阅读 评论(0) 收藏

    见归档项目:SharedPreferencesDemo.zip 1.对于数据量较小,且有明显的K-V形式的数据而言,适合用SharedPreferences保存.SharedPreferences的数 ...

  7. js进阶 11-19 jquery如何查找选择器的第一个父亲元素和第一个定位的父元素

    js进阶 11-19 jquery如何查找选择器的第一个父亲元素和第一个定位的父元素 一.总结 一句话总结:closest()方法获得匹配选择器的第一个祖先元素,从当前元素开始沿 DOM 树向上.of ...

  8. maven打包到本地库

    mvn install:install-file -DgroupId=com.alipay -DartifactId=com.alipay.core -Dversion=20180104135026 ...

  9. ChangeWindowMessageFilterEx 概述（用于取消低权限程序向高权限程序发送消息不成功的限制，分6个等级）

    ChangeWindowMessageFilterEx 函数,为指定窗口修改用户界面特权隔离 (UIPI) 消息过滤器. 函数原型: BOOL WINAPI ChangeWindowMessageFi ...

  10. android studio怎么添加.so文件?android studio加载so文件的方法

    android studio 中 添加.so 文件,Android Studio中添加.jar文件和.so文件无疑是一件很重要也是很头疼的问题! 1.在src/main中添加 jniLibs文件夹 , ...