建站学 - 轻松建站从此开始!

建站学-个人建站指南,网页制作,网站设计,网站制作教程

使用javascript让页面自适应

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

  取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();一旦窗口大小有变化,或是分辩率有变化,都能确保能够实现真正意义上的自适应.

(责任编辑:admin)
织梦二维码生成器
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片