效果图：

源代码：

<!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. 转：JQuery读写Cookie

    Cookies是一种能够让网站服务器把少量数据储存到客户端的硬盘或内存,或是从客户端的硬盘读取数据的一种技术.当你浏览某网站时,你硬盘上会生产一个非常小的文本文件,它可以记录你的用户ID.密码.浏览过 ...

  2. Python操作PDF与Tiff文件

    1.PDF文件的合并与拆分 pypdf http://www.douban.com/note/455252403/ http://www.redicecn.com/html/Python/201301 ...

  3. 在Py文件中引入django环境

    复制manage.py中的相关代码即可并将文件置于Project文件夹(与manage.py同位置)下 示例: #! /usr/bin/env python # -*- coding:utf- -*- ...

  4. struct vs class

    关于默认访问权限class中默认的成员访问权限是private的,而struct中则是public的. 关于继承方式class继承默认是private继承,而struct继承默认是public继承. ...

  5. 《Java语言程序设计》上机实验

    实验一   Java环境演练   [目的] ①安装并配置Java运行开发环境: ②掌握开发Java应用程序的3个步骤:编写源文件.编译源文件和运行应用程序: ③学习同时编译多个Java源文件. [内容 ...

  6. iOS开发学习网站汇总

    *本文转自CocoaChina 原文:11 Insanely Great iOS Developers Sites永不止步地向他人学习 我相信,要想从一个"还不错"的人变成一个卓越 ...

  7. codeforces 496A. Minimum Difficulty 解题报告

    题目链接:http://codeforces.com/contest/496/problem/A 题目意思:给出有 n 个数的序列,然后通过删除除了第一个数和最后一个数的任意一个位置的数,求出删除这个 ...

  8. ref 和 out

    两者都是按地址传递的,使用后都将改变原来的数值.很多人在论坛上解释说out是按数值传递,是错误的.简单的测试后可以知道out使用也能改变数值的,所以肯定是按照地址传递的.其次:rel可以把参数的数值传 ...

  9. 如何把一个excel工作薄中N个工作表复制到另一个工作薄中

    一般遇到标题这样的情况,许多人可能会一个一个的复制粘贴,其实完全不必那么麻烦. 你可以按以下步骤来操作: 第一步:打开所有要操作的excel工作薄\n 第二步:按住Shift键,选择所有要复制的工作表 ...

  10. UUID UDID

    Google搜索关键字Difference between UUID and UDID,在stackoverflow看见解释,我翻译过来,如下所述. UUID(Universally Unique I ...