JS技术

使用javascript让页面自适应

字号+ 作者: 来源:网络    2014-11-17 20:00 我要评论( )

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

  取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;

  // }

  // }

  /

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • AngularJS使用HTML5摄像头拍照

    AngularJS使用HTML5摄像头拍照

    2016-02-23 09:42

  • 从Container内存监控限制到CPU使用率限制方案 - 走在前往架构师的路上 - 博客频道 - CSDN.NET 走

    从Container内存监控限制到CPU使用率限制方案 - 走在前往架构师的路

    2015-12-15 09:09

  • 正式使用opencv里的训练和检测 - opencv_createsamples、opencv_traincascade

    正式使用opencv里的训练和检测 - opencv_createsamples、opencv_trai

    2015-12-15 08:44

  • 数据抽取工具Kettle使用 - 唐僧打怪兽 - 博客频道 - CSDN.NET 唐僧打怪兽 热爱互联网,编程,比如:J

    数据抽取工具Kettle使用 - 唐僧打怪兽 - 博客频道 - CSDN.NET 唐僧打

    2015-12-14 15:37

网友点评
s