简单easyui layout三块布局

来源：互联网发布：java输出个数的空格编辑：程序博客网时间：2024/05/19 05:06

布局样式布局样子

引入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>

阅读全文

0 0