easyUI 布局

来源：互联网发布：淘宝店商品下架上架编辑：程序博客网时间：2024/06/10 08:52

首先，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;        });    }

点击效果图