jQuery EasyUI 布局插件 - Accordion 折叠面板

jQuery EasyUI 插件

通过 $.fn.accordion.defaults 重写默认的 defaults。

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

依赖

panel

用法

创建折叠面板(Accordion)

通过标记创建折叠面板(Accordion),添加 'easyui-accordion' class 到

标记。

Accordion for jQuery

Accordion is a part of easyui framework for jQuery.

It lets you define your accordion component on web page more easily.

content2

content3

我们可以改变或重建折叠面板(Accordion)后,修改某些特性。

$('#aa').accordion({

animate:false

});

刷新折叠面板(Accordion Panel)内容

调用 'getSelected' 方法来获取当前面板(panel),然后我们可以调用面板(panel)的 'refresh' 方法来加载新内容。

var pp = $('#aa').accordion('getSelected'); // 获取选中的面板(panel)

if (pp){

pp.panel('refresh','new_content.php'); // 调用 'refresh' 方法加载新内容

}

容器选项

名称

类型

描述

默认值

width

number

折叠面板(Accordion)容器的宽度。

auto

height

number

折叠面板(Accordion)容器的高度。

auto

fit

boolean

设置为 true,就使折叠面板(Accordion)容器的尺寸适应它的父容器。

false

border

boolean

定义是否显示边框。

true

animate

boolean

定义当展开或折叠面板(panel)时是否显示动画效果。

true

multiple

boolean

设置为 true,则可同时展开多个面板(panel)。该属性自版本 1.3.5 起可用。

false

selected

number

初始化选中的面板(panel)索引。该属性自版本 1.3.5 起可用。

0

面板(Panel)选项

折叠面板(Accordion)的面板(panel)选项继承自面板(panel),下面是附加的属性:

名称

类型

描述

默认值

selected

boolean

设置为 true 就展开面板(panel)。

false

collapsible

boolean

定义是否显示可折叠按钮。如果设置为 false,将不能通过点击来展开/折叠面板(panel)。

true

事件

名称

参数

描述

onSelect

title,index

当面板(panel)被选中时触发。

onUnselect

title,index

当面板(panel)未被选中时触发。该事件自版本 1.3.5 起可用。

onAdd

title,index

当添加一个新面板(panel)时触发。

onBeforeRemove

title,index

当移除一个面板(panel)之前触发,返回 false 就取消移除动作。

onRemove

title,index

当移除一个面板(panel)时触发。

方法

名称

参数

描述

options

none

返回折叠面板(accordion)的选项。

panels

none

获取全部的面板(panel)。

resize

none

调整折叠面板(accordion)的尺寸。

getSelected

none

获取第一个选中的面板(panel)。

getSelections

none

过去所有选中的面板(panel)。该方法自版本 1.3.5 起可用。

getPanel

which

获取指定的面板(panel)。'which' 参数可以是面板(panel)的标题(title)或索引(index)。

getPanelIndex

panel

获取指定的面板(panel)索引。该方法自版本 1.3 起可用。

下面的实例显示如何获取选中的面板(panel)索引。

var p = $('#aa').accordion('getSelected');

if (p){

var index = $('#aa').accordion('getPanelIndex', p);

alert(index);

}

select

which

选择指定的面板(panel)。'which' 参数可以是面板(panel)的标题(title)或索引(index)。

unselect

which

未选择指定的面板(panel)。'which' 参数可以是面板(panel)的标题(title)或索引(index)。该方法自版本 1.3.5 起可用。

add

options

添加一个新的面板(panel)。默认情况下,新添加的面板(panel)会被选中。如需添加一个未被选中的新面板(panel),请传递 'selected' 属性,并将其设置为 false。

代码实例:

$('#aa').accordion('add', {

title: 'New Title',

content: 'New Content',

selected: false

});

remove

which

移除指定的面板(panel)。'which' 参数可以是面板(panel)的标题(title)或索引(index)。

jQuery EasyUI 插件

