看JavaScript如何实现页面自适

开发 前端
获取IE显示屏幕的宽高.确定哪些对象是绝对位置是固定的,那些是不固定的,哪些长宽是固定,然后象WIN FORM程序一样,根所软件界面的大小,进行设计相关对象的长宽,绝对位置等属性.

有时候,我们可能需要象新版的Yahoo邮箱一样,让一些数据显示块可以根据页面大小进行自适应。事实并不难,但是如果单纯用CSS控制的话,往往不能完全实现我们要的效果,这时候需要借助javascript,Javascript可以让我我们实现司空见怪的自适应页面,在iSunXoft的HR开源项目就应用到.

 实现原理:

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

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

  1. var h;  
  2. var w;  
  3. function resize()  
  4. {     
  5.    
  6.  var he = document.body.offsetHeight;  
  7.  var wi = document.body.offsetWidth;  
  8.  if($("DataTable").style.display.toLowerCase()==""||$("DataTable").style.display.toLowerCase()=="inline")  
  9.  {  
  10.   if (h==he&&w==wi)  
  11.   {  
  12.    if($("leftMenu").style.display.toLowerCase() == "none" )  
  13.    {  
  14.     $("DivDataList").style.width = wi - 30;  
  15.    }  
  16.    else  
  17.    {  
  18.     $("DivDataList").style.width = wi - 223;  
  19.    }          
  20.    setTimeout("resize()",1000);  
  21.    return;  
  22.   }  
  23.   h = he;  
  24.   w = wi;  
  25.     
  26.   if (he>100)  
  27.   {  
  28.    $("DivDataList").style.height = he - 172;  
  29.      
  30.   }  
  31.   if(wi>200)  
  32.   {  
  33.    $("DivDataList").style.width = wi - 223;  
  34.    if($("leftMenu").style.display.toLowerCase() == "none" )  
  35.    {  
  36.     $("DivDataList").style.width = wi - 30;  
  37.    }  
  38.   }  
  39.  }  
  40.  
  41.  if($("DataEmpWidows").style.display.toLowerCase()=="inline"||$("DataEmpWidows").style.display.toLowerCase()=="")  
  42.  {  
  43.   if (h==he&&w==wi)  
  44.   {  
  45.    if($("leftMenu").style.display.toLowerCase() == "none" )  
  46.    {  
  47.     $("DataEmpWidows").style.width = wi - 30;  
  48.    }  
  49.    else  
  50.    {  
  51.     $("DataEmpWidows").style.width = wi - 223;  
  52.    }          
  53.   }  
  54.   h = he;  
  55.   w = wi;  
  56.   if (he>150)  
  57.   {  
  58.    $("DataEmpWidows").style.height = he - 132;  
  59.   }  
  60.   if(wi>200)  
  61.   {  
  62.    $("DataEmpWidows").style.width = wi - 223;  
  63.    if($("leftMenu").style.display.toLowerCase() == "none" )  
  64.    {  
  65.     $("DataEmpWidows").style.width = wi - 30;  
  66.    }  
  67.   }  
  68.    
  69.  }  
  70.  if(typeof($("EipWindows")) != "undefined")  
  71.  {  
  72.   //if($("EipWindows").style.display.toLowerCase()=="inline")  
  73.   //{  
  74.   // if (h==he&&w==wi)  
  75.   // {  
  76.   //  if($("leftMenu").style.display.toLowerCase() == "none" )  
  77.   //  {  
  78.   //   $("EipWindows").style.width = wi - 30;  
  79.   //  }  
  80.   //  else  
  81.   //  {  
  82.   //   $("EipWindows").style.width = wi - 223;  
  83.   //  }          
  84.   // }  
  85.   // h = he;  
  86.   // w = wi;  
  87.   // if (he>150)  
  88.   // {  
  89.   //  $("EipWindows").style.height = he - 132;  
  90.   // }  
  91.   // if(wi>200)  
  92.   // {  
  93.   //  $("EipWindows").style.width = wi - 223;  
  94.   //  if($("leftMenu").style.display.toLowerCase() == "none" )  
  95.   //  {  
  96.   //   $("EipWindows").style.width = wi - 30;  
  97.   //  }  
  98.   // }      
  99.   //}  
  100.  }  
  101.  setTimeout("resize()",1000);  
  102. }  
  103. resize(); 

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

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

原文链接:http://edu.itbulo.com/200701/111570.htm

 

责任编辑:张伟 来源: 软件学院
相关推荐

2010-09-13 09:28:30

DIV自适应高度DIV最小高度

2010-09-09 10:37:39

CSSdiv列高度

2010-09-15 13:14:04

DIV控制

2011-07-22 13:30:52

JavaScript

2010-08-26 15:08:08

DIV高度

2024-10-10 09:55:51

JavaScript参数浏览器

2021-05-09 19:41:35

JavaScript 前端同源通信

2017-10-17 15:40:25

javascript刷新页面

2021-01-12 10:22:45

JavaScript并发控制前端

2021-04-07 06:00:18

JavaScript 前端并发控制

2017-10-27 22:03:35

javascrip

2024-06-14 08:54:54

2012-03-12 09:33:04

JavaScript

2010-09-08 16:50:11

JavaScriptDOM操作

2010-10-17 02:14:00

云计算IBM

2010-01-06 15:57:31

软交换技术

2012-04-23 13:49:55

PHP技术

2010-09-08 14:09:35

切换CSS

2024-02-01 09:10:04

页面引导工具Vue3

2019-12-05 15:30:21

HTMLCSSJavaScript
点赞
收藏

51CTO技术栈公众号