第二百零一节,jQuery EasyUI,Accordion(分类)组件

jQuery EasyUI,Accordion(分类)组件

 

学习要点:

  1.加载方式

  2.容器属性

  3.事件列表

  4.方法列表

  5.面板属性

 

本节课重点了解 EasyUI 中 Accordion(选项卡)组件的使用方法,这个组件依赖于 Panel(面板)组件。

 

一.加载方式

class 加载方式

<div id="box" class="easyui-accordion"
     style="width:300px;height:200px;">
    <div title="标题1">内容1</div>
    <div title="标题2">内容2</div>
    <div title="标题3">内容3</div>
</div>

accordion()将一个符合规则的元素执行分类方法

JS 加载调用

$(function () {
    $('#box').accordion({
        //...
    });
});

 

 

二.容器属性,也就是最外层区块

width   number 分类容器的宽度。默认值 auto。

$(function () {
    $('#box').accordion({
        width:500,      //分类容器的宽度
        height:400      //分类容器的高度
    });
});

 

height   number 分类容器的高度。默认值 auto。

$(function () {
    $('#box').accordion({
        width:500,      //分类容器的宽度
        height:400      //分类容器的高度
    });
});

 

fit   boolean 如果设置为 true,分类容器大小将自适应父容器。默认值 false。

$(function () {
    $('#box').accordion({
        width:500,      //分类容器的宽度
        height:400,      //分类容器的高度
        fit:true        //如果设置为 true,分类容器大小将自适应父容器。默认值 false。
    });
});

 

border   boolean 定义是否显示边框。默认值 true。

$(function () {
    $('#box').accordion({
        width:500,      //分类容器的宽度
        height:400,      //分类容器的高度
        border:false     //定义是否显示边框。默认值 true。
    });
});

 

animate   boolean 定义在展开和折叠的时候是否显示动画效果。默认值 true。

$(function () {
    $('#box').accordion({
        width:500,      //分类容器的宽度
        height:400,      //分类容器的高度
        animate:false     //定义在展开和折叠的时候是否显示动画效果。默认值 true。
    });
});

 

multiple   boolean 如果为 true 时,同时展开多个面板。默认值 false。

$(function () {
    $('#box').accordion({
        width:500,      //分类容器的宽度
        height:400,      //分类容器的高度
        multiple:true   //如果为 true 时,同时展开多个面板。默认值 false。
    });
});

 

selected   number 设置初始化时默认选中的面板索引号。默认值0。默认展开

$(function () {
    $('#box').accordion({
        width:500,      //分类容器的宽度
        height:400,      //分类容器的高度
        selected:1   //设置初始化时默认选中的面板索引号。默认值0。
    });
});

 

 

三.事件列表

onSelect   title,index 在面板被选中的时候触发。

$(function () {
    $('#box').accordion({
        width:500,      //分类容器的宽度
        height:400,      //分类容器的高度
        selected:1,   //设置初始化时默认选中的面板索引号。默认值0。
        onSelect:function (title,index) {
            alert('在面板被选中的时候触发。');
            alert(title + ':' + '接收被选中的面板标题');
            alert(index + ':' + '接收被选中的面板索引');
        }
    });
});

 

onUnselect   title,index 在面板被取消选中的时候触发。

$(function () {
    $('#box').accordion({
        width:500,      //分类容器的宽度
        height:400,      //分类容器的高度
        selected:1,   //设置初始化时默认选中的面板索引号。默认值0。
        onUnselect:function (title,index) {
            alert('在面板被取消选中的时候触发。');
            alert(title + ':' + '接收被取消选中的面板标题');
            alert(index + ':' + '接收被取消选中的面板索引');
        }
    });
});

 

onAdd   title,index 在添加新面板的时候触发。

$(function () {
    $('#box').accordion({
        width:500,      //分类容器的宽度
        height:400,      //分类容器的高度
        selected:1,   //设置初始化时默认选中的面板索引号。默认值0。
        onAdd:function (title,index) {
            alert('在添加新面板的时候触发。');
            alert(title + ':' + '接收添加的面板标题');
            alert(index + ':' + '接收添加的面板索引');
        }
    });
    $('#box').accordion('add', {
        title: '新分类',
        closable: true,
        content: '123',
        collapsible: false,
        selected: false
    });
});

 

onBeforeRemove   title,index 在移除面板之前触发,返回 false 可以取消移除操作。

$(function () {
    $('#box').accordion({
        width:500,      //分类容器的宽度
        height:400,      //分类容器的高度
        selected:1,   //设置初始化时默认选中的面板索引号。默认值0。
        onBeforeRemove:function (title,index) {
            alert('在移除面板之前触发,返回 false 可以取消移除操作。');
            alert(title + ':' + '接收移除的面板标题');
            alert(index + ':' + '接收移除的面板索引');
        }
    });
    $('#box').accordion('remove', 0);
});

 

onRemove   title,index 在面板被移除后候触发。

$(function () {
    $('#box').accordion({
        width:500,      //分类容器的宽度
        height:400,      //分类容器的高度
        selected:1,   //设置初始化时默认选中的面板索引号。默认值0。
        onRemove:function (title,index) {
            alert('在面板被移除后候触发。');
            alert(title + ':' + '接收移除的面板标题');
            alert(index + ':' + '接收移除的面板索引');
        }
    });
    $('#box').accordion('remove', 1);
});

 

 

四.方法列表

options none 返回分类组件的属性对象。

