热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

jqueryeasyui学习教程-accordion

jqueryeasyui中的accordion一般用来做分组,如菜单的分组、表单的分组等。(easyui1.2.6)

jquery easyui中的accordion一般用来做分组,如菜单的分组、表单的分组等。(easyui 1.2.6)

 

初始化的两种方式:

方式一:

      

              

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


推荐阅读
  • 在PHP后端开发中遇到一个难题:通过第三方类文件发送短信功能返回的JSON字符串无法解析。本文将探讨可能的原因并提供解决方案。 ... [详细]
  • 本文介绍了如何使用JavaScript的Fetch API与Express服务器进行交互,涵盖了GET、POST、PUT和DELETE请求的实现,并展示了如何处理JSON响应。 ... [详细]
  • 深入解析Serverless架构模式
    本文将详细介绍Serverless架构模式的核心概念、工作原理及其优势。通过对比传统架构,探讨Serverless如何简化应用开发与运维流程,并介绍当前主流的Serverless平台。 ... [详细]
  • 深入理解ExtJS:从入门到精通
    本文详细介绍了ExtJS的功能及其在大型企业前端开发中的应用。通过实例和详细的文件结构解析,帮助初学者快速掌握ExtJS的核心概念,并提供实用技巧和最佳实践。 ... [详细]
  • SpringMVC RestTemplate的几种请求调用(转)
    SpringMVCRestTemplate的几种请求调用(转),Go语言社区,Golang程序员人脉社 ... [详细]
  • 当unique验证运到图片上传时
    2019独角兽企业重金招聘Python工程师标准model:public$imageFile;publicfunctionrules(){return[[[na ... [详细]
  • 本文档汇总了Python编程的基础与高级面试题目,涵盖语言特性、数据结构、算法以及Web开发等多个方面,旨在帮助开发者全面掌握Python核心知识。 ... [详细]
  • 本文提供了多种方法来计算给定年份和月份的起始日和结束日,并进一步探讨了如何根据年、月、周获取特定周的起始日和结束日。 ... [详细]
  • 近期我们开发了一款包含天气预报功能的万年历应用,为了满足这一需求,团队花费数日时间精心打造并测试了一个稳定可靠的天气API接口,现正式对外开放。 ... [详细]
  • cJinja:C++编写的轻量级HTML模板引擎
    本文介绍了cJinja,这是一个用C++编写的轻量级HTML模板解析库。它利用ejson来处理模板中的数据替换(即上下文),其语法与Django Jinja非常相似,功能强大且易于学习。 ... [详细]
  • 深入解析Spring Boot自动配置机制
    本文旨在深入探讨Spring Boot的自动配置机制,特别是如何利用配置文件进行有效的设置。通过实例分析,如Http编码自动配置,我们将揭示配置项的具体作用及其背后的实现逻辑。 ... [详细]
  • 本文探讨了2019年前端技术的发展趋势,包括工具化、配置化和泛前端化等方面,并提供了详细的学习路线和职业规划建议。 ... [详细]
  • 本文详细探讨了在微服务架构中,使用Feign进行远程调用时出现的请求头丢失问题,并提供了具体的解决方案。重点讨论了单线程和异步调用两种场景下的处理方法。 ... [详细]
  • Java与JSON互转:实现JSON到Java对象及Java对象到JSON的转换
    本文详细介绍了如何在Java中实现JSON数据与Java对象之间的相互转换,包括代码示例和常见问题解决方法。 ... [详细]
  • Python数据类型6 字典
    字典Python的字典数据类型是基于hash散列算法实现的,采用键值对(key:value)的形式,根据key的值计算value的地址,具有非常快的查取和插入速度。但它是无序的,包 ... [详细]
author-avatar
mobiledu2502883483
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有