easyui树菜单改手风琴

		原来: <ul id="tt"></ul>
        现在:<ul id="RightAccordion" class="easyui-accordion"  style="background: #E3F1FF">
原:
     $(function() {
            $("#tt").tree({
               url:'/menu/loginUserMenus?id=<shiro:principal property="id" />',
                onLoadSuccess: function (node, data) {
                    $('#tt .tree-icon').css("background", "url(/jquery-easyui-1.5/themes/icons/mini_add.png) " +
                        "no-repeat center center");
                },
                //事件属性  匿名函数
                onClick: function(node) {
                    //如果node对象的children不为null并且数组长度大于0,就表示当前菜单是父级菜单,反之就是最终子菜单
                    if(!node.children || node.children.length == 0){
                        //链接一个地址,打开一个页面,利用Tab标签页
                        addTab(node.text, node.url);
                    }else{
                        //如果是父级菜单,当前是展开状态就把它收起来,如果是收起状态就把它展开
                        if(node.state == "open"){
                            $("#tt").tree("collapse", node.target);
                        }else{
                            $("#tt").tree("expand", node.target);
                        }
                    }
                }
            });
        });
现:
          <script>
                $(function(){
                    jQuery("#RightAccordion").accordion({ //初始化accordion
                        fillSpace:true,
                        background:"#E3F1FF",
                        fit:true,
                        border:false,
                        animate:false
                    });
                    $.post("/menu/loginUserMenus?id=<shiro:principal property="id" />", { "id": "0" }, //获取第一层目录
                        function (data) {
                            if (data == "0") {
                                window.location = "/Account";
                            }
                            $.each(data, function (i, e) {//循环创建手风琴的项
                                var id = e.id;
                                $('#RightAccordion').accordion('add', {
                                    title: e.text,
                                    content: "<ul id='tree"+id+"' ></ul>",
                                    selected: true,
                                    iconCls:"icon-mini-add"//e.Icon
                                });
                                $.parser.parse();
                                $.post("/menu/loginUserMenuTree?id=<shiro:principal property="id" />"+"&id2="+id,  function(data) {//循环创建树的项
                                    $("#tree" + id).tree({
                                        data: data,
                                        onBeforeExpand:function(node,param){
                                            $("#tree" + id).tree('options').url = "/menu/loginUserMenus?id=<shiro:principal property="id" />" + node.id;
                                        },
                                        onLoadSuccess: function (node, data) {
                                            $('#RightAccordion .tree-icon').css("background", "url(/jquery-easyui-1.5/themes/icons/treenew2.png) no-repeat center center");
                                        },
                                        onClick: function(node) {
                                            //如果node对象的children不为null并且数组长度大于0,就表示当前菜单是父级菜单,反之就是最终子菜单
                                            if(!node.children || node.children.length == 0){
                                                //链接一个地址,打开一个页面,利用Tab标签页
                                                addTab(node.text, node.url);
                                            }else{
                                                //如果是父级菜单,当前是展开状态就把它收起来,如果是收起状态就把它展开
                                                if(node.state == "open"){
                                                    $("#RightAccordion").tree("collapse", node.target);
                                                }else{
                                                    $("#RightAccordion").tree("expand", node.target);
                                                }
                                            }
                                        }
                                    });
                                }, 'json');
                            });
                        }, "json");
                });
                /*添加Tab标签页*/
                function addTab(title, url){
                    var exists = $("#tabs").tabs("exists", title);
                    if(exists){
                        //如果该Tab标签页存在,就选中它,并且刷新它
                        $("#tabs").tabs("select", title);
                        //获取选中的面板对象[如果id选择器错误,将会报一个很难查找的错误]
                        var tab = $('#tabs').tabs('getSelected');
                        //刷新它
                        $('#tabs').tabs('update', {
                            tab: tab,
                            options: {}
                        });
                    }else{
                        //如果该Tab标签页不存在,就添加
                        $("#tabs").tabs("add",{
                            title: title,
                            fit:true,
                            selected:true,	//添加当前Tab标签页之后立即选中当前标签页
                            closable:true,	//显示关闭按钮
                            content:'<iframe src="'+url+'" scrolling="auto" frameborder="0" framespacing="0" width="99%" height="99%"></iframe>'
                        });
                    }
                }
            </script>

再介绍一下更改手风琴颜色

原本颜色
在这里插入图片描述

 <style type="text/css">
        .accordion .accordion-header{
            background:#E3F1FF; //头部样式
        }

        .accordion .accordion-header .panel-title{
            font-weight:normal;
        }
        .accordion .accordion-header-selected .panel-title{
            background:#3b5998;
            font-weight:bold;
        }
        .accordion-noborder .accordion-header{
            border-width:0 0 1px;
        }
        .accordion-noborder .accordion-body{
            background:#E3F1FF;
            color: #a99b9b;
            border-width:0px;
        }

    </style>

改变颜色后
在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值