easyui中layout、accordion加tabs实现简单菜单布局实例

最新推荐文章于 2022-04-05 18:45:57 发布

百里马

最新推荐文章于 2022-04-05 18:45:57 发布

阅读量8.6k

点赞数 5

分类专栏： easyUI 文章标签： layout easyUI

本文链接：https://blog.csdn.net/u012345283/article/details/44284331

版权

easyUI 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

一般对于后台界面都是采用BorderLayout进行布局的。BorderLayout也就是将界面分成五块，如下图所示，分别有：North、East、South、West、Center

这里写图片描述

其中比较特殊的是Center这块区域，它是不固定的，会随着四块区域的变化而做出相应的调整。比如将West向左缩小10px，那么Center则会向West方向扩张10px。其实这个easyUI已经帮我们实现好了，我们只需要使用它的layout就可以完成。

<body class="easyui-layout">
       <div data-options="region:'north'" style="height:70px; text-align: center">
           <h1>EasySpring后台管理</h1>
       </div>
       <div data-options="region:'south',split:true" style="height:50px;"></div>
       <div data-options="region:'west',split:true,title:'菜单栏',iconCls:'icon-ok'" style="width:250px;">
           <div class="easyui-accordion" data-options="fit:true,border:false">
               <!-- 这里由于只有一个，所以不设置title-->
               <div data-options="fit:true,collapsible:false" style="padding:10px;"><!-- 每一个div都是accordion中依赖的panel -->
                    <ul class="westBar" id="admin">
                        <li id="adminUser"><span class="icon-search" style="height:16px;width:16px;display:inline-block"></span>用户管理</li>
                        <li id="adminRole"><span class="icon-search" style="height:16px;width:16px;display:inline-block"></span>角色管理</li>
                        <li id="adminPermission"><span class="icon-search" style="height:16px;width:16px;display:inline-block"></span>权限管理</li>
                    </ul>
               </div>
           </div>
       </div>
       <div data-options="region:'center',iconCls:'icon-ok'">
           <div id="admin_tabs" class="easyui-tabs" data-options="fit:true,border:false,plain:true">
           </div>
       </div>
</body>

这里我们将easyui-layout这个class设到<body>标签上，那么就表示对整个页面执行layout。当然也可以对局部的div执行layout。另外这里对于左边的菜单栏运用了accordion组件，accordion中的子级div就代表了每一个滑块，这里我们只用到一个滑块，所以将collapsible设置为false。那么下面就要构建菜单栏中的菜单了，我们用ul+li来进行布局。ok，布局完成，效果应该如下所示（1024 * 768）：

这里写图片描述

下面要处理的就是点击菜单后，在center中添加或选中响应的tab了。为了达到便于扩展的目的，我们应该设计一套统一的逻辑：比如这里的accordion下的每个panel都作为一个模块，然后该panel下面的菜单都归属于这个上级panel，那么在url的设置时就有一个关联了，比如模块为admin，菜单为adminUser，那么请求url就是.../admin/adminUser，具体可以看下面的代码：

$(function(){
    $("ul.westBar li").on("click", function(){
        // 添加选中样式
        $("ul.westBar li").removeClass('active');
        $(this).addClass('active');

        var id = $(this).attr('id');
        if($(this).hasClass('zdialog')){ // 这里可以扩展对话框菜单
            $('#' + id + '-dialog').dialog('open');
            return;
        }
        var id = $(this).attr('id');
        var title = $(this).text();
        var iconCls = $(this).find("span").attr('class');
        var parent = $(this).parent().attr('id');
        addTabs(id, title, iconCls, parent);
    })
});

function addTabs(id, title, iconCls, parent){
    if($('#admin_tabs').tabs('exists',title)){ // 处理已打开过的tab
        $('#admin_tabs').tabs('select',title);
        return;
    }
    if(!iconCls){
        iconCls = 'icon-ok';
    }
    $('#admin_tabs').tabs('add',{
        title: title,
        href: contextPath + '/' + parent + '/' + id, // 这里用parent + id来定义url
        iconCls: iconCls,
        closable: true,
        onLoadError:function(data){
            // 这里对于非200状态码的都会加载不出来界面，而需要在这里手动处理
            var tab = $('#admin_tabs').tabs('getSelected');
            var body = tab.panel('body');
            if(data.status == 401){
                body.html(data.responseText)
            }else{
                body.html('<h1>加载出错</h1>');
            }
        }
    });
}

百里马

关注

5
点赞
踩
4

收藏

觉得还不错? 一键收藏
2
评论
easyui中layout、accordion加tabs实现简单菜单布局实例

一般对于后台界面都是采用BorderLayout进行布局的。BorderLayout也就是将界面分成五块，如下图所示，分别有：North、East、South、West、Center其中比较特殊的是Center这块区域，它是不固定的，会随着四块区域的变化而做出相应的调整。比如将West向左缩小10px，那么Center则会向West方向扩张10px。其实这个easyUI已经帮我们实现好了，我们只需要
复制链接

扫一扫