easyUI 布局

先来看下本次的效果图

好了，要做到这个效果

1.引入easyUI的依赖js和css、img文件

2.搭个上下左右布局的架子

3.利用easyUI的可伸缩面板控件和树型控件结合。

html代码

<div region="west" title="导航菜单" id="leftDiv" split="true">
		<div class="easyui-accordion">
			<div title="博文管理" iconcls="icon-save">
				<ul class="easyui-tree">
					<li>
						<span>Folder</span>
						
						<ul>
							<li>
								<span>Sub Folder 1</span>
								
								<ul>
									<li>
										<span><a target="mainFrame" href="https://www.baidu.com">审核博客</a></span>
									</li>
									<li>
										<span><a href="#">File 12</a></span>
									</li>
									<li>
										<span><a href="#">File 13</a></span>
									</li>
								</ul>
							</li>
							<li>
                                <span>File 2</span>
                                <ul>
                                	<li><a target="mainFrame" href="https://www.baidu.com">File 2  001</a></li>
                                	<li>File 2  002</li>
                                </ul>
                            </li>
                            <li>
                                <span>File 3</span>
                            </li>
						</ul>
					</li>
				</ul>
			</div>
			<div title="新闻管理" iconcls="icon-reload">
				<ul class="easyui-tree">
					<li>新闻管理1</li>
					<li>新闻管理2</li>
					<li>新闻管理3</li>
				</ul>
			</div>
			<div title="资源管理" iconcls="icon-reload">
				
			</div>
		</div>
	</div>

对应的js代码

$('.easyui-accordion li a').click(function () {
        var tabTitle = $(this).text();
        var url = $(this).attr("href");
        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 tabClose() {
        /*双击关闭TAB选项卡*/
        $(".tabs-inner").dblclick(function () {
            var subtitle = $(this).children("span").text();
            $('#tabs').tabs('close', subtitle);
        })

        $(".tabs-inner").bind('contextmenu', function (e) {
            $('#mm').menu('show', {
                left: e.pageX,
                top: e.pageY,
            });
            var subtitle = $(this).children("span").text();
            $('#mm').data("currtab", subtitle);
            return false;
        });
    }

点击效果图