47EasyUI 窗口- 窗口与布局

简介: 47EasyUI 窗口- 窗口与布局

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 框架,简单而强大。

目录
相关文章
|
JavaScript
46EasyUI 窗口- 自定义窗口工具栏
46EasyUI 窗口- 自定义窗口工具栏
62 0
|
JavaScript 前端开发
49EasyUI 窗口- 自定义带有工具条和按钮的对话框
49EasyUI 窗口- 自定义带有工具条和按钮的对话框
48 0
48EasyUI 窗口- 创建对话框
48EasyUI 窗口- 创建对话框
45 0
45EasyUI 窗口- 创建简单窗口
45EasyUI 窗口- 创建简单窗口
52 0
|
前端开发 Windows
19EasyUI 布局- 创建 XP 风格左侧面板
19EasyUI 布局- 创建 XP 风格左侧面板
57 0
18EasyUI 布局- 添加自动播放标签页(Tabs)
18EasyUI 布局- 添加自动播放标签页(Tabs)
45 0
17EasyUI 布局- 动态添加标签页(Tabs)
17EasyUI 布局- 动态添加标签页(Tabs)
58 0
15EasyUI 布局- 创建折叠面板
15EasyUI 布局- 创建折叠面板
61 0
14EasyUI 布局- 在面板中创建复杂布局
14EasyUI 布局- 在面板中创建复杂布局
45 0
|
容器
13EasyUI 布局- 为网页创建边框布局
13EasyUI 布局- 为网页创建边框布局
41 0