zoukankan      html  css  js  c++  java
  • easyui学习记录:Layout(布局)的使用

    一、前言

      在我的后台管理系统中我选择了easyui 的layout控件来实现主页的布局。通过layout可以实现简单使用的布局,布局容器有5个区域:北、南、东,西和中间。中间区域面板是必须的,边缘面板都是可选的。每个区域面板都可以通过拖拽其边框改变大小,也可以点击折叠按钮将区域面板折叠起来。布局可以进行嵌套,用户可以通过组合布局来构建复杂的布局结构。

    二、使用举例

    创建布局

    1、使用完整页面创建布局,我在系统中就是通过这种方式来实现的。

    <body class="easyui-layout">
        <form runat="server" >
        <div id="banner" data-options="region:'north'" >
            <img src="themes/default/images/hdlogo.png"  />
            <span >多项目管理平台后台管理系统</span>
        </div>    
        <div id="left" data-options="region:'west',title:'导航菜单',split:true" style=" 15%;">
            <div id="left_content" class="easyui-accordion"  data-options="fit:true">
                <div title="基础数据">
                    <ul class="easyui-tree" data-options="lines: true">
                        <li>组织分解结构</li>
                        <li>岗位分解结构</li>
                        <li>用户管理</li>
                    </ul>
                </div>
                <div title="权限管理">
                    <ul class="easyui-tree" data-options="lines: true">
                        <li>角色管理</li>
                        <li>用户权限分配</li>
                        <li>
                            <span>数据权限管理</span>
                            <ul>
                                <li>数据权限关联配置</li>
                                <li>数据权限批量处理</li>
                            </ul>
                        </li>
                    </ul>
                </div>
                <div title="流程管理">
                    <ul class="easyui-tree" data-options="lines: true">
                        <li>流程预定义</li>
                        <li>流程监控</li>
                    </ul>
                </div>
                <div title="系统集成管理" data-options="lines: true">
                    <ul class="easyui-tree">
                        <li>手动同步数据</li>
                        <li>数据同步日志</li>
                    </ul>
                </div>
            </div>
        </div>
        <div id="Content" data-options="region:'center'" style=" 84%;">
            <div id="top">
                <span>
                    <input id="ProjectTree"   style=" 300px;" />
                </span>
                <span>用户:<asp:Label ID="LoginName" runat="server" Text=""></asp:Label>
                    <strong>                   
                       <asp:LinkButton ID="UserLogout"    runat="server" OnClick="UserLogout_Click" >【 注销 】</asp:LinkButton>
                    </strong>
                </span>
            </div>
            <div id="center" style="height: 90%;">
                center
            </div>
            <div id="footer" >
               XXX版权所有 © 2013
            </div>
        </div>
        </form>
    </body>

    至于嵌套布局等使用到了在做总结。

    布局属性

    属性名属性值类型描述默认值
    fit boolean 如果设置为true,布局组件将自适应父容器。当使用'body'标签创建布局的时候,整个页面会自动最大。 false

    区域面板属性

    区域面板属性定义与panel组件类似,下面的是公共的和新增的属性: 

    属性名属性值类型描述默认值
    title string 布局面板标题文本。 null
    region string 定义布局面板位置,可用的值有:north, south, east, west, center。  
    border boolean 为true时显示布局面板边框。 true
    split boolean 为true时用户可以通过分割栏改变面板大小。 false
    iconCls string 一个包含图标的CSS类ID,该图标将会显示到面板标题上。 null
    href string 用于读取远程站点数据的URL链接 null
    collapsible boolean 定义是否显示折叠按钮。(该属性自1.3.3版开始可用) true
    minWidth number 最小面板宽度。(该属性自1.3.3版开始可用) 10
    minHeight number 最小面板高度。(该属性自1.3.3版开始可用) 10
    maxWidth number 最大面板宽度。(该属性自1.3.3版开始可用) 10000
    maxHeight number 最大面板高度。(该属性自1.3.3版开始可用) 10000

    三、总结

    不积跬步,无以至千里!

  • 相关阅读:
    [自创]mootools所有复选框只能选择一个的功能
    tomcat设置https访问
    更改tomcat运行时标题
    Java日期操作: 查找星期一和星期天
    mysql 常用数据查询
    git pull代码冲突
    antd model form数据不刷新问题
    前端开发常见面试题
    whistle 使用步骤
    windows 环境 启动报错 '.inconfig' 不是内部或外部命令,也不是可运行的程序
  • 原文地址:https://www.cnblogs.com/YanYongSong/p/5130230.html
Copyright © 2011-2022 走看看