当前位置:  编程技术>jquery

jquery easyui学习教程之accordion

    来源: 互联网  发布时间:2014-10-07

    本文导语:  初始化的两种方式: 方式一:   代码示例:   content first     content content   方式二: html代码:   代码示例:   script代码:   代码示例: $("#aa").accordion({width:700,height:300});   说明:如果使用方式二进行组件的初始...

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

代码示例:

 

content first
 

 

content content
 

方式二:
html代码:
 

代码示例:

 

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的方法。


    
 
 
 
本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • jquery使用jquery.zclip插件复制对象的实例教程
  • jquery教程ajax请求json数据示例
  • Jquery easyui入门教程(1)
  • Jquery插件编写简明教程
  • jquery教程限制文本框只能输入数字和小数点示例分享
  • Jquery 属性attr()用法教程
  • jquery动画特效,jquery动画实例教程
  • jQuery定位跳转插件(jquery.scrollto.js)的使用教程
  • jquery 表单插件的使用教程
  • jquery基础教程之数组使用详解
  • jQuery中jcrop插件截图实例教程
  • jQuery插件开发详细教程
  • jquery 使用简明教程
  • jquery基础教程之deferred对象使用方法
  • 通过javascript库JQuery实现页面跳转功能代码
  • jQuery鼠标动画插件 jquery-ahover
  • jQuery概述,代码举例及最新版下载
  • jQuery向导插件 Jquery Wizard Plugin
  • Jquery操作html复选框checkbox:全选,全不选和反选
  • jQuery圆角插件 jQuery Corners
  • struts+spring+hibernate+jquery实现分页功能的几个基本类介绍(异步加载)
  • jQuery相册插件 jQuery.popeye
  • jQuery UI组件 jQuery UI
  • jQuery右键菜单插件 jQuery ContextMenu
  • jQuery分页插件 Pagination jQuery Plugin
  • jQuery日历插件 jQuery Week Calendar
  • jQuery的中文日历插件 jQuery.datePickerCn
  • jQuery实现CSS3动画效果的插件 jQuery Transit
  • jQuery的CSV插件 jQuery CSV
  • jQuery的气泡提示插件 jquery.ns_bub.js
  • jQuery气泡提示插件 jquery-rollover-tooltip


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3