$(function () {
    $('#box').accordion({
        width:500,      //分类容器的宽度
        height:400,      //分类容器的高度
        selected:1   //设置初始化时默认选中的面板索引号。默认值0。
    });
    alert($('#box').accordion('options'));   //返回分类组件的属性对象。
});

 

panels none 获取所有面板对象。

$(function () {
    $('#box').accordion({
        width:500,      //分类容器的宽度
        height:400,      //分类容器的高度
        selected:1   //设置初始化时默认选中的面板索引号。默认值0。
    });
    alert($('#box').accordion('panels'));   //获取所有面板对象
});

 

resize none 调整分类组件大小和布局。重要也就是分类变形后可以重置

$(function () {
    $('#box').accordion({
        width: 500,      //分类容器的宽度
        height: 400,      //分类容器的高度
        selected: 1   //设置初始化时默认选中的面板索引号。默认值0。
    });
    $('#box').accordion('resize');      //调整分类组件大小和布局。重要也就是分类变形后可以重置
});

 

getSelected none 获取选中的面板对象。

$(function () {
    $('#box').accordion({
        width: 500,      //分类容器的宽度
        height: 400,      //分类容器的高度
        selected: 1   //设置初始化时默认选中的面板索引号。默认值0。
    });
    alert($('#box').accordion('getSelected'));      // 获取选中的面板对象。
});

 

getSelections   none 获取所有选中的面板对象。

$(function () {
    $('#box').accordion({
        width: 500,      //分类容器的宽度
        height: 400,      //分类容器的高度
        selected: 1   //设置初始化时默认选中的面板索引号。默认值0。
    });
    alert($('#box').accordion('getSelections'));      // 获取所有选中的面板。
});

 

getPanel   which 获取指定的面板,'which'参数可以是面板的标题或者索引。

$(function () {
    $('#box').accordion({
        width: 500,      //分类容器的宽度
        height: 400,      //分类容器的高度
        selected: 1   //设置初始化时默认选中的面板索引号。默认值0。
    });
    alert($('#box').accordion('getPanel',2));      // 获取指定的面板,'which'参数可以是面板的标题或者索引。
});

 

getPanelIndex   panel 获取指定面板的索引。值是要获取的面板id

$(function () {
    $('#box').accordion({
        width: 500,      //分类容器的宽度
        height: 400,      //分类容器的高度
        selected: 1   //设置初始化时默认选中的面板索引号。默认值0。
    });
    alert($('#box').accordion('getPanelIndex','#pox'));      // 获取指定面板的索引。值是要获取的面板id
});

 

select   which 选择指定面板。'which'参数可以是面板标题或者索引。

$(function () {
    $('#box').accordion({
        width: 500,      //分类容器的宽度
        height: 400,      //分类容器的高度
        selected: 1   //设置初始化时默认选中的面板索引号。默认值0。
    });
    $('#box').accordion('select',2);   //选择指定面板。'which'参数可以是面板标题或者索引。
});

 

unselect   which 取消选择指定面板。'which'参数可以是面板标题或者索引。

$(function () {
    $('#box').accordion({
        width: 500,      //分类容器的宽度
        height: 400,      //分类容器的高度
        selected: 1   //设置初始化时默认选中的面板索引号。默认值0。
    });
    $('#box').accordion('unselect',1);   //取消选择指定面板。'which'参数可以是面板标题或者索引。
});

 

add   options添加一个新面板。在默认情况下,新增的面板会变成当前面板。如果要添加一个非选中面板,不要忘记将'selected'属性设置为 false。添加一个分类面板

因为分类组件继承了Panel(面板)组件,新增面板属性可以用(面板)组件属性,其他属性见,五.面板属性

$(function () {
    $('#box').accordion({
        width: 500,      //分类容器的宽度
        height: 400,      //分类容器的高度
        selected: 1   //设置初始化时默认选中的面板索引号。默认值0。
    });
    $('#box').accordion('add', {
        title: '新分类',
        // closable: true,
        content: '123',
        // collapsible: false,
        // selected: false
    });
});

 

remove   which 移除指定面板。'which'参数可以使面板的标题或者索引。

$(function () {
    $('#box').accordion({
        width: 500,      //分类容器的宽度
        height: 400,      //分类容器的高度
        selected: 1   //设置初始化时默认选中的面板索引号。默认值0。
    });
    $('#box').accordion('remove',0);    //移除指定面板。'which'参数可以使面板的标题或者索引。
});

 

 

$.fn.accordion.defaults 重写默认值对象。

$.fn.accordion.defaults.border = false;

 

 

五.面板属性

分类组件面板继承了 panel 属性,我们参考 panel 属性即可,对分类的面板同样有效。 并且提供了新增的两个属性。

selected boolean 如果设置为 true 将展开面板。

$(function () {
    $('#box').accordion({
        width: 500,      //分类容器的宽度
        height: 400,      //分类容器的高度
        selected: 1   //设置初始化时默认选中的面板索引号。默认值0。
    });
    $('#box').accordion('add', {
        title: '新分类',
        content: '123',
        collapsible: true,     //如果设置为 true 将显示折叠按钮。
        selected: true     //如果设置为 true 将展开面板。
    });
});

 


collapsible boolean 如果设置为 true 将显示折叠按钮。

 

$(function () {
    $('#box').accordion({
        width: 500,      //分类容器的宽度
        height: 400,      //分类容器的高度
        selected: 1   //设置初始化时默认选中的面板索引号。默认值0。
    });
    $('#box').accordion('add', {
        title: '新分类',
        content: '123',
        collapsible: true,     //如果设置为 true 将显示折叠按钮。
        selected: true     //如果设置为 true 将展开面板。
    });
});

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值