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 将展开面板。
        });
    });
  • 相关阅读:
    Windows Store App 主题动画
    Windows Store App 过渡动画
    Windows Store App 控件动画
    Windows Store App 近期访问列表
    Windows Store App 文件选取器
    Windows Store App 访问应用内部文件
    Windows Store App 用户库文件分组
    Windows Store App 获取文件及文件夹列表
    Windows Store App 用户库文件夹操作
    Windows Store App 用户库文件操作
  • 原文地址:https://www.cnblogs.com/adc8868/p/6652080.html
Copyright © 2011-2022 走看看