效果图：

源代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>Jquery easy UI 上中下三栏布局</title>

    <link href="jquery-easyui-1.4/themes/default/easyui.css" rel="stylesheet" type="text/css" />

    <script src="jquery-easyui-1.4/jquery.min.js" type="text/javascript"></script>

    <script src="jquery-easyui-1.4/jquery.easyui.min.js" type="text/javascript"></script>

</head>

<body>

    <div class="easyui-layout" id="mainLayout" border="false">

        <div id="topPanel" data-options="region:'north',split:true" title="顶部部分">

        </div>

        <div id="centerPanel" data-options="region:'center',split:true" title="中间部分">

        </div>

        <div id="bottomPanel" data-options="region:'south',split:true" title="底部部分">

        </div>

    </div>

    <script type="text/javascript">

        window.customResize = function () {

            var width = $(window).width() - 10;

            var height = $(window).height();

            var panelHeight = parseInt(height / 3); //每个1/3高度

            $('#topPanel').panel('resize', { width: width, height: panelHeight });

            $('#centerPanel').panel('resize', { width: width, height: panelHeight });

            $('#bottomPanel').panel('resize', { width: width, height: panelHeight });

            $('#mainLayout').layout('resize', { width: width, height: height });

        };

    </script>

    <script type="text/javascript">

        //窗口缩放时，重绘布局控件尺寸

        $(function () {

            redraw();

        });

        $(window).resize(function () {

            redraw();

        });

        function redraw() {

            if (window.customResize) {

                customResize(); //自定义缩放函数，页面若使用多个布局控件，需自定义缩放函数处理

            } else {

                var width = $(window).width();

                var height = $(window).height();

                //没有自定义缩放函数时，默认对panel，layout，treegrid，datagrid等控件进行调整

                $('.easyui-panel').panel('resize', { width: width, height: height });

                $('.easyui-layout').layout('resize', { width: width, height: height });

                $('.easyui-treegrid').treegrid('resize', { width: width, height: height });

                $('.easyui-datagrid').datagrid('resize', { width: width, height: height });

            }

        }

    </script>

</body>

</html>

完整示例：

http://qingshanboke.com/Uploadfiles/file/20150206/6355881114276855463509463.rar

版权声明：本文为博主原创文章，未经博主允许不得转载。

