📜  EasyUI jQuery 标签小部件

📅  最后修改于: 2021-11-24 04:27:07             🧑  作者: Mango

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/