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

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/