树的学习

最新推荐文章于 2021-06-04 00:09:11 发布

wa334278063

最新推荐文章于 2021-06-04 00:09:11 发布

阅读量1k

点赞数

本文链接：https://blog.csdn.net/wa334278063/article/details/8778948

版权

<html>
<head>
<title>布局</title>
   <link href="js/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />
  <script src="js/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
  <script src="js/ligerUI/js/ligerui.min.js" type="text/javascript"></script>
  <script src="js/ligerUI/js/plugins/ligerTextBox.js" type="text/javascript"></script>
  <script src="js/indexdata.js" type="text/javascript"></script>
     <script type="text/javascript">
            var tab = null;//定义一个tab
            var accordion = null;//定义一个accordion
            var tree = null;//定义一个tree
       $(function () {
          //布局
                $("#layout1").ligerLayout({ leftWidth: 190, height: '100%',heightDiff:-34,space:4, onHeightChanged: f_heightChanged });
                var height = $(".l-layout-center").height();
            //Tab
                $("#framecenter").ligerTab({ height: height });
                    //面板
                $("#accordion1").ligerAccordion({ height: height - 24, speed: null });

                $(".l-link").hover(function ()
                {
                    $(this).addClass("l-link-over");
                }, function ()
                {
                    $(this).removeClass("l-link-over");
                });
                //树
                $("#tree1").ligerTree({
                    data : indexdata,//调用indexdata的初始化数据--设置一个本地数据data用于加载数据
                    checkbox: false,//是否显示复选框
                    slide: false,//是否以动画的形式显示(展开/收缩节点)
                    nodeWidth: 120,//节点的宽度
                    attribute: ['nodename', 'url'],//[id,url] 属性,获取行数据时很有作用,获取数据时是{Array}类型
                    onSelect: function (node)//onSelect 选择事件
                    {
                        if (!node.data.url) return;
                        var tabid = $(node.target).attr("tabid");//target --将jquery对象转成一个窗口；获取一个对象的属性tabid的值
                        if (!tabid)
                        {
                            tabid = new Date().getTime();//用当前获得的时间来作为tabid
                            $(node.target).attr("tabid", tabid)//给$(node.target)对象一个属性加值
                        }
                        f_addTab(tabid, node.data.text, node.data.url);//调用下面的方法大
                    }
                });
                tab = $("#framecenter").ligerGetTabManager();//html对象转成ligerui-tab对象
                accordion = $("#accordion1").ligerGetAccordionManager();//html对象转成ligerui-accordion对象
                tree = $("#tree1").ligerGetTreeManager();//html对象转成ligerui-tree对象
                $("#pageloading").hide();
            });
            function f_heightChanged(options)
            {//限制tab的高度宽度的一个方法
                if (tab)
                    tab.addHeight(options.diff);//增加或缩小Tab内容区域的高度差
                if (accordion && options.middleHeight - 24 > 0)
                    accordion.setHeight(options.middleHeight - 24);
            }

            function f_addTab(tabid,text, url)//增加一个tab ,对象id、tabtext、传入整个参数时，将根据这个url创建一个iframe，并显示出来
            {
                tab.addTabItem({ tabid : tabid,text: text, url: url });
            }

</script>
<style type="text/css">
    body,html{height:100%;}
    body{ padding:0px; margin:0;   overflow:hidden;}
    .l-link{ display:block; height:26px; line-height:26px; padding-left:10px; text-decoration:underline; color:#333;}
    .l-link2{text-decoration:underline; color:white; margin-left:2px;margin-right:2px;}
    .l-layout-top{background:#102A49; color:White;}
    .l-layout-bottom{ background:#E5EDEF; text-align:center;}
    #pageloading{position:absolute; left:0px; top:0px; background:white url('loading.gif') no-repeat center; width:100%; height:100%;z-index:99999;}
    .l-link{ display:block; line-height:22px; height:22px; padding-left:16px;border:1px solid white; margin:4px;}
    .l-link-over{ background:#FFEEAC; border:1px solid #DB9F00;}
    .l-winbar{ background:#2B5A76; height:30px; position:absolute; left:0px; bottom:0px; width:100%; z-index:99999;}
    .space{ color:#E7E7E7;}
    /* 顶部 */
    .l-topmenu{ margin:0; padding:0; height:31px; line-height:31px; background:url('images/top.jpg') repeat-x bottom; position:relative; border-top:1px solid #1D438B; }
    .l-topmenu-logo{ color:#E7E7E7; padding-left:35px; line-height:26px;background:url('images/topicon.gif') no-repeat 10px 5px;}
    .l-topmenu-welcome{ position:absolute; height:24px; line-height:24px; right:30px; top:2px;color:#070A0C;}
    .l-topmenu-welcome a{ color:#E7E7E7; text-decoration:underline}

</style>
</head>
<body style="padding:0px;background:#EAEEF5;">
<div id="pageloading"></div>
<div id="topmenu" class="l-topmenu">
    <div class="l-topmenu-logo">jQuery ligerUI</div>

</div>
<div id="layout1" style="width:99.2%; margin:0 auto; margin-top:4px; ">
        <div position="left" title="主要菜单" id="accordion1">
                     <div title="功能列表" class="l-scroll">
                         <ul id="tree1" style="margin-top:3px;">
                    </div>

        </div>
        <div position="center" id="framecenter">
            <div tabid="home" title="我的主页" style="height:300px" >
                <iframe frameborder="0" name="home" id="home" src="indext.html"></iframe>
            </div>
        </div>

    </div>
    <div style="height:32px; line-height:32px; text-align:center;">
            Copyright © 2011-2012 www.ligerui.com
    </div>
    <div style="display:none"></div>
</body>
</html>