zoukankan      html  css  js  c++  java
  • 第二百零一节,jQuery EasyUI,Accordion(分类)组件

    jQuery EasyUI,Accordion(分类)组件

     

    学习要点:

      1.加载方式

      2.容器属性

      3.事件列表

      4.方法列表

      5.面板属性

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

    一.加载方式

    class 加载方式

    <div id="box" class="easyui-accordion"
         style="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({
            500,      //分类容器的宽度
            height:400      //分类容器的高度
        });
    });

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

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

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

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

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

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

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

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

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

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

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

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

    三.事件列表

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

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

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

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

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

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

    四.方法列表

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

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

    panels none 获取所有面板对象。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

    $(function () {
        $('#box').accordion({
             500,      //分类容器的宽度
            height: 400,      //分类容器的高度
            selected: 1   //设置初始化时默认选中的面板索引号。默认值0。
        });
        $('#box').accordion('add', {
            title: '新分类',
            content: '123',
            collapsible: true,     //如果设置为 true 将显示折叠按钮。
            selected: true     //如果设置为 true 将展开面板。
        });
    });
  • 相关阅读:
    考研408大纲梳理(持续更新)
    学习就是把抽象变具体,模糊变清楚,组合件拆单件的过程。
    20210402学习笔记---眼看这是要浪费一下午?(要放假了心里跟长草似的 浮躁啥自己也不知道 假期不还是学习么)不行,赶紧学。
    20210401学习笔记--概念必须都弄懂,你可能很熟悉,但你却不知道他的定义、为什么用它不用别的,这个不清楚学习就很难。(另外学习要把握重点,已经会的都不需要记)
    20210401日记
    20210331日记
    20210330学习笔记--第1天目标是刷完HadoopDay1 Day2(计划40天学完大数据)
    20210330日记
    这个老的大数据视频,用的工具还是Eclipse,不照着视频做,就各种报错出问题,也不知道咋解决。还是买个新点的视频看。
    20210329学习笔记--看来得找个更新的视频课了(用IDEA),一步一步跟着做了,而且每天要定量,必须完成多少。目前进度完全不行。
  • 原文地址:https://www.cnblogs.com/adc8868/p/6652080.html
Copyright © 2011-2022 走看看