【EasyUI】accordion(折叠面板)的使用 |
您所在的位置:网站首页 › element折叠面板更改高度 › 【EasyUI】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的方式从后台获取,可以按照这个思路来进行功能权限的控件。 ![]() ![]() 效果图: 分类面板属性继承自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'参数可以使面板的标题或者索引。
|
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |