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/