• EasyUI系列学习(十一)-Accordion(分类)


    一、加载

    1.class加载

    <div class="easyui-accordion" style="300px;height:200px">
        <div title="accordion1">accordion1</div>
        <div title="accordion2">accordion2</div>
        <div title="accordion3">accordion3</div>
    </div>
    2.js加载
    <div id="acdn" style="300px;height:200px">
        <div title="accordion1">accordion1</div>
        <div title="accordion2">accordion2</div>
        <div title="accordion3">accordion3</div>
    </div>
    <script>
        $(function () {
            $("#acdn").accordion({});
        });
    </script>

    生成的代码

    image

    二、属性

    <div id="acdn">
        <div title="accordion1">accordion1</div>
        <div title="accordion2">accordion2</div>
        <div title="accordion3">accordion3</div>
    </div>
    <script>
        $(function () {
            $("#acdn").accordion({
                 300,
                height: 200,
                border: true,
                //fit:true,
                //animate:true,
                //同时展开多个面板
                multiple: true,
                selected: 1
            });
        });
    </script>

    三、事件

    <div id="acdn">
        <div title="accordion1">accordion1</div>
        <div title="accordion2">accordion2</div>
        <div title="accordion3">accordion3</div>
    </div>
    <script>
        $(function () {
            $("#acdn").accordion({
                 300,
                height: 200,
                onSelect: function (title, index) {
                    console.log(title + "," + index);
                },
                onUnselect: function (title, index) {
                    console.log(title + ":" + index);
                },
                onAdd: function (title, index) {
                    console.log(title + ":" + index);
                },
                onBeforeRemove: function (title, index) {
                    console.log(title + ":" + index + "");
                },
                onRemove: function (title, index) {
                    console.log(title + ":" + index + "");
                },
            });
        });
    </script>

    四、方法

    image

    五、新增属性

    因为分类组件继承了panel属性,其具有selected和collapsible两个属性

    更多精彩内容请看:http://www.cnblogs.com/2star
  • 相关阅读:
    一款前端文件上传工具
    聊一聊最近找工作的感受
    神秘的计算机网络----(1)
    月下无限连?拒绝无休止switch!
    计算机网络---序
    验证码识别
    两数之和
    Sanic框架基础之解决CORS跨域
    Sanic框架进阶之实现异步缓存组件
    asyncio异步模块的21个协程编写实例
  • 原文地址:https://www.cnblogs.com/kimisme/p/5208215.html
Copyright © 2020-2023  润新知