热门标签 | 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字符串无法解析。本文将探讨可能的原因并提供解决方案。 ... [详细]
  • 本文探讨了Web开发与游戏开发之间的主要区别,旨在帮助开发者更好地理解两种开发领域的特性和需求。文章基于作者的实际经验和网络资料整理而成。 ... [详细]
  • 本文将详细介绍如何在ThinkPHP6框架中实现多数据库的部署,包括读写分离的策略,以及如何通过负载均衡和MySQL同步技术优化数据库性能。 ... [详细]
  • 深入理解ExtJS:从入门到精通
    本文详细介绍了ExtJS的功能及其在大型企业前端开发中的应用。通过实例和详细的文件结构解析,帮助初学者快速掌握ExtJS的核心概念,并提供实用技巧和最佳实践。 ... [详细]
  • SpringMVC RestTemplate的几种请求调用(转)
    SpringMVCRestTemplate的几种请求调用(转),Go语言社区,Golang程序员人脉社 ... [详细]
  • cJinja:C++编写的轻量级HTML模板引擎
    本文介绍了cJinja,这是一个用C++编写的轻量级HTML模板解析库。它利用ejson来处理模板中的数据替换(即上下文),其语法与Django Jinja非常相似,功能强大且易于学习。 ... [详细]
  • 深入解析Spring Boot自动配置机制
    本文旨在深入探讨Spring Boot的自动配置机制,特别是如何利用配置文件进行有效的设置。通过实例分析,如Http编码自动配置,我们将揭示配置项的具体作用及其背后的实现逻辑。 ... [详细]
  • 本文详细探讨了在微服务架构中,使用Feign进行远程调用时出现的请求头丢失问题,并提供了具体的解决方案。重点讨论了单线程和异步调用两种场景下的处理方法。 ... [详细]
  • 本文详细介绍了Java集合框架中的Collection体系,包括集合的基本概念及其与数组的区别。同时,深入探讨了Comparable和Comparator接口的区别,并分析了各种集合类的底层数据结构。最后,提供了如何根据需求选择合适的集合类的指导。 ... [详细]
  • JESD204C 入门:第2部分新特性及其内容
    本文内容来自ADI的技术文章,作者:DelJones原网址为:https:www.analog.comcnanalog-dialoguea ... [详细]
  • Java与JSON互转:实现JSON到Java对象及Java对象到JSON的转换
    本文详细介绍了如何在Java中实现JSON数据与Java对象之间的相互转换,包括代码示例和常见问题解决方法。 ... [详细]
  • Python数据类型6 字典
    字典Python的字典数据类型是基于hash散列算法实现的,采用键值对(key:value)的形式,根据key的值计算value的地址,具有非常快的查取和插入速度。但它是无序的,包 ... [详细]
  • 本文详细介绍了如何正确安装Java EE SDK,并解决在安装过程中可能遇到的问题,特别是关于servlet代码在Apache Tomcat 10中无法运行的情况。 ... [详细]
  • 微信小程序中实现位置获取的全面指南
    本文详细介绍了如何在微信小程序中实现地理位置的获取,包括通过微信官方API和腾讯地图API两种方式。文中不仅涵盖了必要的准备工作,如申请开发者密钥、下载并配置SDK等,还提供了处理用户授权及位置信息获取的具体代码示例。 ... [详细]
  • 本文详细介绍了 Kubernetes 集群管理工具 kubectl 的基本使用方法,涵盖了一系列常用的命令及其应用场景,旨在帮助初学者快速掌握 kubectl 的基本操作。 ... [详细]
author-avatar
勇敢的柯柯_j
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有