EasyUI jQuery布局小工具

EasyUI是一个HTML5框架，用于使用基于jQuery、React、Angular和Vue技术的用户界面组件。它有助于为交互式网络和移动应用程序构建功能，为开发者节省大量时间。

在这篇文章中，我们将学习如何使用jQuery EasyUI来设计一个布局。布局是有多达五个区域的容器，分别是北，南，东，西，和中心。中心区域的面板是必须的，但边缘区域的面板是可选的。

EasyUI for jQuery的下载：

https://www.jeasyui.com/download/index.php

语法:

<div class="layout"></div>

布局选项:

fit。如果它被设置为true，它将布局尺寸设置为适合其父容器。

区域面板选项：

title。布局面板的标题文本。
region。定义了布局面板的位置
border。它设置为true以显示布局面板边框。
split。它设置为true，显示一个分割栏，用户可以在其中改变面板的大小。
iconCls。一个图标CSS类，用于在面板标题上显示一个图标。
href：一个用于从远程服务器加载数据的URL。
collapsible。它定义了是否显示可折叠的按钮。
minWidth：面板的最小宽度。
minHeight。面板的最小高度。
maxWidth：面板的最大宽度。
maxHeight。面板的最大高度。
expandMode。点击折叠的面板时的展开模式。
collapsedSize。塌陷的面板尺寸。
hideExpandTool。它设置为true以隐藏折叠面板上的展开工具。
hideCollapsedContent。它设置为true以隐藏折叠面板上的标题栏。
collapsedContent。要显示在折叠面板上的标题内容。

事件:

onCollapse : 当折叠一个区域面板时，该事件会发生。
onExpand : 事件在扩展一个区域面板时发生。
onAdd : 当添加一个新的区域面板时，该事件发生。
onRemove : 当移除一个区域面板时，该事件发生。

方法:

resize。它设置了布局的大小
panel。它返回指定的面板。
collapse。它使指定的面板崩溃。
expand。。它展开指定的面板。
add: 它添加了一个指定的面板。
remove。它删除了指定的面板。
split。它分割了区域面板。
unsplit:它取消了区域面板的分割。
stopCollapsing。它停止折叠区域面板。

方法：首先，添加你的项目需要的jQuery Easy UI脚本。

<script type=”text/javascript” src=”jquery.min.js”> </script>
<!–jQuery libraries of EasyUI –>
<script type=”text/javascript” src=”jquery.easyui.min.js”> </script>
<!–jQuery library of EasyUI Mobile –>
<script type=”text/javascript” src=”jquery.easyui.mobile.js”> </script>

示例:

<!doctype html>
<html>
  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
        "initial-scale=1.0, maximum-scale=1.0,
        user-scalable=no">
  
    <!-- EasyUI specific stylesheets-->
    <link rel="stylesheet" type="text/css" 
        href="themes/metro/easyui.css">
  
    <link rel="stylesheet" type="text/css" 
        href="themes/mobile.css">
  
    <link rel="stylesheet" type="text/css" 
        href="themes/icon.css">
  
    <!--jQuery library -->
    <script type="text/javascript" 
        src="jquery.min.js">
    </script>
  
    <!--jQuery libraries of EasyUI -->
    <script type="text/javascript" 
        src="jquery.easyui.min.js">
    </script>
  
    <!--jQuery library of EasyUI Mobile -->
    <script type="text/javascript" 
        src="jquery.easyui.mobile.js">
    </script>
  
    <script type="text/javascript">
         $(document).ready(function() {$ ('#gfg').layout('show', {});
        });
    </script>
</head>
  
<body>
  
    <h1>GeeksforGeeks</h1>
    <h3>EasyUI jQuery layout widget</h3>
  
    <div id="gfg" class="easyui-layout" 
        style="width:500px;height:350px;">
  
        <div data-options=
            "region:'north',title:'up'">
        </div>
  
        <div data-options=
            "region:'center',title:'center'">
        </div>
          
        <div data-options=
            "region:'south',title:'down'">
        </div>
          
        <div data-options=
            "region:'east',title:'left'">
        </div>
          
        <div data-options=
            "region:'west',title:'right'">
        </div>
    </div>
</body>
  
</html>

输出:

EasyUI jQuery布局小工具