当前位置:首页 > 开发 > Web前端 > Jquery > 正文

jquery easyui学习教程-accordion

发表于: 2012-05-08   作者:bozch   来源:转载   浏览次数:
摘要: jquery easyui中的accordion一般用来做分组,如菜单的分组、表单的分组等。(easyui 1.2.6)   初始化的两种方式: 方式一:        <div id="aa" class="easyui-accordion" border="fa

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

 

初始化的两种方式:

方式一:

       <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

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
jQuery EasyUI是一组基于jQuery的UI插件集合体,而jQuery EasyUI的目标就是帮助web开发者更轻松的打
accordion插件已经有了,但觉得还是要再写一个,作为easyui framework的一部分,目标是使之更易使用
jquery easyui 的特点以及好处,我认为是可以结合html标签和js代码来开发页面,符合以前的开发习惯。
1、 使用步骤 ① 在项目的WebRoot目录下创建js文件夹,导入easy-ui的js包; ② 在HTML页面引入easy
三、设定或定制各种功能 1、增加分页 创建DataGrid数据表格 设置“url”属性,用来装入远端服务器数
转自:http://www.kwstu.com/ArticleView/kwstu_20139413501290 送给大家一个非常好的后台布局模板
jQuery EasyUI教程之datagrid应用(一)   一、利用 jQuery EasyUI 的 DataGrid 创建 CRUD 应用
jQuery EasyUI教程之datagrid应用(二)   二、DataGrid的扩展应用 上一份教程我们创建的一个CRUD
jQuery EasyUI教程之datagrid应用(三) 三、设定或定制各种功能 1、增加分页 创建DataGrid数据表格
jQuery EasyUI教程之datagrid应用(二)   二、DataGrid的扩展应用 上一份教程我们创建的一个CRUD
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号