通过 $.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)。

html easyui怎么实现折叠面板,Easyui Accordion 折叠面板_EasyUI 插件相关推荐

  1. EasyUI中Accordion折叠面板的简单使用

    场景 效果 容器选项 名称 类型 描述 默认值 width number 折叠面板(Accordion)容器的宽度. auto height number 折叠面板(Accordion)容器的高度. ...

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

    jQuery EasyUI 布局插件 - Accordion 折叠面板 jQuery EasyUI 插件 通过 $.fn.accordion.defaults 重写默认的 defaults. 折叠面板 ...

  3. EasyUI Accordion折叠面板

    EasyUI Accordion折叠面板 Accordion介绍 效果图 依赖于panel 用法 刷新折叠面板(Accordion Panel)内容 新添加面板 获取指定的面板(panel)索引 容器 ...

  4. easyui java1234_李炎恢jQuery EasyUI视频教程 下载

    李炎恢jQuery EasyUI视频教程  下载 01.[jQuery EasyUI]第1章 jQuery EasyUI入门 02.[jQuery EasyUI]第2章 使用EasyUI 03.[jQ ...

  5. 面板——卡片面板、常规折叠面板、手风琴折叠

    1. 卡片面板 2. 普通折叠面板 3. 手风琴面板 在普通面板上加 lay-accordion="" <%@ page language="java" ...

  6. JS动态修改页面EasyUI datebox不生效、EasyUI动态添加Class、EasyUI动态渲染解析解决方案

    JS动态修改页面EasyUI datebox不生效.EasyUI动态添加Class.EasyUI动态渲染解析解决方案 参考文章: (1)JS动态修改页面EasyUI datebox不生效.EasyUI ...

  7. JS+CSS打造仿QQ面板的三级折叠下拉菜单

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  8. 面板没了_LCD面板疯狂涨价 白菜价的55寸4K电视没了

    随着三星.LG等韩国公司陆续退出LCD面板行业,LCD面板这几个月也一改颓势,价格不断上涨,8月份直接涨了10%. 根据市场报价,OpenCell(不含背光模组的LCD面板)价格在8月份再次上涨,其中 ...

  9. 属性面板 和 对象库面板

    Xcode 中Interface Builder 工具 是一个功能强大的"所见即所得"开发工具.本文主要介绍属性面板 和  对象库面板 对象库面板: 提供了所有Cocoa Touc ...

最新文章

  1. pip如何安装whl
  2. (iOS-基本知识)int long NSInteger 入门与兼容问题讲解
  3. 解决navicat 导出excel数字为科学计数法问题
  4. android HttpClient,DefaultHttpClient,AbstractHttpClient之间关系
  5. Dart 异步编程之 Isolate 和事件循环
  6. Jupyter Notebook——设置远程服务器登陆
  7. ASCII码表在线查询进制转换
  8. Linux命令(七)Linux用户管理和修改文件权限
  9. ❤️《10个超级常用Python方法总结》复制即用丨小白捷径【文末赠书2本】❤️
  10. Nodejs系列课程,从入门到进阶帮你打通全栈
  11. android中button点击两次才响应onclick方法
  12. MySQL多线程并发调优
  13. 生活中的数学 —— 操场几何学
  14. PHP读取表格都是精度,php 小数精度问题
  15. mdf转mysql sqlyog_利用SQLyogEnt转移Mysql数据库_mysql
  16. opencv怎么2个摄像头_内脏脂肪过高怎么办?从2个方法入手,坚持3个月甩掉小肚腩...
  17. lintcode(507)摆动排序 II
  18. 良葛格学习笔记输入输入一章中的PushbackInputStream的补充
  19. 零基础转行学编程技术难吗?
  20. Ubuntu 16.04 安装GTX 1060 显卡驱动和CUDA 10.2

热门文章

  1. 51nod 1574 排列转换 codeforce584E. Anton and Ira
  2. 机场精细化管理_【管理提升|青海机场公司召开2018年精细化管理经验交流会】...
  3. 记事本代码Linux编译不了,Windows下记事本编辑的Shell脚本放到Linux下执行出错,格式问题(/bin/bash^M: bad interpreter: 没有那个文件或目录)...
  4. 滤波器的优点_数控精雕机在5G基站陶瓷滤波器领域的应用
  5. git概念、原理、使用
  6. 无线通信零基础学习记录(2)——GSM空中接口物理层的设计
  7. 开源自动化测试平台介绍一览
  8. TDC综述(一)——基于FPGA的TDC概述
  9. 苹果恢复出厂设置好吗_还原手机和恢复出厂设置一样吗?原来有这么大的区别...
  10. SQL语句的模糊查询