博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
easyUI Accordion
阅读量:5098 次
发布时间:2019-06-13

本文共 2304 字,大约阅读时间需要 7 分钟。

@author  YHC

覆盖默认值$.fn.accordion.defaults

accordion允许你提供提供多个panel每次显示一个,所有的内置的panel都内置支持展开(expanding)和折叠(collapsing),点击一个panel的头部展开或者折叠

这个panel的body,panel的内容可以通过ajax加载,通过一个特定的"href"属性.用户可以定义一个panel让其选中,如果没有定义,第一个panel是默认的.

使用示例

创建Accordion
通过标记创建accordion,添加'
easyui-accordion'样式给div标记.

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'); // 得到选中panelif (pp){      pp.panel('refresh','new_content.php');  // 调用'refresh'方法加载新的数据}

容器选项

Name Type Description Default
width number accordion容器宽度 . auto
height number accordion容器高度. auto
fit boolean 设置为true,设置accordion容器大小适应它父容器的大小. false
border boolean 决定是否显示border. true
animate boolean 决定是否显示动画效果当展开或关闭panel的时候. true

Panel 选项

  accordion panel选项是继承自panel,下面是新增属性:

Name Type Description Default
selected boolean 设置为true将展开该panel. false

事件

Events

Name Parameters Description
onSelect title,index 当panel被选中的时候触发.
onAdd title,index 当一个新的panel添加进来的时候触发.
onBeforeRemove title,index 在一个panel被移除之前触发,该方法返回false将取消移除动作.
onRemove title,index 当一个panel被移除之后触发.

方法

Name Parameter Description
options none 返回accordion的options选项.
panels none 得到所有的panel.
resize none 重新调整 accordion大小.
getSelected none 得到当前选中的panel.
getPanel which 得到特定的panel.这个'which'参数可以是panel的title(标题)或者是index(下标).
getPanelIndex panel 得到特定的panel的下标.这个方法从1.3版本开始可用.

下面的示例代码展示如何得到一个选中的panel的下标(index).

var p = $('#aa').accordion('getSelected');if (p){	var index = $('#aa').accordion('getPanelIndex', p);	alert(index);}
select which 选择一个特定的 panel. 这个'which'参数可以是panel的 标题(title)或者是下标(index).
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).

    以上如果有错误信息,请指出,thanks!

转载于:https://www.cnblogs.com/javaexam2/archive/2012/07/31/2632662.html

你可能感兴趣的文章
java解决跨域
查看>>
css scroll bug
查看>>
[编织消息框架][JAVA核心技术]动态代理应用8-IRpcReceive实现
查看>>
由一个经典布局问题引发的思考
查看>>
vue 字符串长度控制显示的字数超出显示省略号
查看>>
vim常用命令
查看>>
欧几里德算法(模板)
查看>>
oracle 11g 压缩数据文件
查看>>
opencv2411配置
查看>>
【洛谷P1061 Jam的计数法】搜索
查看>>
Android studio 安装apk时报错:INSTALL_FAILED_NO_MATCHING_ABIS: Failed to extract native libraries...
查看>>
20. 多态
查看>>
pip国内源
查看>>
docker 从本地拷贝文件
查看>>
VS 2013使用ReportViewer 提示An error occurred during local report processing异常处理
查看>>
protobuf 协议 windows 下 java 环境搭建
查看>>
hacker入门篇——相关书籍
查看>>
10大逆向思维的测试方法
查看>>
(转)VS2010中出现无法嵌入互操作类
查看>>
HTTP状态码
查看>>