简单easyui layout三块布局_easyui 布局三个块-优快云博客

布局样式布局样子

引入easyui+jquery+css代码

<script type="text/javascript"
    src="../js/jquery.min.js"></script>
<script type="text/javascript"
    src="../js/jquery.easyui.min.js"></script>
<script type="text/javascript"
    src="../js/easyui-lang-zh_CN.js"></script>
<link rel="stylesheet" type="text/css"
    href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css"
    href="../themes/icon.css">
<style type="text/css">
    .content {
        padding: 10px 10px 10px 10px;
    }
</style>
<script type="text/javascript">

布局前台代码

<body class="easyui-layout">
    <div data-options="region:'north',split:true"
            style="height:100px;">
            <center style="margin-top: 40px;">
                <h3>sccc后台</h3>
            </center>
    </div>
    <div data-options="region:'west',title:'菜单',split:true" style="width:180px;">
        <ul id="menu" class="easyui-tree" style="margin-top: 10px;margin-left: 5px;">
            <li><span id="sms">短信群发</span></li>
            <li><span id="massagemanage">短信模板管理</span></li>
         </ul>
    </div>
    <div data-options="region:'center',title:''">
        <div id="tabs" class="easyui-tabs">
            <div title="首页" style="padding:20px;">

            </div>
        </div>
    </div>

</body>

jquery点击节点，打开tabs实现

<script type="text/javascript">

$(function(){
    //异步树发送ajax请求，获取菜单数据
    $("#menu").tree({

        onClick: function(node){
            //点击叶子结点，如果对应tab已经存在，则选中这个tab；如果对应tab不存在，新开tab
            //判断点击叶子结点
            if($('#menu').tree('isLeaf', node.target)){
                    var tabs = $('#tabs');
                    //根据点击叶子节点的文本信息得到tab
                    var tab = tabs.tabs('getTab',node.text);
                    //初始设置为短信模板管理页面
                    var href='listMassage.html';
                    //若选择节点为短信群发，则修改页面
                    if(node.text=='短信群发'){
                        href='listMassageRecording.html';
                    }

                    if(tab){
                        //tab页已经打开，则选中这个tab
                        tabs.tabs('select',node.text);
                    }else{
                        //对应tab不存在，新开tab
                        tabs.tabs('add',{
                            title:node.text,
                            href:href,
                            closable:true,
                        });
                    }
            }
        }

    });

});


</script>