效果图：

源代码：

<!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. Apache shutdown unexpectedly启动错误解决方法

    这个问题比较常见, 通常是80.443端口被占用 cmd 通过运行apache/bin/httpd.exe 打印如下log: (OS 10048)通常每个套接字地址(协议/网络地址/端口)只允许使用一 ...

  2. Linux查看硬盘型号

    Linux查看硬盘型号 -- :: 分类: 服务器与存储 请先确定服务器是否有配 RAID. 如果有RAID,请通过对应的RAID管理(监控)工具查看,例如LSI的MegaCli: # /opt/Me ...

  3. No handlers could be found for logger "keystoneauth.identity.generic.base"

    一般是因为发现了多个keystone的url造成的.

  4. JustMock Lite (Free Mocking Framework For .net)

    通过 Nuget 安装 2.   官网下载(官网不行点这里) 3.   帮助文档 商业版和免费版区别概览 MockingContainer 测试类准备:一般来说也是业务类 public class C ...

  5. React 源码解读参考，理解原理。

    Rubix - ReactJS Powered Admin Template 文档:   http://rubix-docs.sketchpixy.com/ ===================== ...

  6. dump、cpio、tar、dd四种备份工具比较

    原文  http://blog.csdn.net/ether_lai/article/details/12656219 dump dump可执行文件系统增量备份的存储操作 ,dump 可将目录或整个文 ...

  7. ACM/ICPC 之 最长公共子序列计数及其回溯算法(51Nod-1006(最长公共子序列))

    这道题被51Nod定为基础题(这要求有点高啊),我感觉应该可以算作一级或者二级题目,主要原因不是动态规划的状态转移方程的问题,而是需要理解最后的回溯算法. 题目大意:找到两个字符串中最长的子序列,子序 ...

  8. Python初识

    Python第一天   一．为什么学Python        作为一名linux运维工程师现在越来越感觉不好干了.没有地位,还待背黑锅,并且运维自动化发展的这么快,普通运维岗位的路也越来越窄(因为我 ...

  9. codeforces 556C. Case of Matryoshkas 解题报告

    题目链接:http://codeforces.com/contest/556/problem/C 题目意思:有 n 个数(1,2,...,n)组成 k 条链.第 i 条链由 mi 个数组成.每一秒只可 ...

  10. 仿知乎程序 fragment的切换以及toolbar在不同页面下显示的menu不同

           我们在看知乎的时候,你会发现,首页,发现,关注,收藏,草稿这五项,你在点击之后进入到相应页面之后,侧滑菜单还在,你左侧滑一下,这个侧滑菜单还在,而提问,左滑屏幕,这个页面就没有,有点像返 ...