EasyUI jQuery 面板小部件

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

在本文中，我们将学习如何使用 jQuery EasyUI 设计面板。面板用作其他内容的容器。它是构建其他组件（例如布局、选项卡、手风琴等）的基础组件。

EasyUI for jQuery 下载：

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

句法：

特性：

• id：此面板的 id 属性。
• 标题：面板标题中显示的标题文本。
• iconCls：在面板中显示 16×16 图标的 CSS 类。
• 宽度：它设置面板宽度。
• 高度：它设置面板高度。
• left：设置面板左侧位置。
• top：设置面板顶部位置。
• cls：它向面板添加一个 CSS 类。
• headerCls：它向面板标题添加一个 CSS 类。
• bodyCls：它为面板主体添加了一个 CSS 类。
• 样式：它向面板添加自定义规范样式。
• fit：当它设置为true 时，面板大小适合其父容器。
• 边框：显示面板边框。
• doSize：如果设置为true ，面板将被调整大小。
• noheader：如果设置为 true，则不会创建面板标题。
• content：它设置面板主体内容。
• halign：它设置面板标题对齐方式。
• titleDirection：它设置标题标题方向。
• collapsible：如果设置，则显示可折叠按钮。
• 最小化：如果设置，它会显示一个最小化按钮。
• maximizable：如果设置，则显示一个可最大化按钮。
• 可关闭：如果设置，则显示可关闭按钮。
• 标题：它设置面板标题。
• 页脚：它设置面板页脚。
• openAnimation：设置开场动画。
• openDuration：设置打开持续时间。
• closeAnimation：它设置关闭动画。
• closeDuration：设置关闭持续时间。
• 折叠：如果设置，面板在初始化时折叠。
• 最小化：如果设置，面板在初始化时最小化。
• 最大化：如果设置，面板在初始化时最大化。
• 关闭：如果设置，则面板在初始化时关闭。
• href：加载远程数据并显示在面板中的 URL。
• cache：设置为true，缓存从href加载的面板内容。
• loadingMessage：当远程数据被加载时，它会在面板中显示一条消息。
• 方法： HTTP 方法加载内容页面。
• queryParams：它设置加载内容页面时将发送的附加参数。
• loader：它定义了如何从远程服务器加载内容页面。

事件：

• onBeforeLoad：它在加载内容页面之前触发，返回false以忽略此操作。
• onLoad：加载远程数据时触发。
• onLoadError：当加载内容页面发生一些错误时触发。
• onBeforeOpen：在面板打开之前触发。
• onOpen：在面板打开后触发。
• onBeforeClose：在面板关闭之前触发
• onClose：在面板关闭后触发。
• onBeforeDestroy：它在面板被销毁之前触发。
• onDestroy：它在面板被破坏后触发。
• onBeforeCollapse：在面板折叠之前触发。
• onCollapse：面板折叠后触发。
• onBeforeExpand：在面板展开之前触发。
• onExpand：面板展开后触发。
• onResize：在面板调整大小后触发。
• onMove：面板移动后触发。
• onMaximize：在窗口最大化后触发。
• onRestore：在窗口恢复到原始大小后触发。
• onMinimize：在窗口最小化后触发。

方法：

• 选项：它返回选项属性。
• panel：它返回外部面板对象。
• header：它返回面板标题对象。
• 页脚：它返回面板页脚对象。
• body：它返回面板主体对象。
• setTitle：设置标题的标题文本。
• open：当open参数设置为true时
• close：当 forceClose 参数设置为 true 时，面板关闭。
• destroy：当 forceDestroy 参数设置为 true 时，面板被销毁。
• clear：清除面板内容。
• 刷新：刷新面板以加载远程数据。
• 调整大小：设置面板大小并进行布局。
• doLayout：设置面板内子组件的大小。
• 移动：将面板移动到新位置。
• 最大化：使面板适合其容器。
• 最小化：最小化面板。
• restore：将最大化的面板恢复到其原始大小和位置。
• 折叠：折叠面板主体。
• 展开：展开面板主体。

CDN 链接：首先，添加项目所需的 jQuery Easy UI 脚本。

例子：

HTML

 
 
  
 
     
     
              
    
     
  
     
  
     
  
    
     
     
  
    
     
     
      
    
     
     
  
  
 
  
     
    GeeksforGeeks
    how to make a basic panel using jQuery UI?
    
    geeks
    geeks2
  

  

输出：

基本面板

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