logo

EasyUI 创建折叠版面2012-07-08

这个教程中,我们学习关于easyui可折叠性。可折叠包括一系列面板。所有面板头是全部可见的,但是在一个时期内只有一个面板的body内容是可见的。当用户点击面板头,body内容变为可见其他面板body内容变得不可见。
<div class="easyui-accordion" style="width:300px;height:200px;">

    <div title="About Accordion" icon="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" icon="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>

我们建立3个面板,第三个面板内容是一个树状菜单。
\ \

相关话题

热门搜索

  • EasyUI
  • 折叠版面

扫描二维码分享话题