经历:easyui的layout自适应高度布局
在使用easyui的layout布局的时候,在某种情况下,我们会在后续的逻辑中修改一下layout的某个region的高度,那么该怎么做呢?
我就遇到了这样的情况,今天需求经理提出了一个需求:认证用户可以单票查询和批量查询,而注册用户只能单票查询。
面对这个需求,我需要再判断用户的类型之后,在对region中的代码进行控制,这样在页面初始化时候,region的高度就得不到确定了,只能在Js代码中去控制。经过多方的查询,我终于找到了解决方案了。
具体代码如下:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>easyui layout</title>
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
<h2>Auto Height for Layout</h2>
<p>This example shows how to auto adjust layout height after dynamically adding items.</p>
<div id="cc" style="width:700px;height:350px;">
<div data-option="region:'north'" style="height:150px;">
<div id="SingleQuery">……</div>
<div id="MoreQuery" style="display:none;">……</div>
</div>
<div data-option="region:'center'" >
<table id="td"></table>
</div>
</div>
</body>
<script type="text/javascript">
$(function(){
//用户类型
var userType='..';
if(userType=='认证用户'){
$("#MoreQuery").show();
//region:north 的调整高度
setHeight('220px');
}
}); function setHeight(num){
var c=$("#cc");
var p=c.layout('region','north'); //get the north panel
var oldHeight=p.panel('panel').outerHeight(); //获得north panel 的原高度
p.panel('resize',{height:num}); //设置north panel 新高度
var newHeight=p.panel('panel').outerHeight();
c.layout('resize',{height:c.height()+newHeight-oldHeight}); //重新设置整个布局的高度
}
</script>
</html>
经历:easyui的layout自适应高度布局的更多相关文章
- 简单而兼容性好的Web自适应高度布局,纯CSS
纯CSS实现的自适应高度布局,中间内容不符自动滚动条.兼容IE9以上.chrome.FF.关键属性是box-sizing: border-box. 不废话,直接上代码: <!doctype ht ...
- EasyUI设置Layout自适应浏览器宽度和高度
//设置自适应浏览器宽度和高度 function setLayoutHeight() { var height = $(window).height() - 20; $("#main_lay ...
- 第二百零二节,jQuery EasyUI,Layout(布局)组件
jQuery EasyUI,Layout(布局)组件 学习要点: 1.加载方式 2.布局属性 3.区域面板属性 4.方法列表 本节课重点了解 EasyUI 中 Layout(布局)组件的使用方法,这个 ...
- CI 笔记3 (easyui 的layout布局,最小化layout原型)
在做easyui的layout的布局时,最小化一个原型,分2步,一个是div的父标签,一个是body做父标签,全屏的. 步骤分别为: 在设置的5个区中,div的最后一个,必须是data-options ...
- EasyUI之Layout布局和Tabs页签的使用
1.JQuery EasyUI之LayOut布局 EasyUI是一款基于JQuery开发的前端框架,它集成很多漂亮的样式和相应的功能,大大方便了我们对前端开发的难度.对于web项目而言,主页面的一定是 ...
- DIV+CSS布局中自适应高度的解决方法
div乱跑问题 (文件<DIV+CSS布局中自适应高度的解决方法.rar>) float 是个很危险的东西 得小心使用 本来有一很好的关于CSS+DIV的论坛 不过现在关门了 甚是可 ...
- swift学习 - tableView自适应高度1(xib autoLayout)
tableView自适应高度 效果图: 源码: class ViewController: UIViewController,UITableViewDelegate,UITableViewDataSo ...
- RecyclerFullyManagerDemo【ScrollView里嵌套Recycleview的自适应高度功能】
版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 对于Recyclerview自己的LinearLayoutManager和GridLayoutManager,在版本23.2.0之后 ...
- IOS UILabel 根据内容自适应高度
iOS Label 自适应高度 适配iOS7以后的版本 更多 self.contentLabelView = [[UILabel alloc] init]; self.contentLabelVie ...
随机推荐
- Android实例-MediaPlayer播放音乐和视频(XE8+小米2)
结果: 1.播放视频需要手动放入MediaPlayerControl1控件,设置MediaPlayerControl1.MediaPlayer := MediaPlayer1; 2.播放声音文件正常, ...
- [iOS基础控件 - 6.0] UITableView
A.需要掌握的 1.基本属性和方法 设置UITableView的dataSource.delegate UITableView多组数据和单组数据的展示 UITableViewCell的常见属性 UIT ...
- [OC Foundation框架 - 4] NSString的导出
void exportString() { NSString *str = @"Hello, 坑爹"; NSString *path = @"/Users/hello ...
- iphone练习之手势识别(双击、捏、旋转、拖动、划动、长按)UITapGestureRecognizer
首先新建一个基于Sigle view Application的项目,名为GestureTest;我的项目结构如下: 往viewController.xib文件里拖动一个imageView,并使覆盖整个 ...
- 转载SSIS中的容器和数据流—数据转换(Transformations)续
数据挖掘请求 数据挖掘任务是SSIS中一个很重要的任务,它的思想来源于一些算法.数据挖掘请求运行数据挖掘请求,并将结果输出到数据流.它还可以添加一些预测新列,一些应用场合如下列举: 根据已知的一些列, ...
- BAT及各大互联网公司2014前端笔试面试题:JavaScript篇
前面几题是会很基础,越下越有深度. 初级Javascript: 1.JavaScript是一门什么样的语言,它有哪些特点? 没有标准答案. 2.JavaScript的数据类型都有什么? 基本数据类型: ...
- UIViewController生命周期测试
push进入 -[NaviRootVC viewWillDisappear:] -[NextVC viewWillAppear:] -[NextVC viewWillLayoutSubviews ...
- C#实现异步编程的两个简单机制(异步委托&定时器)及Thread实现多线程
创建线程的常用方法:异步委托.定时器.Thread类 理解程序.进程.线程三者之间的区别:简而言之,一个程序至少有一个进程,一个进程至少有一个线程进程就是在内存中运行的程序(即运行着的程序):一个进程 ...
- 两个简单方法加速DataGridView
两个简单方法加速DataGridView (2009-03-24 16:57:13) 转载▼ 标签: 杂谈 分类: .NET DataGridView虽然好用,但是如果数据量比较大的话就会出现性能的问 ...
- gmt学习资源
1 http://seisman.info/ http://examples.gmt-china.org/ http://docs.gmt-china.org http://modules.gmt-c ...