Jquery easy UI 上中下三栏布局 分类： ASP.NET 2015-02-06 09:19 368人阅读 评论(0) 收藏的更多相关文章

  1. 全面解析sizeof（上） 分类： C/C++ StudyNotes 2015-06-15 10:18 188人阅读 评论(0) 收藏

    以下代码使用平台是Windows7 64bits+VS2012. sizeof是C/C++中的一个操作符(operator),其作用就是返回一个对象或者类型所占的内存字节数,使用频繁,有必须对齐有个全 ...

  2. javascript中定义事件的三种方式 分类： C1_HTML/JS/JQUERY 2014-08-07 10:27 634人阅读 评论(0) 收藏

    在javascript中,可以为某个元素指定事件,指定的方式有以下三种: 1.在html中,使用onclick属性 2.在javascript中,使用onclick属性 3.在javascipt中,使 ...

  3. XHTML 结构化：使用 XHTML 重构网站 分类： C1_HTML/JS/JQUERY 2014-07-31 15:58 249人阅读 评论(0) 收藏

    http://www.w3school.com.cn/xhtml/xhtml_structural_01.asp 我们曾经为本节撰写的标题是:"XHTML : 简单的规则,容易的方针.&qu ...

  4. 不定义JQuery插件，不要说会JQuery 分类： JavaScript 2014-11-24 14:18 155人阅读 评论(0) 收藏

    一:导言 有些WEB开发者,会引用一个JQuery类库,然后在网页上写一写$("#"),$("."),写了几年就对别人说非常熟悉JQuery.我曾经也是这样的人 ...

  5. C#中的线程(上)-入门 分类： C# 线程 2015-03-09 10:56 53人阅读 评论(0) 收藏

    1.     概述与概念 C#支持通过多线程并行地执行代码,一个线程有它独立的执行路径,能够与其它的线程同时地运行.一个C#程序开始于一个单线程,这个单线程是被CLR和操作系统(也称为"主线 ...

  6. UI基础:UI程序执行顺序(UIApplicationMain()函数),自定义视图 分类： iOS学习-UI 2015-07-02 22:09 68人阅读 评论(0) 收藏

    UI程序的一般执行顺序: 先进入main里面,执行函数UIApplicationMain(),通过该函数创建应用程序对象和指定其代理并实现监听,当执行函数UIApplicationMain()时还会做 ...

  7. JavaScript、Ajax与jQuery的关系 分类： C1_HTML/JS/JQUERY 2014-07-31 10:15 3388人阅读 评论(0) 收藏

    简单总结: 1.JS是一门前端语言. 2.Ajax是一门技术,它提供了异步更新的机制,使用客户端与服务器间交换数据而非整个页面文档,实现页面的局部更新. 3.jQuery是一个框架,它对JS进行了封装 ...

  8. C#多线程(上) 分类： C# 线程 2015-03-09 10:35 174人阅读 评论(0) 收藏

    一.多线程的相关概念 什么是进程? 当一个程序开始运行时,它就是一个进程,进程包括运行中的程序和程序所使用到的内存和系统资源. 而一个进程又是由多个线程所组成的. 什么是线程? 线程是程序中的一个执行 ...

  9. jQuery中的on()和click()的区别 分类： 前端 HTML jQuery 2014-11-06 10:26 96人阅读 评论(0) 收藏

    HTML页面代码 <div> <h1>Click</h1> <button class="add">Click me to add ...

随机推荐

  1. Python进程、线程

    Lock & RLock :用来确保多线程多共享资源的访问. Semaphore : 用来确保一定资源多线程访问时的上限,例如资源池. Event : 是最简单的线程间通信的方式,一个线程可以 ...

  2. git生成秘钥之后同步到服务器

    现在本地生成ssh私钥和公钥 设置本地git用户配置 $ git config --global user.name "username"$ git config --global ...

  3. 【GoLang】golang 交叉编译 实现&工具

    apt-get install gcc-mingw-w64 env CGO_ENABLED= GOOS=windows GOARCH=amd64 CC=x86_64-w64-mingw32-gcc g ...

  4. 一个很详细的web.xml讲解

    <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE web-app PUBLIC "- ...

  5. 通过分析 JDK 源代码研究 TreeMap 红黑树算法实现

    本文转载自http://www.ibm.com/developerworks/cn/java/j-lo-tree/ 目录: TreeSet 和 TreeMap 的关系 TreeMap 的添加节点 Tr ...

  6. VS中计算程序运行时间

    VS中计算程序运行的时间   http://bbs.csdn.net/topics/39068881 有时候在设计程序完了之后需要计算程序运行的时间. 这时候可以使用Windows的库函数 GetIi ...

  7. sharepoint定义固定的网站集

    SPSite site = new SPSite(http://192.168.0.3/);            SPWeb web = site.RootWeb;

  8. C++ 获取vector容器最后一个元素

    声明:vector<T>  vec; 方法一: return vec.at(vec.size()-1); 方法二: return vec.back(); 方法三: return vec.e ...

  9. 在Linux服务器上配置phpMyAdmin

    使用php和mysql开发网站的话,phpmyadmin是一个非常友好的mysql管理工具,并且免费开源,国内很多虚拟主机都自带这样的管理工具,配置很简单,接下来在linux服务器上配置phpmyad ...

  10. ABAP 行列稳定刷新语句

    DATA stbl TYPE lvc_s_stbl. stbl-row = 'X'." 基于行的稳定刷新         stbl-col = 'X'." 基于列稳定刷新      ...