网博开发者社区

 找回密码
 立即注册
搜索
查看: 60|回复: 0

jQuery EasyUI 入门(11)

[复制链接]

34

主题

41

帖子

152

积分

老师

积分
152
发表于 2017-7-25 08:13:32 | 显示全部楼层 |阅读模式
Accordion(分类)
使用$.fn.accordion.defaults重写默认值对象。
分类空间允许用户使用多面板,但在同一时间只会显示一个。每个面板都内建支持展开和折叠功能。点击一个面板的标题将会展开或折叠面板主体。面板内容可以通过指定的'href'属性使用ajax方式读取面板内容。用户可以定义一个被默认选中的面板,如果未指定,那么第一个面板就是默认的。

依赖关系 使用案例创建分类
通过标签创建分类,给<div/>标签添加一个名为'easyui-accordion'的类ID。


  • <div id="aa" class="easyui-accordion" style="width:300px;height:200px;">
  •     <div title="Title1" data-options="iconCls:'icon-save'" style="overflow:auto;padding:10px;">
  •         <h3 style="color:#0099FF;">Accordion for jQuery</h3>
  •         <p>Accordion is a part of easyui framework for jQuery.
  •         It lets you define your accordion component on web page more easily.</p>
  •     </div>
  •     <div title="Title2" data-options="iconCls:'icon-reload',selected:true" style="padding:10px;">
  •         content2
  •     </div>
  •     <div title="Title3">
  •         content3
  •     </div>
  • </div>

        <div id="aa" class="easyui-accordion" style="width:300px;height:200px;">                <div title="Title1" data-options="iconCls:'icon-save'" style="overflow:auto;padding:10px;">                        <h3 style="color:#0099FF;">Accordion for jQuery</h3>                        <p>Accordion is a part of easyui framework for jQuery.                         It lets you define your accordion component on web page more easily.</p>                </div>                <div title="Title2" data-options="iconCls:'icon-reload',selected:true" style="padding:10px;">                        content2                </div>                <div title="Title3">                        content3                </div>        </div>
我们可以更改或修改面板的一些功能以后再重新创建它。


  • $('#aa').accordion({
  •     animate:false
  • });

        $('#aa').accordion({                animate:false        });
刷新分类面板内容
调用'getSelected'方法获取当前面板,此外我们还可以调用'refresh'方法重新载入新内容。


  • var pp = $('#aa').accordion('getSelected'); // get the selected panel
  • if (pp){
  •     pp.panel('refresh','new_content.php');  // call 'refresh' method to load new content
  • }

        var pp = $('#aa').accordion('getSelected');        // get the selected panel        if (pp){                pp.panel('refresh','new_content.php');        // call 'refresh' method to load new content        }

容器属性
属性名属性值类型描述默认值
widthnumber分类容器的宽度。auto
heightnumber分类容器的高度。auto
fitboolean如果设置为true,分类容器大小将自适应父容器。false
borderboolean定义是否显示边框。true
animateboolean定义在展开和折叠的时候是否显示动画效果。true

面板属性
分类面板属性继承自panel(面板),分类面板新增的属性如下:

属性名属性值类型描述默认值
selectedboolean如果设置为true将展开面板。false

事件
事件名事件参数描述
onSelecttitle,index在面板被选中的时候触发。
onAddtitle,index在添加新面板的时候触发。
onBeforeRemovetitle,index在移除面板之前触发,返回false可以取消移除操作。
onRemovetitle,index在面板被移除的时候触发。

方法
方法名方法参数描述
optionsnone返回分类组件的属性。
panelsnone获取所有面板。
resizenone调整分类组件大小。
getSelectednone获取选中的面板。
getPanelwhich获取指定的面板,'which'参数可以是面板的标题或者索引。
getPanelIndexpanel获取指定面板的索引。(该方法自1.3版开始可用) 以下示例显示如何获取选中面板的索引。
var p = $('#aa').accordion('getSelected');if (p){        var index = $('#aa').accordion('getPanelIndex', p);        alert(index);}
selectwhich选择指定面板。'which'参数可以是面板标题或者索引。
addoptions添加一个新面板。在默认情况下,新增的面板会变成当前面板。如果要添加一个非选中面板,不要忘记将'selected'属性设置为false。 代码示例:
$('#aa').accordion('add', {        title: '新标题',        content: '新内容',        selected: false});
removewhich移除指定面板。'which'参数可以使面板的标题或者索引。


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|网博开发者社区 ( 苏ICP备05021715号-1 )

GMT+8, 2017-8-21 09:19 , Processed in 0.084884 second(s), 26 queries .

Powered by Discuz! X3.1

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表