Easyui入门视频教程第04集---Easyui布局

最新推荐文章于 2019-02-16 14:59:13 发布

weixin_34357887

最新推荐文章于 2019-02-16 14:59:13 发布

阅读量80

点赞数

文章标签： javascript 测试 ViewUI

-----------------------

Easyui入门视频教程第09集---登录完善图标自定义

Easyui入门视频教程第08集---登录实现 ajax button的使用

Easyui入门视频教程第07集---Accordion的使用

Easyui入门视频教程第06集---Layout初始化和属性方法使用

Easyui入门视频教程第05集---Easyui复杂布局

Easyui入门视频教程第04集---Easyui布局

Easyui入门视频教程第03集---Easyui布局

Easyui入门视频教程第02集--- ASP.NET MVC下搭建 EasyUI环境

Easyui入门视频教程第01集---认识Easyui

-----------------------

我们继续讲布局

full 全屏布局

<body class="easyui-layout">
        <div data-options="region:'north',border:false" style="height:60px;background:#B3DFDA;padding:10px">north region</div>
        <div data-options="region:'west',split:true,title:'West'" style="width:150px;padding:10px;">west content</div>
        <div data-options="region:'east',split:true,collapsed:true,title:'East'" style="width:100px;padding:10px;">east region</div>
        <div data-options="region:'south',border:false" style="height:50px;background:#A9FACD;padding:10px;">south region</div>
        <div data-options="region:'center',title:'Center'"></div>
</body>

整个body 作为一个布局容器

嵌套布局

        <div class="easyui-layout" style="width:700px;height:350px;">
                <div data-options="region:'north'" style="height:50px"></div>
                <div data-options="region:'south',split:true" style="height:50px;"></div>
                <div data-options="region:'east',split:true" title="East" style="width:180px;"></div>
                <div data-options="region:'west',split:true" title="West" style="width:100px;"></div>
                <div data-options="region:'center',iconCls:'icon-ok'" title="Center">
                        <div class="easyui-layout" data-options="fit:true">
                                <div data-options="region:'north',split:true,border:false" style="height:50px"></div>
                                <div data-options="region:'west',split:true,border:false" style="width:100px"></div>
                                <div data-options="region:'center',border:false"></div>
                        </div>
                </div>
        </div>

这个东西就是收缩
collapsed:true

视频下载地址

http://pan.baidu.com/s/1sjEpVTr

源码

http://www.bamn.cn/thread-3982-1-1.html

weixin_34357887

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Easyui入门视频教程第04集---Easyui布局

目录目录-----------------------Easyui入门视频教程第09集---登录完善图标自定义 Easyui入门视频教程第08集---登录实现 ajax button的使用 Easyui入门视频教程第07集---Accordion的使用 Easyui入门视频教程第06集---Layout初始化和属性...
复制链接

扫一扫