zoukankan      html  css  js  c++  java
  • 分类面板accordion

    <!DOCTYPE html>
    <html>
    <head>
    <title>jQuery Easy UI</title>
    <meta charset="UTF-8" />
    <script type="text/javascript" src="C:/Users/秋萍/Desktop/easyui/jquery-easyui-1.5.1/jquery.min.js"></script>
    <script type="text/javascript" src="C:/Users/秋萍/Desktop/easyui/jquery-easyui-1.5.1/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="C:/Users/秋萍/Desktop/easyui/jquery-easyui-1.5.1/locale/easyui-lang-zh_CN.js" ></script>
    <link rel="stylesheet" type="text/css" href="C:/Users/秋萍/Desktop/easyui/jquery-easyui-1.5.1/themes/default/easyui.css" />
    <link rel="stylesheet" type="text/css" href="C:/Users/秋萍/Desktop/easyui/jquery-easyui-1.5.1/themes/icon.css" />
    <script type="text/javascript">
        $(function(){
            $("#box1").accordion({
                width : 200,
                height : 300,
                border : true,
                animate : true, //是否显示动画效果
                multiple : true,
                selected : 2,//设置初始化时默认选中的面板的索引值
                onSelect : function(title,index){
                    console.log("面板被选中时触发--"+index+"--"+title);
                },
                onUnselect : function(title,index){
                    console.log("面板取消被选中时触发--"+index+"--"+title);
                },
                onAdd : function(title,index){
                    console.log("在添加面板时触发--"+index+"--"+title);
                },
                onBeforeRemove : function(title,index){
                    console.log("在移除面板之前触发");
                },
                onRemove : function(title,index){
                    console.log("在移除面板时触发");
                }
            });
            //添加新的分类
            $("#box1").accordion("add",{
                title :"新添加的分类",
                closable : true,
                selected : false,
                content : "新添加的内容--",
                collapsible : false,// 设置 是否显示折叠按钮
            });    
            //返回 分类组件的属性
            console.log($("#box1").accordion("options"));
            //返回所有分类的面板
            console.log($("#box1").accordion("panels"));
            // 调整分类面板布局和大小
            $(document).click(function(){
            
                $("#box1").accordion().css("display","block");
                $("#box1").accordion("resize");
            });
            //获取选中的分类面板
            console.log($("#box1").accordion("getSelected"));
            //获取分类面板中所有的分类面板
            console.log(1111);
            console.log($("#box1").accordion("getSelections"));
            //选择指定下标的分类面板
            $("#box1").accordion("select",0);
            //取消选中指定下标的分类面板
            $("#box1").accordion("unselect",0);
            //移除选中指定下标的分类面板
            $("#box1").accordion("remove",0);
        });
    </script>
    </head>
    <body>
    <div id="box" class="easyui-accordion"
    style="300px;height:500px;">
        <div title="accordion1">accordion1</div>
        <div title="accordion2">accordion1</div>
        <div title="accordion3">accordion1</div>
    </div>
    <div id="box1">
        <div title="accordion1">accordion1</div>
        <div title="accordion2">accordion1</div>
        <div title="accordion3">accordion1</div>
    </div>
    <div id="box2">
        zzz
    </div>
    </body>
    </html>
  • 相关阅读:
    AbstractRoutingDataSource动态数据源切换,AOP实现动态数据源切换
    SPEC CPU——简介和使用
    Python——sklearn 中 Logistics Regression 的 coef_ 和 intercept_ 的具体意义
    伯努利分布的最大似然估计(最小化交叉熵、分类问题)
    Python关于%matplotlib inline
    MySQL——告别慢SQL,如何去写一手好SQL
    HiveSQL——row_number() over() 使用
    Python——Python缓存技术
    solr——Lucene打分公式的数学推导
    solr——影响Lucene对文档打分的四种方式
  • 原文地址:https://www.cnblogs.com/m01qiuping/p/6502211.html
Copyright © 2011-2022 走看看