JQuery EasyUI(11)_easyui for jquery-优快云博客

本文详细介绍了EasyUI框架中的Accordion组件，包括其加载方式、容器属性、事件列表、方法列表及面板属性。Accordion组件允许创建可折叠的面板，通过不同的属性配置，可以实现动画效果、面板选择等交互功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第十一章：Accordion（分类）组件

学习要点：

加载方式
容器属性
事件列表
方法列表
面板属性

一、加载方式：

1.class加载方式：

<!DOCTYPE html>
<html>
  <head>
    <title>JQuery Easy UI</title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>     
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>     
    <script type="text/javascript" src="js/index.js"></script> 
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>              
</head>
  <div id="box" class="easyui-accordion" style="width:500px;height:300px;">
      <div title="Accordion1">accordion1</div> 
      <div title="Accordion2">accordion2</div>
      <div title="Accordion3">accordion3</div>   
  </div>
</html>

2.JS调用：

<!DOCTYPE html>
<html>
  <head>
    <title>JQuery Easy UI</title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>     
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>     
    <script type="text/javascript" src="js/index.js"></script> 
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>              
</head>
  <div id="box">
      <div title="Accordion1">accordion1</div> 
      <div title="Accordion2">accordion2</div>
      <div title="Accordion3">accordion3</div>   
  </div>
</html>

$(function(){

  $('#box').accordion({
  
  });
});

二、容器属性：

Accordion容器属性
属性名	值	说明
width	number	分类容器的宽度。默认值为auto。
height	number	分类容器的高度。默认值为auto。
fit	boolean	如果设置为true，分类容器大小将自适应父容器。默认值false。
border	boolean	定义是否显示边框，默认值为true。
animate	boolean	定义在展开和折叠的时候是否显示动画效果。默认值为true。
multiple	boolean	如果为true时，同时展开多个面板，默认值为false。
select	number	设置初始化时，默认选中的面板索引号，默认值0。

<!DOCTYPE html>
<html>
  <head>
    <title>JQuery Easy UI</title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>     
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>     
    <script type="text/javascript" src="js/index.js"></script> 
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>              
</head>
  <div id="box" style="width:300px;height:200px;">
      <div title="Accordion1">accordion1</div> 
      <div title="Accordion2">accordion2</div>
      <div title="Accordion3">accordion3</div>   
  </div>
</html>

$(function(){

  $('#box').accordion({
       //width:500,
       //height:300,
       //fit:true,
       //border:false,
       //animate:false,
       //multiple:true,
       selected:1,
  });
});

三、事件列表：

Accordion事件
事件名	传参	说明
onSelect	title,index	在面板被选中的时候触发。
onUnselect	title,index	在面板被取消选中的时候触发。
onAdd	title,index	在添加新面板的时候触发。
onAdd	title,index	在添加新面板的时候触发。
onBeforeRemove	title,index	在移除面板的之前触发，返回false可以取消移除操作。
onMove	title,index	在面板被移除的时候触发。

四、方法列表：

Accordion方法
方法名	传参	说明
options	none	返回分类组件的属性
panels	none	获取所有面板
resize	none	调整分类组件大小
getSelect	none	获取选中的面板
getSelections	none	获取所有选中的面板
getPanel	which	获取指定的面板，'which'参数可以是面板标题或者索引。
getPanelIndex	panel	获取指定面板的索引。
select	which	选择指定面板，'which'参数可以是面板标题或者索引。
unselect	which	取消选择指定面板，'which'参数可以是面板标题或者索引。
add	options	添加一个新面板，在默认情况下，新增的面板会变成当前面板，如果要添加一个非选中面板，不要忘记将'selected'属性设置为false。
remove	which	移除指定面板，'which'参数可以是面板标题或者索引。

五、面板属性：

选项卡面板继承了panel属性，我们参考panel属性即可，对分类的面板同样有效。并且提供了新增的两个属性。

Accordion面板新增属性
方法名	参数	说明
selected	boolean	如果设置为true将展开面板。
collapsible	boolean	如果设置为true将显示折叠按钮。

<!DOCTYPE html>
<html>
  <head>
    <title>JQuery Easy UI</title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>     
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>     
    <script type="text/javascript" src="js/index.js"></script> 
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>              
</head>
  <div id="box" style="width:300px;height:200px;">
      <div title="Accordion1">accordion1</div> 
      <div title="Accordion2" id="a2">accordion2</div>
      <div title="Accordion3">accordion3</div>   
  </div>
</html>

$(function(){

  $('#box').accordion({

   /*
       onSelect:function(title,index){
           alert(title + '|' + index);
     },

       onUnselect:function(title,index){
           alert(title + '|' + index);
     },


       onAdd:function(title,index){
           alert(title + '|' + index);
     },

       onBeforeRemove:function(title,index){
           alert('before' + title + '|' + index);
     },

       onRemove:function(title,index){
           alert('' + title + '|' + index);
     },
  */

//  }).hide();

  });

    //console.log($('#box').accordion('panels'));

   /*
   $(decumnet).click(function(){
         $('#box').accrdion().show();
         $('#box').accrdion('resize');
      });
  */

    //console.log($('#box').accordion('getSelected'));

   /*

    $('decument').click(function(){
       console.log($('#box').accordion('getSelections'));
  });

  */
    //console.log($('#box').accordion('getPanel'),1);
    //console.log($('#box').accordion('getPanelIndex'),'#a2');
    //$('#box').accordion('select',1);
    //$('#box').accordion('unselect',0);
  
   /*
 
    $('#box').accordion('add',{
        title:'新面板',
        colsable:true,
        content:'新内容',
        onClose:function(){
            alert('close');
       },
        selected:false,
        collapsible:false,    
   });

  */

     //$('#box').accrodion('remove',0);
});

作者：Roger_CoderLife

链接：https://blog.youkuaiyun.com/Roger_CoderLife/article/details/102918862

本文根据网易云课堂JQuery EasyUI视频教程翻译成文档，转载请注明原文出处，欢迎转载