通过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
Oct 31 Javascript
Array的push与unshift方法性能比较分析
Mar 05 Javascript
js静态方法与实例方法分析
Jul 04 Javascript
javascript Array 数组常用方法
Apr 05 Javascript
JQuery.Ajax()的data参数类型实例详解
Nov 20 Javascript
js获取元素的外链样式的简单实现方法
Jun 06 Javascript
Three.js学习之几何形状
Aug 01 Javascript
总结AngularJS开发者最常犯的十个错误
Aug 31 Javascript
Node.js中环境变量process.env的一些事详解
Oct 26 Javascript
JS/jQuery实现DIV延时几秒后消失或显示的方法
Feb 12 jQuery
防止Layui form表单重复提交的实现方法
Sep 10 Javascript
微信小程序以7天为周期连续签到7天功能效果的示例代码
Aug 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
NT IIS下用ODBC连接数据库
2006/10/09 PHP
ThinkPHP3.2.3数据库设置新特性
2015/03/05 PHP
Yii清理缓存的方法
2016/01/06 PHP
PHP数组编码gbk与utf8互相转换的两种方法
2016/09/01 PHP
Extjs学习过程中新手容易碰到的低级错误积累
2010/02/11 Javascript
在UpdatePanel内jquery easyui效果失效的解决方法
2010/04/11 Javascript
JS 如果改变span标签的是否隐藏属性
2011/10/06 Javascript
EasyUI的treegrid组件动态加载数据问题的解决办法
2011/12/11 Javascript
js实现的点击数量加一可操作数据库
2014/05/09 Javascript
js 通过html()及text()方法获取并设置p标签的显示值
2014/05/14 Javascript
nodejs URL模块操作URL相关方法介绍
2015/03/03 NodeJs
浅谈JQuery+ajax+jsonp 跨域访问
2016/06/25 Javascript
详解Vue 普通对象数据更新与 file 对象数据更新
2017/04/26 Javascript
webpack学习--webpack经典7分钟入门教程
2017/06/28 Javascript
Vue监听事件实现计数点击依次增加的方法
2018/09/26 Javascript
手把手教你如何使用nodejs编写cli命令行
2018/11/05 NodeJs
js+springMVC 提交数组数据到后台的实例
2019/09/21 Javascript
python网络编程之UDP通信实例(含服务器端、客户端、UDP广播例子)
2014/04/25 Python
python复制文件的方法实例详解
2015/05/22 Python
Python3.4实现远程控制电脑开关机
2018/02/22 Python
将Python文件打包成.EXE可执行文件的方法
2019/08/11 Python
使用python快速实现不同机器间文件夹共享方式
2019/12/22 Python
python-xpath获取html文档的部分内容
2020/03/06 Python
美国宠物美容和宠物用品购物网站:Cherrybrook
2018/12/07 全球购物
英国地毯卖家:The Rug Seller
2019/07/18 全球购物
某公司.Net方向面试题
2014/04/24 面试题
Solaris操作系统的线程机制
2015/07/28 面试题
会计电算一体化个人简历的自我评价
2013/10/15 职场文书
个性大学生自我评价
2013/12/04 职场文书
电气工程和自动化自荐信范文
2013/12/25 职场文书
食品销售计划书
2014/04/26 职场文书
教师查摆问题自查报告
2014/10/11 职场文书
致男子1500米运动员的广播稿
2019/11/08 职场文书
Python基于Tkinter开发一个爬取B站直播弹幕的工具
2021/05/06 Python
CSS的calc函数用法小结
2022/06/25 HTML / CSS
Go语言测试库testify使用学习
2022/07/23 Golang