• 【EasyUi】页面设计必学之Layout


            接触EasyUi也快一年了。非常多时候都把重心放在实现功能方面。要显示大量数据了就用DataGrid,要实现分页效果了就想着Tabs,如此等等,再接下来就是考虑CSS、js怎样让这个功能实现的更好。

    我非常少去看其他“无关”功能的东西。每次总以没时间为由推迟对这些知识的了解、或者认为这些东西太简单遇到了看帮助文档就成。

    然而一年了。我仅仅用过粘贴过来的Layout。在自己设计页面的时候都是用margin取代。这么简单又有用的东西。你是否也忽略了?

    一、简单介绍Layout

           Layout俗称布局面版,它最多可把页面分成五个部分:east、west、south、north、center(东西南北中)。每一个部分均可放入随意的页面控件,我们能够直接拖动它的边框进行伸缩调整,也能够折叠某些区域。最基本的是还能够在这些区域中再嵌套Layout,即整个页面都是被Layout承包的!

    <html>
    	<head>
    		<title>test</title>
    		<link href="jquery-easyui-1.3.2/demo/demo.css" rel="stylesheet" />
    		<link href="jquery-easyui-1.3.2/themes/icon.css" rel="stylesheet" />
    		<link href="jquery-easyui-1.3.2/themes/default/easyui.css" rel="stylesheet" />
    		<script src="jquery-easyui-1.3.2/jquery-1.8.0.min.js"></script>
    		<script src="jquery-easyui-1.3.2/jquery.easyui.min.js"></script>
    	</head>
    	<body class="easyui-layout" style="font-size:46px;">
    		<div data-options="region:'north',border:false" style="height:60px;background:#778899;padding:10px;font-size:26px;text-align:center">北部区域:可载入标题、logo等等</div>
    		<div data-options="region:'west',split:true,title:'西部'" style="150px;padding:10px;">导航栏类的东西放在这里,如:tree、Accordion</div>
    		<div data-options="region:'east',split:true,collapsed:true,title:'东部'" style="100px;padding:10px;"></div>
    		<div data-options="region:'south',border:false" style="height:50px;background:#778899;padding:10px;text-align:center">南部区域:可显示作者、联系方式等等信息</div>
    		<div data-options="region:'center',title:'中间'">这里放显示大量数据的控件、如DataGrid、Tabs等</div>
    	</body>
    </html>
    
    二、使用

    1.创建Layout

           首先须要创建布局面版(Layout Options),即在<div>标签中引入easyui-layout类。这个就相当于告诉Web页面我要使用Layout了;接下来创建整个页面的区域面版(Region Panel Options),即把页面划分成哪些部分;假设有嵌套的布局。则可又一次从引入easyui-layout開始;最后把控件增加到各区域就可以。这样页面的总体设计就完毕了

    2.属性

           1)面版的样式

                  fit:它是在创建面版(Layout Options)的标签中。可定义的属性,值为boolean型,默认是false。比如:

           fit为true时

    <body>
    
        <div id="mainBody" class="easyui-layout" data-options="fit:true" style=" 1154px; height: 553px;margin-top:40px; margin-left: 90px;">
            @*zTree树形结构*@
            <div data-options="region:'west',split:true,title:'导航栏'" style=" 250px; height:auto">
            </div>
    
            @* 右側载入部分页面数据区域 *@
            <div id="Content" data-options="region:'center',title:'用户信息'" style="background: white;  800px">
            </div>
        </div>
    
    </body>
           页面显演示样例如以下。当中右边、下边一直延伸。好像没有边框一样,这种页面效果非常糟糕,好像是仅仅显示出来一部分一样(值为true的情况。一般用在嵌套面版中)


           把fit设为false或者不设置时,例如以下(这样看起来才有头有尾)

           2)区域面版

                  区域的控制面版选项data-options中定义的面版组件。它的属性一般也包含title、border等。特殊一点的有下边三个

                  region:定义面版的位置。即取值为east、west、south、north、center中的一个,表示东西南北中随意一部分

                  split:设置为true将显示一个分隔条,用户可拖动分隔条来改变区域的大小,默认值为false

                  iconCls:用来小时布局面版头部图标的css类

    3.事件

           一般的事件,如resize、add、remove等。它都拥有,此外还有三个我们须要知道的

           1)panel:參数为region的属性值。返回特定的布局面板

           2)collapse:參数为region的属性值。折叠特定的布局面板。设为true,则在载入后成折叠状态。默觉得false(打开状态)

           3)expand:參数为region的属性值,延伸特定的布局面板

    小结:

           Layout非常easy有用,这次是由于页面显示出现了问题才来了解它,期间调了非常多次才知道原因在这儿,假设提前了解过Layout想必能够非常快就知道毛病在哪儿,也不用走那么多弯路了。 在咱们寻常学习中。非常多东西不怕不知道。就怕不知道。没有提前了解过的东西,在实际应用中非常少会想到它。

  • 相关阅读:
    HTTP状态代码
    安装mySQL数据库常见问题
    python3.6安装版本选择
    用连接池提高Servlet访问数据库的效率
    策略模式
    如何在vue项目中修改less变量,多主题项目解决方案
    【前端】vue项目 url中传递数组参数
    element date-picker默认值问题
    echart 折线图legend不显示的问题
    vue学习之父子组件通信两种方法
  • 原文地址:https://www.cnblogs.com/llguanli/p/7184418.html
Copyright © 2020-2023  润新知