html accordion折叠菜单动态,jQuery EasyUI 布局插件 – Accordion 折叠面板 | 菜鸟教程...相关推荐

  1. php jq 提交表单验证,jQuery EasyUI 表单 – 表单验证 | 菜鸟教程

    jQuery EasyUI 表单 - 表单验证 本教程将向您展示如何验证一个表单.easyui 框架提供一个 validatebox 插件来验证一个表单.在本教程中,我们将创建一个联系表单,并应用 v ...

  2. jquery折叠菜单、jquery侧边栏菜单、CSS侧边栏菜单

    jquery折叠菜单.jquery侧边栏菜单.CSS侧边栏菜单 一.Jquery折叠菜单效果 二.jquery侧边栏菜单效果 三.CSS侧边栏菜单效果 先上代码 <!DOCTYPE html&g ...

  3. 火狐浏览器工具栏/折叠菜单怎么设置?火狐浏览器工具栏/折叠菜单定制教程

    为了方便用户将一些常用的功能及应用添加到工具栏/折叠菜单中,火狐浏览器推出了一项特别的功能"定制".也就是说,借助该功能,用户就可以自由添加或替换工具栏/折叠菜单中的各类功能了!那 ...

  4. android动态图标主题,【官方秘籍】MAML动态图标百变插件完美适配全机型教程

    [官方秘籍]MAML动态图标&百变插件完美适配全机型教程 发布时间: 2016-01-27 11:29 一份manifest文件,可以同时运行在多个设备,只需要设置好在不同尺寸或密度的设备上使 ...

  5. jQuery easyUI布局(Layout)与手风琴(Accordion)

    上期讲了easyUI最重要的组件:面板,这期讲讲布局和手风琴 运用jQuery easyUI是需要引用文件的,详见上一期 布局(layout) 效果图如下: 我们从上图可以看到,整个布局分为五个部分, ...

  6. jQuery EasyUI布局容器layout实例精讲

    这个布局容器,有五个区域:北.南.东.西和中心. 他中心地区面板是必需的,但是边缘地区面板是可选的.每一个边缘地区面板可以缩放的拖动其边境, 他们也可以通过点击其收缩触发.布局可以嵌套,从而用户可以建 ...

  7. jQuery EasyUI ztree插件使用

    1.下载easyUI的开发包 该包的结构是 2.将easyUI的资源文件引入的页面中: <link rel="stylesheet" type="text/css& ...

  8. easyui treegrid php,jQuery EasyUI 数据网格与树插件 – Treegrid 树形网格 | 菜鸟教程

    jQuery EasyUI 数据网格与树插件 - Treegrid 树形网格 jQuery EasyUI 插件 扩展自 $.fn.datagrid.defaults.通过 $.fn.treegrid. ...

  9. 运用流体布局的html代码,jquery 流体布局插件:Waterfall

    流体布局(一) jQuery插件:jQuery.Waterfall.js, js的计算方法 jQuery1.4.4,IE8.0,opera,firefox,chrome测试通过 围观请点击:http: ...

最新文章

  1. 利用stdin stdout stderr及POSIX-linux机制重定向写日志
  2. 掘金Markdown使用
  3. python下载安装教程3.8.1-Linux安装Python 3.8.1
  4. 神经网络那些事儿(二)
  5. 如何使用Putty登录安装在VirtualBox里的ubuntu
  6. appsettings 连接oracle数据库,ABP .net core集成访问Oracle数据库
  7. 普通地图的六大要素_地理知识点总结之地图基本要素
  8. Netty工作笔记0062---WebSocket长连接开发
  9. 数据结构实验:电话号码查询系统
  10. 自己整理的Linux指令全集,附思维导图(适合刚入门的看),顺带命令大全网址方便查找指令
  11. 使用IDEA创建Android项目
  12. MYSQL 列转行方法
  13. MaxENT完整操作
  14. clickhouse将csv文件导入表中出现的 DB::ParsingException: Cannot parse input: expected ‘,‘ before: ‘\‘错误的解决方法
  15. android实时预览,实现预览  |  Android 开发者  |  Android Developers
  16. 转载 中文字符集编码Unicode ,gb2312 , cp936 ,GBK,GB18030
  17. 关于可拓学-新兴的应用学科
  18. 淘宝助理错误代码及处理方法!
  19. 重构之美-跨越Web标准,触碰语义网[开门见山:Microformat]
  20. 浅谈人工智能下智慧交通的深入应用

热门文章

  1. Windows server 2008 Hyper-v下,玩转office communicator Server 2007 Enterprise
  2. cocos2dx RenderTexture 用法
  3. CSS浮动详解及案例
  4. linux安装fortran_Intel Parallel Studio XE 2019安装设置
  5. wifi信号强度等级算法
  6. Shell编程~脚本cheo命令
  7. 设备故障管理系统(一)
  8. 班迪(高清录制视频) 中文最新(附带工具)
  9. 【云计算】从事云计算运维可以考取哪些证书?
  10. im即时通讯让工作汇报更加高效