EasyUI 窗口 – 窗口与布局

🌙
手机阅读
本文目录结构
axihe

EasyUI 窗口 - 窗口与布局

Layout 组件可以内嵌在窗口(window)中。我们可以创建一个复杂的布局窗口,甚至不需要写任何的 js 代码。jquery-easyui 框架帮我们在后台做渲染和调整尺寸。

作为一个实例,我们创建一个窗口(window),它包含两个部分,一个放置在左边一个放置在右边。在窗口(window)的左边我们创建一个树形菜单(tree),在窗口(window)的右边我们创建一个 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 框架,简单而强大


AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili 和抖音。

关注我: Github / 知乎

如果你加我的私人微信,麻烦写上您的 称呼,所在地区,职业,方便我备注,谢谢


本站的微信公众号

阿西河前端教程

Anbang

安邦的私人微信

微信号: yaolushan

Anbang

Bilibili(B站)

朱安邦

Anbang