目录

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

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. Threejs 开发3D地图实践总结【转】

    Threejs 开发3D地图实践总结   前段时间连续上了一个月班,加班加点完成了一个3D攻坚项目.也算是由传统web转型到webgl图形学开发中,坑不少,做了一下总结分享. 1.法向量问题 法线是垂 ...

  2. xgboost入门与实战

    xgboost入门与实战(实战调参篇) https://blog.csdn.net/sb19931201/article/details/52577592 前言 前面几篇博文都在学习原理知识,是时候上 ...

  3. CHtmlEditCtrl (3): More HTML Editor Options

    In this version of our HTML Editor, we'll create a floating source view/edit window and we'll implem ...

  4. mybatis 是如何与数据表对应上的 ？

    MyBatis也需要进行表和实体 的关联.我们查询的是表,返回的结果是实体类.这之间有一个对应关系. 如果说实体类的属性和表的列名一一对应,名字一样,那就自动解决了这个问题.但是如果实体类的属性和表的 ...

  5. ASP入门（五）- VBScript过程和函数

    VBScript过程 被封装在Sub和End Sub语句之中的一系列语句 不具有返回值 可带参数 我们的SubFunction.asp中展示了Sub的用法,代码如下: <% Sub mySub( ...

  6. Direct2D教程II——绘制基本图形和线型（StrokeStyle）的设置详解

    目前,在博客园上,相对写得比较好的两个关于Direct2D的教程系列,分别是万一的Direct2D系列和zdd的Direct2D系列.有兴趣的网友可以去看看.本系列也是介绍Direct2D的教程,是基 ...

  7. 推荐一款jQuery ColorPicked 颜色拾取器插件

    先看实现的效果图, 本文底部有完整demo 不想看我墨迹的可以跳过了^_^. 官网地址:http://www.eyecon.ro/colorpicker/#about 代码SVN 地址:https:/ ...

  8. 数据驱动测试二：使用TestNG和CSV文件进行数据驱动

    转载:https://blog.csdn.net/heart_1014/article/details/52013173 使用@DataProvider注解定义当前方法中的返回对象CSV文件(存放测试 ...

  9. springboot项目中报错：listener does not currently know of SID given in connect descriptor

    springboot项目中报错:listener does not currently know of SID given in connect descriptor 出现这个问题的原因是SID写错了 ...

  10. C/S通信模型与B/S通信模型介绍

    1.客户端与服务器之间的通信模型 基于Socket连接的客户端与服务器之间的通信模型图如上图所示,整个通信过程如下所示: (1) 服务器端首先启动监听程序,对指定的端口进行监听,等待接收客户端的连接请 ...