教程集 www.jiaochengji.com
教程集 >  jQuery  >  jquery 教程  >  正文 jquery easyui学习教程之accordion

jquery easyui学习教程之accordion

发布时间:2015-12-31   编辑:jiaochengji.com
本文介绍了jquery easyui教程之accordion的用法,jquery easyui中的accordion一般用来做分组,如菜单的分组、表单的分组等,感兴趣的朋友参考下。

初始化的两种方式:
方式一:
 

复制代码 代码示例:
<div id="aa" class="easyui-accordion" border="false" style="width:700px;height:300px;">
 <div title="first Title" border="false">
content first
 </div>
 <div title="second Title" border="true">
content content
 </div>
</div>

方式二:
html代码:
 

复制代码 代码示例:
<div id="aa" border="false"></div>
 

script代码:
 

复制代码 代码示例:
$("#aa").accordion({width:700,height:300});
 

说明:如果使用方式二进行组件的初始化,那么accordion的属性是怎样应用的呢?
属性有jquery easyui本身对accordion的默认配置($.fn.accordion.defaults)
A,其次是在div标签中的属性
B,最后是在script中配置的属性
C;优先级顺序是C->B->A,优先级高的属性优先被应用,优先级低的则会被覆盖。
 
属性介绍(属性既可以作为标签的属性配置,也可以作为json对象属性配置):
 

width:"auto":设置accordion的宽度,默认值为auto
  height:"auto":设置accordion的高度,默认值为auto
  fit:false:是否自动填充父容器,默认值为false,
  border:true:是否显示边框,默认值为true,即显示边框。此属性和上边的fit属性都依赖于panel,即accordion是依赖于panel实现的,可以理解为继承了panel。
  animate:true:再点击accordion时,是否应用动画效果,默认为使用。

事件介绍:
 

onSelect:在单击选择某一个面版的时候触发此事件。
  onAdd:添加面板的时候触发此事件。
  onBeforeRemove:在删除某个面版之前的时候,触发此事件。
  onRemove:删除面板触发此事件。

方法介绍:
1、 options:获取当前accordion的配置属性值;
 

复制代码 代码示例:
var opts = $("#accordionId").accordion("options");
opts.accordion属性:opts.width、opts.height,.......

2、panels:获取所有的accordion面板;
 

var panels =  $("#accordionId").accordion("panels");
返回的是panel数组,数组中个每个元素都可以作为单个panel对待,而且可以应用panel中的属性、方法和事件。例如:panels[1].panel('options');获取panel的属性。

3、resize:改变accordion的大小;
持续完善中。

4、getSelected:获取被选中的面版;
5、getPanel:获取某个面板;
6、select:选择某个accordion面板
7、add:添加一个面板;
8、remove:删除某一个面板;
accordion方法的使用方式和用jquery初始化accordion组件的方式类似,不同之处就是第一个参数如果为object对象,则是初始化accordion组件或者修改已有的accordion属性,如果为字符串,则是调用accordion的方法。

您可能感兴趣的文章:
jquery easyui学习教程之accordion
精心挑选的12款优秀的基于jQuery的手风琴效果插件和教程
jQuery卷帘插件 Accordion jQuery Plugin
初试jQuery EasyUI 使用介绍
jquery easyui easyui-datetimebox 取消用户输入
jquery图片上下tab切换效果
Jquery easyui入门教程(1)
Jquery easyui之控件参数传递方法
jquery easyui通过class方式设置dialog
jquery easyui表单重置扩展思路

关键词: easyui  jquery easyui   
[关闭]
~ ~