easyui layout+tab+tree实现网站基本布局

最新推荐文章于 2024-07-12 16:27:40 发布

cping927

最新推荐文章于 2024-07-12 16:27:40 发布

阅读量152

点赞数

分类专栏： web前端文章标签： javascript xhtml ui ViewUI

本文链接：https://blog.csdn.net/cping927/article/details/84695260

版权

web前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>LayOut</title>
    <script src="../jquery.min.js" type="text/javascript"></script>
    <script src="../jquery.easyui.min.js" type="text/javascript"></script>
    <link href="../themes/default/easyui.css" rel="stylesheet" type="text/css" />
    <link href="../themes/icon.css" rel="stylesheet" type="text/css" />
    <script language="JavaScript">
        $(document).ready(function () {
            //绑定右键菜单事件
            function tabCloseEven() {
                //关闭当前
                $('#mm-tabclose').click(function () {
                    var currtab_title = $('#mm').data("currtab");
                    $('#tabs').tabs('close', currtab_title);
                })
                //全部关闭
                $('#mm-tabcloseall').click(function () {
                    $('.tabs-inner span').each(function (i, n) {
                        var t = $(n).text();
                        $('#tabs').tabs('close', t);
                    });
                });
                //关闭除当前之外的TAB
                $('#mm-tabcloseother').click(function () {
                    var currtab_title = $('#mm').data("currtab");
                    $('.tabs-inner span').each(function (i, n) {
                        var t = $(n).text();
                        if (t != currtab_title)
                            $('#tabs').tabs('close', t);
                    });
                });
                //关闭当前右侧的TAB
                $('#mm-tabcloseright').click(function () {
                    var nextall = $('.tabs-selected').nextAll();
                    if (nextall.length == 0) {
                        //msgShow('系统提示','后边没有啦~~','error');
                        alert('后边没有啦~~');
                        return false;
                    }
                    nextall.each(function (i, n) {
                        var t = $('a:eq(0) span', $(n)).text();
                        $('#tabs').tabs('close', t);
                    });
                    return false;
                });
                //关闭当前左侧的TAB
                $('#mm-tabcloseleft').click(function () {
                    var prevall = $('.tabs-selected').prevAll();
                    if (prevall.length == 0) {
                        alert('到头了，前边没有啦~~');
                        return false;
                    }
                    prevall.each(function (i, n) {
                        var t = $('a:eq(0) span', $(n)).text();
                        $('#tabs').tabs('close', t);
                    });
                    return false;
                });

                //退出
                $("#mm-exit").click(function () {
                    $('#mm').menu('hide');
                })
            }


        });

	function addPanel(url,tabTitle){
        $('.easyui-accordion li div').removeClass("selected");

        addTab(tabTitle, url);

        $(this).parent().addClass("selected");  		
	}
	   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
            });
            tabClose();
        } else {
            $('#tabs').tabs('select', subtitle);
        }

    }

    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;
        });
    }	
    </script>
    <style>
        .footer {
            width: 100%;
            text-align: center;
            line-height: 35px;
        }

        .top-bg {
            background-color: #d8e4fe;
            height: 80px;
        }
    </style>
</head>
<body class="easyui-layout">
    <div region="north" border="true" split="true" style="overflow: hidden; height: 80px;">
        <div class="top-bg"></div>
    </div>
    <div region="south" border="true" split="true" style="overflow: hidden; height: 40px;">

    </div>
    <div region="west" split="true" title="导航菜单" style="width: 200px;">
        <div id="aa" class="easyui-accordion" style="position: absolute; top: 27px; left: 0px; right: 0px; bottom: 0px;">
            <div title="博文管理" iconcls="icon-save" style="overflow: auto; padding: 10px;">
                <ul class="easyui-tree">
                    <li>
                        <span>Folder</span>
                        <ul>
                            <li>
                                <span>Sub Folder 1</span>
                                <ul>
                                    <li>
                                        <span><a onclick="addPanel('http://www.baidu.com','百度')"  href="javascript:void(0)">百度</a></span>
                                    </li>
                                    <li>
                                        <span><a onclick="addPanel('http://www.qq.com','QQ')" href="javascript:void(0)">QQ</a></span>
                                    </li>
                                    <li>
                                        <span>File 13</span>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <span>File 2</span>
                            </li>
                            <li>
                                <span>File 3</span>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <span><a href="#">File21</a></span>
                    </li>
                </ul>
            </div>
            <div title="新闻管理" iconcls="icon-reload" selected="true" style="padding: 10px;">
                content2  
            </div>
            <div title="资源管理">
                content3  
            </div>
        </div>
    </div>
    <div id="mainPanle" region="center" style="overflow: hidden;">
        <div id="tabs" class="easyui-tabs" fit="true" border="false">
            <div title="欢迎使用" style="padding: 20px; overflow: hidden;" id="home">
                <h1>Welcome to jQuery UI!</h1>
            </div>
        </div>
    </div>
</body>
</html>

效果图：

cping927

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
easyui layout+tab+tree实现网站基本布局

[code="html"] LayOut $(document).ready(function () { //绑定右键菜单事件 function tabCloseEven() { //关闭当前 ...
复制链接

扫一扫