Jquery easy UI 上中下三栏布局 分类: ASP.NET 2015-02-06 09:19 370人阅读 评论(0) 收藏
2015-02-06 09:19
381 查看
效果图:
源代码:
http://qingshanboke.com/Uploadfiles/file/20150206/6355881114276855463509463.rar
源代码:
<!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) 收藏
- IIS上虚拟站点的web.config与主站点的web.config冲突解决方法 分类: ASP.NET 2015-06-15 14:07 60人阅读 评论(0) 收藏
- 【ASP.NET开发】ADO.NET调用带输出参数的存储过程 分类: ASP.NET 2012-09-10 21:16 1261人阅读 评论(1) 收藏
- 【ASP.NET开发】ASP.NET(MVC)三层架构知识的学习总结 分类: ASP.NET 2012-09-27 17:09 1985人阅读 评论(1) 收藏
- ASP.NET 自定义URL重写 分类: ASP.NET 2014-10-31 16:05 174人阅读 评论(0) 收藏
- 【ASP.NET开发】.NET三层架构简单解析 分类: ASP.NET 2013-01-16 18:05 1568人阅读 评论(0) 收藏
- 解析ASP.NET WebForm和Mvc开发的区别 分类: ASP.NET 2013-12-29 01:59 11738人阅读 评论(5) 收藏
- IIS上虚拟站点的web.config与主站点的web.config冲突解决方法 分类: ASP.NET 2015-06-15 14:07 59人阅读 评论(0) 收藏
- 解析ASP.NET Mvc开发之EF延迟加载 分类: ASP.NET 2014-01-04 01:29 4017人阅读 评论(1) 收藏
- 百度编辑器UEditor ASP.NET示例Demo 分类: ASP.NET 2015-01-12 11:18 347人阅读 评论(0) 收藏
- 解析ASP.NET Mvc开发之查询数据实例 分类: ASP.NET 2014-01-02 01:27 5788人阅读 评论(3) 收藏
- 简单的ASP.NET无刷新分页 分类: ASP.NET 2012-05-06 02:09 655人阅读 评论(1) 收藏
- 百度编辑器UEditor ASP.NET示例Demo 分类: ASP.NET 2015-01-12 11:18 346人阅读 评论(0) 收藏
- 【ASP.NET开发】ASP.NET对SQLServer的通用数据库访问类 分类: ASP.NET 2012-09-20 11:17 2768人阅读 评论(0) 收藏
- ASP.NET中登录页验证码的实现 分类: ASP.NET 2012-03-08 22:44 4936人阅读 评论(5) 收藏
- 解析ASP.NET Mvc开发之删除修改数据 分类: ASP.NET 2014-01-04 23:41 3203人阅读 评论(2) 收藏
- DWZ和ASP.NET MVC等框架的冲突问题解决方案 分类: 技巧总结 2015-04-07 14:46 188人阅读 评论(0) 收藏
- ASP.NET 自定义URL重写 分类: ASP.NET 2014-10-31 16:05 175人阅读 评论(0) 收藏
- C语言编程规约(个人规约) 分类: 嵌入式开发学习 2014-02-21 14:32 370人阅读 评论(0) 收藏
- 网络工作室暑假后第二次培训资料(SQLServer存储过程和ADO.NET访问存储过程)整理(二) 分类: ASP.NET MSSQLServer 2012-10-07 16:47 665人阅读 评论(0) 收藏