分类面板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="width: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>

 

 posted on 2017-03-04 18:40  夏末秋萍  阅读(231)  评论(0)    收藏  举报