EasyUI 是一个 HTML5 框架，用于使用基于 jQuery、React、Angular 和 Vue 技术的用户界面组件。它有助于为交互式 Web 和移动应用程序构建功能，为开发人员节省大量时间。
在本文中，我们将学习如何使用 jQuery EasyUI 设计选项卡。用于显示面板集合的选项卡。它一次只显示一个选项卡面板。每个选项卡面板都有标题和一些迷你按钮工具，包括关闭按钮和其他自定义按钮。
EasyUI for jQuery 下载：
https://www.jeasyui.com/download/index.php句法：
特性：
- width : 用于设置标签容器的宽度。
- height : 用于设置标签容器的高度。
- plain : True 渲染没有背景容器图像的标签条。
- fit : True 设置标签容器的大小以适合其父容器。
- border : True 显示标签容器边框。
- scrollIncrement：用于设置每次按下标签滚动按钮时滚动的像素数。
- scrollDuration：用于设置每个滚动动画应该持续的毫秒数。
- 工具：用于设置工具栏放置在页眉的左侧或右侧。
- toolPosition：用于设置工具栏位置。
- tabPosition：用于设置标签位置。
- headerWidth：用于设置标签页眉宽度。
- tabWidth：用于设置标签条的宽度。
- tabHeight：用于设置标签条的高度。
- selected：用于设置初始化的选中标签索引。
- showHeader: True 显示标签页眉。
- justified: True 使标签条与其父容器的宽度相等。
- 窄：真去除标签条之间的空间。
- 药丸：真正使标签条看起来像药丸。
事件：
- onLoad：当 Ajax 选项卡面板完成加载远程数据时触发。
- onSelect：当用户选择选项卡面板时触发。
- onUnselect：当用户取消选择选项卡面板时触发。
- onBeforeClose：在选项卡面板关闭之前触发
- onClose：当用户关闭选项卡面板时触发。
- onAdd：添加新选项卡面板时触发。
- onUpdate：更新选项卡面板时触发。
- onContextMenu：右键单击选项卡面板时触发。
方法：
- options：用于返回选项卡选项。
- tabs：用于返回所有选项卡面板。
- resize：用于调整标签容器的大小并进行布局。
- 添加：用于添加新的标签面板。
- close：用于关闭标签面板。
- getTab：用于获取指定的标签面板。
- getTabIndex：用于获取指定的标签面板索引
- getSelected：用于 获取选定的选项卡面板。
- select：用于选择选项卡面板。
- 取消选择：用于 选择一个选项卡面板。
- showHeader：用于 显示选项卡标题。
- hideHeader：用于 隐藏选项卡标题。
- showTool：用于 显示选项卡工具。
- hideTool：用于隐藏标签工具。
- 存在：用于指示特殊面板是否存在
- update：用于更新指定的标签面板。
- enableTab：用于 启用指定的选项卡面板。
- disableTab：用于 禁用指定的选项卡面板。
- scrollBy：用于 按指定的像素量滚动选项卡标题。
方法：
- 首先，添加项目所需的 jQuery Easy UI 脚本。
例子：
HTML
GeeksforGeeks
EasyUI jQuery tabs widget
first tab
second tab
third tab
输出：
参考： http://www.jeasyui.com/documentation/