关于easyui的layout的region的resize的题目(自适应浏览器)
来源:互联网 发布:mac右键怎么按 编辑:程序博客网 时间:2024/06/07 03:46
名人名言:个人如果但靠自己,如果置身于集体的关系之外,置身于任何团结民众的伟大思想的范围之外,就会变成怠惰的、保守的、与生活发展相敌对的人。——高尔基
1. resize题目:
¥(""#subWrap"").layout(""panel"", ""east"").panel(""resize"",{width:300});
¥(""#subWrap"").layout(""resize"");
经由过程上方两句代码来实现layout的east的宽度重置。
2. 自适应浏览器:
转自:http://www.helloweba.com/view-blog-198.html
我们应用jQuery先向body中动态插入一个DIV,并且该DIV中包含一张,也就是我们请求拉伸结果的靠山。然后应用jQuery获取浏览器窗口的大小,按照浏览器窗口大小,动态设置靠山的尺寸(宽和高)。
代码:
¥(function(){
¥("body").append("<div id=""main_bg""/>");
¥("#main_bg").append("<img src=""bg.jpg"" id=""bigpic"">");
cover();
¥(window).resize(function(){ //浏览器窗口变更
cover();
});
});
function cover(){
var win_width = ¥(window).width();
var win_height = ¥(window).height();
¥("#bigpic").attr({width:win_width,height:win_height});
}
上述代码中,cover()函数就是动态的设置了靠山的尺寸,经由过程jQuery的append办法动态参加靠山,当页面加载完成时已经浏览器窗口 变更时都能实现靠山的拉伸结果,也就是页面ready和resize都调用了cover()函数。jQuery解决规划完全解决了浏览器兼容的题目, 请看DEMO2
总结:同样的事理,我们可以设置浏览器窗口,经由过程题目1的resize办法来实现对layout宽度的把握:
实践:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Complex Layout - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="http://www.cnblogs.com/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.cnblogs.com/themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="http://www.cnblogs.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="http://www.cnblogs.com/jquery.easyui.min.js"></script>
<script>
¥(function(){
cover();
¥(window).resize(function(){ //浏览器窗口变更
cover();
});
});
function cover(){
var win_width = ¥(window).width();
¥(""#subWrap"").layout(""panel"", ""east"").panel(""resize"",{width:win_width/3});
¥(""#subWrap"").layout(""resize"");
}
</script>
</head>
<body>
<div id="subWrap" class="easyui-layout" fit="true">
<div data-options="region:""north""" style="height:50px"></div>
<div data-options="region:""south"",split:true" style="height:50px;"></div>
<div data-options="region:""east"",split:true" title="East" ></div>
<div data-options="region:""west"",split:true" title="West" style="width:180px;" ></div>
<div data-options="region:""center"",title:""Main Title"",iconCls:""icon-ok"",fit:true"></div>
</div>
</body>
</html>
0 0
- 关于easyui的layout的region的resize的题目(自适应浏览器)
- 关于EasyUI的Layout总结
- 关于EasyUI的Layout总结
- Python easyui的Layout
- 关于resize事件,不同浏览器的触发行为
- easyui datagrid panel的列宽自适应浏览器大小
- easyUI layout的滚动条
- [easyUI]Layout组件的使用
- 关于textarea的resize问题
- 关于easyUI datagrid、layout动态改变大小使用的方法
- js--easyUI--EasyUI的datagrid自适应高度
- easyUI的messager高度自适应
- easyui的自适应大小设置
- easyui的datagrid自适应排版
- 12天津region的charge_station题目
- easyui 关于收缩面板引起的datagrid自适应宽度 fix
- 关于vector的resize()的理解
- jQuery easyui layout布局自适应浏览器大小
- devise 笔记
- 关于Android的一些概念有感
- jquery实现鼠标悬停单元格变色
- 远程jvm调试-备份
- 常见控件的使用方法(一)
- 关于easyui的layout的region的resize的题目(自适应浏览器)
- 大数据与未来社会
- J2SE基础:2.对象的创建与使用
- Eclipse常用开发插件
- Activity的生命周期(一)
- 硬盘如何分区及分区注意事项
- 《初出茅庐》
- Tomcat报内存溢出
- Activity的生命周期(二)