通过JAVAScript实现页面自适应


Posted in Javascript onJanuary 19, 2007

有时候,我们可能需要象新版的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;

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

Javascript 相关文章推荐
Javascript 自定义类型方法小结
Mar 02 Javascript
jQuery学习笔记之控制页面实现代码
Feb 27 Javascript
浅析XMLHttpRequest的缓存问题
Dec 13 Javascript
javascript轻松实现当鼠标移开时已弹出子菜单自动消失
Dec 29 Javascript
jquery隔行换色效果实现方法
Jan 15 Javascript
javascript正则表达式总结
Feb 29 Javascript
JS前向后瞻正则表达式定义与用法示例
Dec 27 Javascript
es6的数字处理的方法(5个)
Mar 16 Javascript
arcgis for js栅格图层叠加(Raster Layer)问题
Nov 22 Javascript
从vue基础开始创建一个简单的增删改查的实例代码(推荐)
Feb 11 Javascript
JavaScript设计模式之代理模式实例分析
Jan 16 Javascript
利用JS代码自动删除稿件的普通弹幕功能
Sep 20 Javascript
Javascript----文件操作
Jan 18 #Javascript
强悍无比的WEB开发好助手FireBug(Firefox Plugin)
Jan 16 #Javascript
javaScript对象和属性的创建方法
Jan 15 #Javascript
jQuery 1.0.4 - New Wave Javascript(js源文件)
Jan 15 #Javascript
新浪的图片新闻效果
Jan 13 #Javascript
jQuery中文入门指南,翻译加实例,jQuery的起点教程
Jan 13 #Javascript
用htc组件制作windows选项卡
Jan 13 #Javascript
You might like
php中的一个中文字符串截取函数
2007/02/14 PHP
php分页示例代码
2007/03/19 PHP
PHP 模拟登陆MSN并获得用户信息
2009/05/16 PHP
深入php之规范编程命名小结
2013/05/15 PHP
Android ProgressBar进度条和ProgressDialog进度框的展示DEMO
2013/06/19 PHP
PHP定时更新程序设计思路分享
2014/06/10 PHP
ThinkPHP的URL重写问题
2014/06/22 PHP
详解WordPress中创建和添加过滤器的相关PHP函数
2015/12/29 PHP
thinkPHP5.0框架URL访问方法详解
2017/03/18 PHP
laravel中的一些简单实用功能
2018/11/03 PHP
PHP检查URL包含特定字符串实例方法
2019/02/11 PHP
PHP 对象接口简单实现方法示例
2020/04/13 PHP
JavaScript 继承机制的实现(待续)
2010/05/18 Javascript
javascript 获取图片尺寸及放大图片
2013/09/04 Javascript
浅谈Javascript实现继承的方法
2015/07/06 Javascript
理解javascript中的严格模式
2016/02/01 Javascript
AngularJS基础 ng-cloak 指令简单示例
2016/08/01 Javascript
Jquery Easyui选项卡组件Tab使用详解(10)
2016/12/18 Javascript
JS实现前端页面的搜索功能
2018/06/12 Javascript
js中的reduce()函数讲解
2019/01/18 Javascript
jQuery-App输入框实现实时搜索
2020/11/19 jQuery
Pandas过滤dataframe中包含特定字符串的数据方法
2018/11/07 Python
python 高效去重复 支持GB级别大文件的示例代码
2018/11/08 Python
Window环境下Scrapy开发环境搭建
2018/11/18 Python
python 读取修改pcap包的例子
2019/07/23 Python
Django获取该数据的上一条和下一条方法
2019/08/12 Python
波兰在线儿童和婴儿用品零售商:pinkorblue
2019/06/29 全球购物
加拿大服装和鞋类零售商:Mark’s
2021/01/04 全球购物
人力资源专员自我评价怎么写
2013/09/19 职场文书
《故乡》教学反思
2014/04/10 职场文书
购房协议书
2014/04/11 职场文书
竞选班长演讲稿400字
2014/08/22 职场文书
2014第二批党员干部对照“四风”找差距检查材料思想汇报
2014/09/18 职场文书
领导干部作风建设总结
2014/10/23 职场文书
大学生国家助学金感谢信
2015/01/23 职场文书
SQL bool盲注和时间盲注详解
2022/07/23 SQL Server