使用javascript让页面自适应

来源:互联网 时间:1970-01-01

取IE显示屏幕的宽高.确定哪些对象是绝对位置是固定的,那些是不固定的,哪些长宽是固定,然后象WIN FORM程序一样,根所软件界面的大小,进行设计相关对象的长宽,绝对位置等属性,但是在WEB上程序没有办法实时检测到窗口大小变化,只能用让实现自适应的方法通过SetTimeout 函数进行隔时递归调用。

实现原理:

获取IE显示屏幕的宽高.确定哪些对象是绝对位置是固定的,那些是不固定的,哪些长宽是固定,然后象WIN FORM程序一样,根所软件界面的大小,进行设计相关对象的长宽,绝对位置等属性,但是在WEB上程序没有办法实时检测到窗口大小变化,只能用让实现自适应的方法通过SetTimeout 函数进行隔时递归调用.

下面是摘自iSunXoft Hr开源项目SysForm.aspx实现的方法.

注:$("")是有变化的元素.

var h;

var w;

function resize()

{

var he = document.body.offsetHeight;

var wi = document.body.offsetWidth;

if($("DataTable").style.display.toLowerCase()==""||$("DataTable").style.display.toLowerCase()=="inline")

{

if (h==he&&w==wi)

{

if($("leftMenu").style.display.toLowerCase() == "none" )

{

$("DivDataList").style.width = wi - 30;

}

else

{

$("DivDataList").style.width = wi - 223;

}

setTimeout("resize()",1000);

return;

}

h = he;

w = wi;

if (he>100)

{

$("DivDataList").style.height = he - 172;

}

if(wi>200)

{

$("DivDataList").style.width = wi - 223;

if($("leftMenu").style.display.toLowerCase() == "none" )

{

$("DivDataList").style.width = wi - 30;

}

}

}

if($("DataEmpWidows").style.display.toLowerCase()=="inline"||$("DataEmpWidows").style.display.toLowerCase()=="")

{

if (h==he&&w==wi)

{

if($("leftMenu").style.display.toLowerCase() == "none" )

{

$("DataEmpWidows").style.width = wi - 30;

}

else

{

$("DataEmpWidows").style.width = wi - 223;

}

}

h = he;

w = wi;

if (he>150)

{

$("DataEmpWidows").style.height = he - 132;

}

if(wi>200)

{

$("DataEmpWidows").style.width = wi - 223;

if($("leftMenu").style.display.toLowerCase() == "none" )

{

$("DataEmpWidows").style.width = wi - 30;

}

}

}

if(typeof($("EipWindows")) != "undefined")

{

//if($("EipWindows").style.display.toLowerCase()=="inline")

//{

// if (h==he&&w==wi)

// {

// if($("leftMenu").style.display.toLowerCase() == "none" )

// {

// $("EipWindows").style.width = wi - 30;

// }

// else

// {

// $("EipWindows").style.width = wi - 223;

// }

// }

// h = he;

// w = wi;

// if (he>150)

// {

// $("EipWindows").style.height = he - 132;

// }

// if(wi>200)

// {

// $("EipWindows").style.width = wi - 223;

// if($("leftMenu").style.display.toLowerCase() == "none" )

// {

// $("EipWindows").style.width = wi - 30;

// }

// }

//}

}

setTimeout("resize()",1000);

}

resize();

然后就在网页上调用resize();一旦窗口大小有变化,或是分辩率有变化,都能确保能够实现真正意义上的自适应.



相关阅读:
Top