效果图：

源代码：

<!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. svn update错误

    可以再checkout下来一份项目,重新命名,然后将该项目下的隐藏文件夹.svn替换掉原项目 注意备份

  2. jquery对url中的中文解码

    项目中要实现一个select选择器选择后跳转url,并保存selected的值. url是用get来传递参数,所以考虑加载新页面时,读取参数值,并赋值到select中. 但是由于url的参数使用的是中 ...

  3. VS 2012: Post build 中使用 Signtool.exe，对于特殊password中字符的处理方法

    众所周知,在VS(Visual Studio)里面可以利用post build 进行一些类似于CMD或者批处理的操作. 最近的项目中用到了MicroSoft的SignTool工具,目的是要把一个数字签 ...

  4. 基础知识《七》---Java多线程详解

  5. 解析sql语句中left_join、inner_join中的on与where的区别

    以下是对在sql语句中left_join.inner_join中的on与where的区别进行了详细的分析介绍,需要的朋友可以参考下 table a(id, type):id     type ---- ...

  6. cpu和io进程调度时间

    [题目] 在一个单CPU的计算机系统中,有两台外部设备R1.R2和三个进程P1.P2.P3.系统采用可剥夺式优先级的进程调度方案,且所有进程可以并行使用I/O设备,三个进程的优先级.使用设备的先后顺序 ...

  7. Java计时器Timer和TimerTask用法

    package com.sy.game.test; import java.util.Timer; import java.util.TimerTask; public class TimeTask ...

  8. Solr集群更新配置的方式

    solr集群中配置文件是经常更新的,频率最高的也就是schema.xml和solrconfig.xml这两个配置文件了,对于更新配置文件之前,我们先了解一下集群项目结构 由于在集群模式下,solrco ...

  9. nginx服务器绑定域名和设置根目录的方法

    nginx服务器绑定域名以及设置根目录非常方便,首先进入nginx安装目录,然后执行 vim conf/nginx.conf 打开nginx的配置文件,找到 server { ..... ..... ...

  10. Greedy:Cow Acrobats(POJ 3045)

    牛杂技团 题目大意:一群牛想逃跑,他们想通过搭牛梯来通过,现在定义risk(注意可是负的)为当前牛上面的牛的总重量-当前牛的strength,问应该怎么排列才能使risk最小? 说实话这道题我一开始给 ...