使用easyUI创建折叠面板

@author YHC

在这个教程中,你会学习到关于easyuiAccordion,Accordion 包含一个panel的集合,所有panel的header(头部)将显示,但是一次仅仅只有一个panel的body内容显示,当用户点击panel的头部(header),那个panel的内容将成为显示,其余的body内容将成为隐藏.

查看示例 Demo

我们将创建3个panel,第三个panel包含一个tree菜单.

<div class="easyui-accordion" style="width:300px;height:200px;">  
    <div title="About Accordion" iconCls="icon-ok" style="overflow:auto;padding:10px;">  
        <h3 style="color:#0099FF;">Accordion for jQuery</h3>  
        <p>Accordion is a part of easyui framework for jQuery. It lets you define your accordion component on web page more easily.</p>  
    </div>  
    <div title="About easyui" iconCls="icon-reload" selected="true" style="padding:10px;">  
        easyui help you build your web page easily  
    </div>  
    <div title="Tree Menu">  
        <ul id="tt1" class="easyui-tree">  
            <li>  
                <span>Folder1</span>  
                <ul>  
                    <li>  
                        <span>Sub Folder 1</span>  
                        <ul>  
                            <li><span>File 11</span></li>  
                            <li><span>File 12</span></li>  
                            <li><span>File 13</span></li>  
                        </ul>  
                    </li>  
                    <li><span>File 2</span></li>  
                    <li><span>File 3</span></li>  
                </ul>  
            </li>  
            <li><span>File2</span></li>  
        </ul>  
    </div>  
</div>  

下载 EasyUI 示例:

easyui-accordion-demo.zip