accordion（折叠面板）的使用

一、前言：

　　折叠面板（accordion）允许使用多面板（panel），同时显示一个或多个面板（panel）。每个面板（panel）都有展开和折叠的内建支持。点击面板（panel）头部可展开或折叠面板（panel）主体。面板（panel）内容可通过 ajax 指定 'href' 属性来加载。用户可定义被选中的面板（panel）。如果未指定，则默认选中第一个面板（panel）。

二、使用实例

1、创建方式

　　easyui 中的控件一般有两种创建方式：通过标签的方式以及js编程的方式。

1.1标签的方式创建：

如下所示：给父容器div标签添加一个名为“easyui-accordion”的类ID，通过data-options属性来设置其参数。父容器中的每个div为一个面板，在面板中又可以增加一些其他的内容，在这里是每个面板中加了一个树控件来实现菜单导航。树控件中的节点可以手动添加同时也可以通过ajax的方式从后台获取，可以按照这个思路来进行功能权限的控件。

<div id="left" data-options="region:'west',title:'导航菜单',split:true" style="width: 15%;"><div id="left_content" class="easyui-accordion" data-options="fit:true"><div title="基础数据"><ul class="easyui-tree" data-options="lines: true"><li>组织分解结构</li><li>岗位分解结构</li><li>用户管理</li></ul></div><div title="流程管理"><ul class="easyui-tree" data-options="lines: true"><li>流程预定义</li><li>流程监控</li></ul></div><div title="系统集成管理" data-options="lines: true"><ul class="easyui-tree"><li>手动同步数据</li><li>数据同步日志</li></ul></div><div title="权限管理"><ul class="easyui-tree" data-options="lines: true"><li>角色管理</li><li>用户权限分配</li><li><span>数据权限管理</span><ul><li>数据权限关联配置</li><li>数据权限批量处理</li></ul></li></ul></div></div></div>

1.2通过编程的方式创建

$("#left_content").accordion({...})

效果图：

2、下面对相关的属性、方法进行记录说明

2.1 容器属性

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

2.2 面板属性

分类面板属性继承自panel(面板)，分类面板新增的属性如下：

属性名	属性值类型	描述	默认值
selected	boolean	如果设置为true将展开面板。	false
collapsible	boolean	如果设置为true将显示折叠按钮。	true

2.2.1 事件

事件名	事件参数	描述
onSelect	title,index	在面板被选中的时候触发。
onUnselect	title,index	在面板被取消选中的时候触发。（该方法自1.3.5版开始可用）
onAdd	title,index	在添加新面板的时候触发。
onBeforeRemove	title,index	在移除面板之前触发，返回false可以取消移除操作。
onRemove	title,index	在面板被移除的时候触发。

2.2.2 方法

方法名	方法参数	描述
options	none	返回分类组件的属性。
panels	none	获取所有面板。
resize	none	调整分类组件大小。
getSelected	none	获取选中的面板。
getSelections	none	获取所有选中的面板。（该方法自1.3.5版开始可用）
getPanel	which	获取指定的面板，'which'参数可以是面板的标题或者索引。
getPanelIndex	panel	获取指定面板的索引。（该方法自1.3版开始可用）以下示例显示如何获取选中面板的索引。 var p = $('#aa').accordion('getSelected'); if (p){var index = $('#aa').accordion('getPanelIndex', p);alert(index); }
select	which	选择指定面板。'which'参数可以是面板标题或者索引。
unselect	which	取消选择指定面板。'which'参数可以是面板标题或者索引。（该方法自1.3.5版开始可用）
add	options	添加一个新面板。在默认情况下，新增的面板会变成当前面板。如果要添加一个非选中面板，不要忘记将'selected'属性设置为false。代码示例： $('#aa').accordion('add', {title: '新标题',content: '新内容',selected: false });
remove	which	移除指定面板。'which'参数可以使面板的标题或者索引。

转载于:https://www.cnblogs.com/zhaoyl9/p/11277616.html

accordion（折叠面板）的使用相关推荐

html accordion折叠菜单动态,jQuery EasyUI 布局插件 – Accordion 折叠面板 | 菜鸟教程...
jQuery EasyUI 布局插件 - Accordion 折叠面板 jQuery EasyUI 插件通过 $.fn.accordion.defaults 重写默认的 defaults. 折叠面板 ...
EasyUI Accordion折叠面板
EasyUI Accordion折叠面板 Accordion介绍效果图依赖于panel 用法刷新折叠面板(Accordion Panel)内容新添加面板获取指定的面板(panel)索引容器 ...
EasyUI中Accordion折叠面板的简单使用
场景效果容器选项名称类型描述默认值 width number 折叠面板(Accordion)容器的宽度. auto height number 折叠面板(Accordion)容器的高度. ...
html easyui怎么实现折叠面板,Easyui Accordion 折叠面板_EasyUI 插件
通过 $.fn.accordion.defaults 重写默认的 defaults. 折叠面板(accordion)允许您提供多个面板(panel),同时显示一个或多个面板(panel).每个面板(p ...
Jquery Accordion 折叠面板
属性类型默认值 active Boolean/Number/jQuery/Selector/Element 第一个面板设定默认显示的面板.设置为 false 时默认不显示面板,需 collaps ...
jQuery easyUI--accordion折叠面板
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>acc ...
jQuery EasyUI 折叠面板accordion的使用实例
1.对折叠面板区域 div 设置 class="easyui-accordion" 2.在区域添加多个 div, 每个 div 就是一个面板 (每个面板一定要设置 title 属性 ...
php中控制面板折叠,微信小程序折叠面板的实现方法示例
本文主要为大家详细介绍微信小程序实现折叠面板的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家. 实现原理通过控制详情部分的显示隐藏,来实现折叠效果,同时切换右侧向下箭头 ...
045_Collapse折叠面板
1. Collapse折叠面板 1.1. Collapse折叠面板通过折叠面板收纳内容区域. 1.2. Collapse Attributes 参数说明类型可选值默认值 value / v-m ...