📜  EasyUI jQuery 布局小部件

📅  最后修改于: 2021-11-24 05:05:01             🧑  作者: Mango

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

在本文中,我们将学习如何使用 jQuery EasyUI 设计布局。布局是一个容器,最多有五个区域,分别是北、南、东、西中心。中心区域面板是必需的,但边缘区域面板是可选的。

EasyUI for jQuery 下载:

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

句法:

布局选项:

  • fit:如果设置为true,则设置布局大小以适合其父容器。

区域面板选项:

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

事件:

  • onCollapse :当折叠区域面板时触发事件。
  • onExpand : 展开区域面板时会触发该事件。
  • onAdd :添加新区域面板时触发该事件。
  • onRemove :移除区域面板时触发该事件。

方法:

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

方法:首先,添加项目所需的 jQuery Easy UI 脚本。

例子:

HTML


  

    
    
  
    
    
  
    
  
    
  
    
    
  
    
    
  
    
    
  
    

  

  
    

GeeksforGeeks

    

EasyUI jQuery layout widget

       
           
        
           
        
                   
        
                   
        
                   
        
    
  


输出:

参考: http://www.jeasyui.com/documentation/