zoukankan      html  css  js  c++  java
  • 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
  • 相关阅读:
    一些技术摘选及随想
    新技术学习方法如何学习一门新编程语言(Lua)?
    什么时候该用ASSERT?
    MFC是否过时?如何学习MFC?
    Windows桌面开发者的必备软件
    Comet技术选择,论Is node.js best for Comet?
    关于C/C++内存管理一些乱讲
    debug
    C语言趣味题目
    CSS之简单的双引号
  • 原文地址:https://www.cnblogs.com/kimisme/p/5208215.html
Copyright © 2011-2022 走看看