制作网页技巧：通过JavaScript实现页面自适应

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

  　　实现原理:

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

• [1] [2] [3] [4] 下一页 
• 复制本页网址和标题，发送给你QQ/Msn的好友一起分享
  
  
• 制作网页技巧：通过JavaScript实现页面自适应 相关文章：
• ·制作网页技巧：通过JavaScript实现页面自适应
• 制作网页技巧：通过JavaScript实现页面自适应 相关软件

上一篇:网页制作技术之Javascript精华代码集

下一篇:网页制作实例：js用于树型结构级联选择

• 特别声明：本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载，但请务必注明出处和原始作
• 者.文章版权归文章原始作者所有.对于被本站转载文章的个人和网站，我们表示深深的谢意。如果本站转
• 载的文章有版权问题请联系编辑人员,我们尽快予以更正. 转载请注明来源：http://www.hackhome.com

精品推荐

热点TOP10

特别推荐