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/