jquery easyui Accordion的使用

<html>

<head>

    <script src="jquery-easyui/jquery.min.js"></script>

    <script src="jquery-easyui/jquery.easyui.min.js"></script>

    <script src="jquery-easyui/easyloader.js"></script>

    <script src="jquery-easyui/locale/easyui-lang-zh_CN.js"></script>

    <link rel="stylesheet" type="text/css" href="jquery-easyui/themes/default/easyui.css">

    <link rel="stylesheet" type="text/css" href="jquery-easyui/themes/icon.css" />

</head>

<body>



    <!--

    accordion的属性

    width:可伸缩面板所在容器的宽度

    <div class="easyui-accordion" data-options="width:200">

        <div title="Title1" ></div>

    </div>



    height:可伸缩面板所在容器的高度

    <div class="easyui-accordion" data-options="height:200">

        <div title="Title1" ></div>

    </div>



    fit:铺满整个屏幕

    <div class="easyui-accordion" data-options="fit:true">

        <div title="Title1" ></div>

    </div>



    border:为false时不显示边框,相反则显示,默认是true

    <div class="easyui-accordion" data-options="border:true">

        <div title="Title1" ></div>

    </div>



    animate:为false时没有折叠的动画效果,相反有动画效果,默认是true

    <div class="easyui-accordion" data-options="animate:true">

        <div title="Title1" ></div>

    </div>





    可伸缩面板属性

    selected:为true时,默认展开这个面板,相反是第一个默认展开,默认是false

    <div class="easyui-accordion" data-options="width:200,height:200">

        <div title="Title1" ></div>

        <div title="Title2" selected=true></div>

    </div>





    accordion的事件

    onSelect:当一个可伸缩面板被选择时触发。

    <div class="easyui-accordion" data-options="width:200,height:200,onSelect:aa">

        <div title="Title1" ></div>

        <div title="Title2" ></div>

    </div>



    onAdd:在一个新面板被添加时触发。

    <div class="easyui-accordion" data-options="width:200,height:200,onAdd:aa">

        <div title="Title1" ></div>

        <div title="Title2" ></div>

    </div>



    onBeforeRemove:在可伸缩面板被移除之前触发,返回false将取消移除。

    <div class="easyui-accordion" data-options="width:200,height:200,onBeforeRemove:aa">

        <div title="Title1" ></div>

        <div title="Title2" ></div>

    </div>



    onRemove:在一个可伸缩面板被移除时触发。

    <div class="easyui-accordion" data-options="width:200,height:200,onRemove:aa">

        <div title="Title1" ></div>

        <div title="Title2" ></div>

    </div>





    accordion的方法

    options:返回容器属性对象。

    panels:获取所有的面板。

    resize:重置可伸缩面板。

    getSelected:获取被选择的面板。

    getPanel:获取特定的可伸缩面板。

    select:选择特定的面板。

    add:添加一个先的可伸缩面板。

    remove:移除特定的面板。

    -->

    <div id="p" class="easyui-accordion" data-options="width:200,height:200,onBeforeRemove:aa">

        <div title="Title1"  icon="icon-sys"></div>

        <div title="Title2" ></div>

        <div title="Title3" ></div>

        <div title="Title4" ></div>

    </div>

    <input type="button" id="tian" value="添加">

    <input type="button" id="yi" value="移除">

<script>

    function aa(){

        alert('123');

    }

    //方法的使用

    $(function (){

        $("#tian").click(function (){

            $("#p").accordion('add',{

                title:"Title1"

            })

        })



        $("#yi").click(function (){

            $("#p").accordion('remove','Title1');

        })

    })

</script>

    

</body>

</html>



你可能感兴趣的:(jquery easyui)