FLEX给页面添加滚动条实现思路及代码
更新时间:2013年11月07日 16:26:47 作者:
给页面添加滚动条的方法有很多,使用js获取浏览器窗口的宽高,根据浏览器窗口宽高修改样式,让滚动条出现,具体的实现如下,需要的朋友可以参考下
修改index.template.html,加入一段js获取浏览器窗口的宽高,根据浏览器窗口宽高修改css样式,html, body { height:100%; width:100%; }的height和width是百分比还是具体大小,当是具体大小时就会出现滚动条,当是百分比时就会充满整个窗口。
具体如下:
1.加入以下js原码(Application大小为1100X600)
var winWidth = 0;
var winHeight = 0;
function findDimensions()
{
//获取窗口宽度
if (window.innerWidth)
{
winWidth = window.innerWidth;
}
else if ((document.body) && (document.body.clientWidth))
{
winWidth = document.body.clientWidth; //获取窗口高度
}
if (window.innerHeight)
{
winHeight = window.innerHeight;
}
else if ((document.body) && (document.body.clientHeight))
{
winHeight = document.body.clientHeight;
}
//通过深入Document内部对body进行检测,获取窗口大小
if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth)
{
winHeight = document.documentElement.clientHeight;
winWidth = document.documentElement.clientWidth;
}
var cssSize = document.styleSheets[0].rules||document.styleSheets[0].cssRules;
if(winWidth < 1100)
{
cssSize[0].style.width = "1100px";
}
else
{
cssSize[0].style.width = "100%";
}
if(winHeight < 600)
{
cssSize[0].style.height = "600px";
}
else
{
cssSize[0].style.height = "100%";
}
}
window.onresize=findDimensions;
function pageInit() {
//调用函数,获取数值
findDimensions();
}
具体如下:
1.加入以下js原码(Application大小为1100X600)
复制代码 代码如下:
var winWidth = 0;
var winHeight = 0;
function findDimensions()
{
//获取窗口宽度
if (window.innerWidth)
{
winWidth = window.innerWidth;
}
else if ((document.body) && (document.body.clientWidth))
{
winWidth = document.body.clientWidth; //获取窗口高度
}
if (window.innerHeight)
{
winHeight = window.innerHeight;
}
else if ((document.body) && (document.body.clientHeight))
{
winHeight = document.body.clientHeight;
}
//通过深入Document内部对body进行检测,获取窗口大小
if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth)
{
winHeight = document.documentElement.clientHeight;
winWidth = document.documentElement.clientWidth;
}
var cssSize = document.styleSheets[0].rules||document.styleSheets[0].cssRules;
if(winWidth < 1100)
{
cssSize[0].style.width = "1100px";
}
else
{
cssSize[0].style.width = "100%";
}
if(winHeight < 600)
{
cssSize[0].style.height = "600px";
}
else
{
cssSize[0].style.height = "100%";
}
}
window.onresize=findDimensions;
function pageInit() {
//调用函数,获取数值
findDimensions();
}
相关文章
在Flex(Flash)中嵌入HTML代码或页面(Flex IFrame)
在flex组件中嵌入html代码,可以利用flex iframe,下面为大家详细介绍下具体实现过程,感兴趣的朋友可以参考下2013-08-08Flex4 使用itemRenderer 为Tree加线具体实现
本文为大家详细介绍下Flex4如何使用itemRenderer 为Tree加线,感兴趣的朋友可以参考下2013-12-12js调用Flex中的方法并向flex中传参及flex调用js示例
本文为大家详细介绍喜爱js调用Flex中的方法以及向flex中传参与flex调用js,具体示例如下,感兴趣的朋友不妨参考下,希望对大家有所帮助2013-07-07
最新评论