目录

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

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

在每个 区域 里面 可以显示 不同的 内容 比如 tree tab

<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;">

                        <ul class="easyui-tree" data-options="url:'../layout/tree_data1.json',animate:true,dnd:true"></ul>

                </div>

                <div data-options="region:'west',split:true" title="West" style="width:100px;">

                        <div class="easyui-accordion" data-options="fit:true,border:false">

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

                                        content1

                                </div>

                                <div title="Title2" data-options="selected:true" style="padding:10px;">

                                        content2

                                </div>

                                <div title="Title3" style="padding:10px">

                                        content3

                                </div>

                        </div>

                </div>

                <div data-options="region:'center',title:'Main Title',iconCls:'icon-ok'">

                        <div class="easyui-tabs" data-options="fit:true,border:false,plain:true">

                                <div title="About" data-options="href:'../layout/_content.html'" style="padding:10px"></div>

                                <div title="DataGrid" style="padding:5px">

                                        <table class="easyui-datagrid"

                                                        data-options="url:'../layout/datagrid_data1.json',singleSelect:true,fit:true,fitColumns:true">

                                                <thead>

                                                        <tr>

                                                                <th data-options="field:'itemid'" width="80">Item ID</th>

                                                                <th data-options="field:'productid'" width="100">Product ID</th>

                                                                <th data-options="field:'listprice',align:'right'" width="80">List Price</th>

                                                                <th data-options="field:'unitcost',align:'right'" width="80">Unit Cost</th>

                                                                <th data-options="field:'attr1'" width="150">Attribute</th>

                                                                <th data-options="field:'status',align:'center'" width="50">Status</th>

                                                        </tr>

                                                </thead>

                                        </table>

                                </div>

                        </div>

                </div>

        </div>

视频下载

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

Easyui入门视频教程 第05集---Easyui复杂布局的更多相关文章

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

    目录 目录 ----------------------- Easyui入门视频教程 第09集---登录完善 图标自定义   Easyui入门视频教程 第08集---登录实现 ajax button的 ...

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

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

  3. Easyui入门视频教程 第11集---Window的使用

    目录 Easyui入门视频教程 第11集---Window的使用   Easyui入门视频教程 第10集---Messager的使用  Easyui入门视频教程 第09集---登录完善 图标自定义   ...

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

    目录 ----------------------- Easyui入门视频教程 第09集---登录完善 图标自定义   Easyui入门视频教程 第08集---登录实现 ajax button的使用  ...

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

    目录 ----------------------- Easyui入门视频教程 第09集---登录完善 图标自定义   Easyui入门视频教程 第08集---登录实现 ajax button的使用  ...

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

    目录 ----------------------- Easyui入门视频教程 第09集---登录完善 图标自定义   Easyui入门视频教程 第08集---登录实现 ajax button的使用  ...

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

    Easyui入门视频教程 第02集--- ASP.NET MVC下 搭建 EasyUI环境 目录 ----------------------- Easyui入门视频教程 第09集---登录完善 图标 ...

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

    认识EasyUI 目录 ----------------------- Easyui入门视频教程 第09集---登录完善 图标自定义   Easyui入门视频教程 第08集---登录实现 ajax b ...

  9. Easyui入门视频教程 第10集---Messager的使用

    Easyui入门视频教程 第10集---Messager的使用 <script type="text/javascript"> function show(){ $.m ...

随机推荐

  1. 【转】以太网帧、IP报文格式

    原文:https://www.cnblogs.com/yongren1zu/p/6274460.html https://blog.csdn.net/gufachongyang02/article/d ...

  2. Using Timers in MFC Applications

    Timer Events in MFC Applications Event timers are always handy to have around and useful in nearly e ...

  3. cmake 学习笔记(三) (转)

    接前面的 Cmake学习笔记(一) 与 Cmake学习笔记(二) 继续学习 cmake 的使用. 学习一下cmake的 finder. finder是神马东西? 当编译一个需要使用第三方库的软件时,我 ...

  4. OSError: Could not find library geos_c or load any of its variants ['libgeos_c.so.1', 'libgeos_c.so

    OSError: Could not find library geos_c or load any of its variants ['libgeos_c.so.1', 'libgeos_c.so ...

  5. 【Eclipse】如何在Eclipse中使用命令行？

    如何在Eclipse中使用命令行? 虽然我们已经有了像 Eclipse 这样高级的 IDE,但是我们有时候也是需要在开发的时候使用 Windows 的命令行,来运行一些独立的程序.在两个程序中切换来切 ...

  6. wdcp升级php5.3无法安装PDO_MySQL的解决

    重新下载php5.3的升级脚本 wget http://down.wdlinux.cn/in/php_up53.sh 不忙运行,先修改php_up53.sh,查找./configure字段,在这行的末 ...

  7. TOJ 3365 ZOJ 3232 It's not Floyd Algorithm / 强连通分量

    It's not Floyd Algorithm 时间限制(普通/Java):1000MS/3000MS     运行内存限制:65536KByte   描述 When a directed grap ...

  8. 利用RTMFP开发P2P应用

    利用RTMFP开发P2P应用 flash10使用RTMFP 开发点对点P2P应用 通过Stratus 服务器在Flash Player中使用RTMFP 开发 点对点应用 Adobe Flash Pla ...

  9. android studio 开发经常使用快捷键使用分享

    windows开发经常使用快捷键 实体类生成get set 等方法 快捷生成变量快捷 windows开发经常使用快捷键 实体类生成get set 等方法 快捷键 alt + insert 快捷生成变量 ...

  10. 从0開始写MyScrollView

    从0開始写MyScrollView 上篇文章对ScrollView的详细实现进行了分析.本文依据上篇分析的结果.自己动手写一个ScrollView. step1 尾随手指滑动,非常easy.重写2个函 ...