📜  如何使用 jQuery Easy UI 制作手风琴?

📅  最后修改于: 2021-11-25 03:48:28             🧑  作者: Mango

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

在本文中,我们将学习如何使用 jQuery EasyUI 设计手风琴。手风琴是显示面板的集合。它一次显示一个或多个选项卡面板。每个选项卡面板都有标题和一些迷你按钮工具,包括关闭按钮和其他自定义按钮。

EasyUI for jQuery 下载:

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

句法:

容器选项:

  • width:手风琴容器的宽度。
  • height:手风琴容器的高度。
  • 适合:设置为 true 以设置手风琴容器大小适合它的父容器。
  • 边框:定义是否显示边框。
  • animate:定义展开或折叠面板时是否显示动画效果。
  • 多个:启用一次扩展多个面板。
  • selected:初始化的选定面板索引。
  • halign:手风琴面板的标题对齐方式。

面板选项:

  • selected:设置为 true 以展开面板。
  • collapsible:定义是否显示可折叠按钮

事件:

  • onSelect:选择面板时触发。
  • onUnselect:取消选择面板时触发。
  • onAdd:添加新面板时触发。
  • onBeforeRemove:在移除面板之前触发。
  • onRemove:移除面板时触发。

方法:

  • options:返回手风琴的选项。
  • 面板:获取所有面板。
  • 调整大小:调整手风琴的大小。
  • getSelected:获取第一个选定的面板。
  • getSelections:获取所有选中的面板。
  • getPanel:获取指定的面板。
  • getPanelIndex:获取指定的面板索引。
  • select:选择指定的面板。
  • 取消选择:取消选择指定的面板。
  • 添加:添加一个新面板。
  • remove:删除指定面板

方法:

  • 首先,添加项目所需的 jQuery Easy UI 脚本。

例子:

HTML
 
 
  
 
     
     
              
    
     
  
     
  
     
  
    
     
  
    
     
      
    
     
  
    

GeeksforGeeks

    

how to make a basic accordian using jQuery UI?

          
    
            Geeks     
    
        for     
    
        Geeks     
  


输出:

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