EasyUI Window和Layout

资料来源：网络整理时间：2023/2/14 0:03:11 共计：3603 浏览

版式组件可以嵌套在窗口。我们可以创建复合版面窗口和事件而不用写任何JS代码.jquery-easyui框架在后台帮助我们进行渲染和改变工作。这个例子我们创建窗口，这个窗口有左右两部分。在左窗口，我们建立tree，在右窗口，我们建立tabs内容。

<div class="easyui-window" title="Layout Window" icon="icon-help" style="width:500px;height:250px;padding:5px;background: #fafafa;">

    <div class="easyui-layout" fit="true">

        <div region="west" split="true" style="width:120px;">

            <ul class="easyui-tree">

                <li>

                    <span>Library</span>

                    <ul>

                        <li><span>easyui</span></li>

                        <li><span>Music</span></li>

                        <li><span>Picture</span></li>

                        <li><span>Database</span></li>

                    </ul>

                </li>

            </ul>

        </div>

        <div region="center" border="false" border="false">

            <div class="easyui-tabs" fit="true">

                <div title="Home" style="padding:10px;">

                    jQuery easyui framework help you build your web page easily.

                </div>

                <div title="Contacts">

                    No contact data.

                </div>

            </div>

        </div>

        <div region="south" border="false" style="text-align:right;height:30px;line-height:30px;">

            <a class="easyui-linkbutton" icon="icon-ok" href="javascript:void(0)">Ok</a>

            <a class="easyui-linkbutton" icon="icon-cancel" href="javascript:void(0)">Cancel</a>

        </div>

    </div>

</div>

看上面的代码，我们只需使用HTML标记，然后复合版面和window就会显示。这个jquery-easyui框架，是容易和强大的。

版权说明：
本网站凡注明“广州京杭原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：EasyUI 创建对话框 | ·下一条：EasyUI 菜单按钮