效果图：

源代码：

<!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 类变量和成员变量

    Python 类变量和成员变量 类与对象的方法 我们已经讨论了类与对象的功能部分,现在我们来看一下它的数据部分.事实上,它们只是与类和对象的名称空间 绑定 的普通变量,即这些名称只在这些类与对象的前提 ...

  2. 2.1---删除链表中重复元素（CC150）

    分成两种,1种开了额外空间,临时缓冲区,一种没有开 import java.util.HashSet; import java.util.Set; class ListNode{ int data; ...

  3. Fibonacci 1

    Fibonacci 1 题面 \[F_0=0,F_1=1,F_n=F_{n-1}+F_{n-2}\] 给定\(n\),求 \[S(n)=\sum_{i=1}^{n}F_nF_{n-1}\] 数据格式 ...

  4. ubuntu安装LAMP环境

    1. LAMP 的安装 sudo apt-get install apache2 mysql-server mysql-client php5 php5-gd php5-mysql 由于LAMP大部分 ...

  5. Course Schedule I & II

    There are a total of n courses you have to take, labeled from 0 to n - 1. Some courses may have prer ...

  6. 左侧导航栏复制粘贴保存html即可

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

  7. poj 2403

    http://poj.org/problem?id=2403 题意:就是给你m个单词,以及n段对话.每一个单词都有所对应的价值.求对话中的价值总和 题解:很简单,就是用单词和价值对应起来,然后再寻找就 ...

  8. Twisted安装

    Debian sudo apt-get install gcc python-dev && sudo pip install twisted CentOS sudo yum insta ...

  9. HTTP请求报文和HTTP响应报文

    HTTP报文是面向文本的,报文中的每一个字段都是一些ASCII码串,各个字段的长度是不确定的.HTTP有两类报文:请求报文和响应报文. HTTP请求报文 一个HTTP请求报文由请求行(request ...

  10. pfsense 企业应用实例

    从萌生更换公司网关的想法,到选择.测试.部署陆陆续续用时两个月有余.选择的标准是open and free.这期间不断在查阅一些资料,测试了7.8个各开源防火墙产品.这些产品中大多是基于linux,少 ...