通过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 相关文章推荐
js Flash插入函数免激活代码
Mar 31 Javascript
jquery png 透明解决方案(推荐)
Aug 21 Javascript
详解JavaScript的流程控制语句
Nov 30 Javascript
用JS动态设置CSS样式常见方法小结(推荐)
Nov 10 Javascript
jQuery中的siblings()是什么意思(推荐)
Dec 29 Javascript
基于canvas的二维码邀请函生成插件
Feb 14 Javascript
在Vue.js中使用Mixins的方法
Sep 12 Javascript
深入理解Node module模块
Mar 26 Javascript
微信小程序-可移动菜单的实现过程详解
Jun 24 Javascript
JavaScript碰撞检测原理及其实现代码
Mar 12 Javascript
Vue(定时器)解决mounted不能获取到data中的数据问题
Jul 30 Javascript
JS代码实现页面切换效果
Jan 10 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
一个连接两个不同MYSQL数据库的PHP程序
2006/10/09 PHP
PHP中通过加号合并数组的一个简单方法分享
2011/01/27 PHP
用C/C++扩展你的PHP 为你的php增加功能
2012/09/06 PHP
php输出xml属性的方法
2015/03/19 PHP
php微信开发之批量生成带参数的二维码
2016/06/26 PHP
JavaScript使用prototype定义对象类型
2007/02/07 Javascript
javascript instanceof 内部机制探析
2010/10/15 Javascript
jquery显示和隐藏div特效实例
2013/02/27 Javascript
轻量级的原生js日历插件calendar.js使用指南
2015/04/28 Javascript
jQuery实现鼠标经过图片变亮其他变暗效果
2015/05/08 Javascript
纯javascript制作日历控件
2015/07/17 Javascript
微信小程序 WXML、WXSS 和JS介绍及详解
2016/10/08 Javascript
详解angularjs利用ui-route异步加载组件
2017/05/21 Javascript
JS对象与JSON互转换、New Function()、 forEach()、DOM事件流等js开发基础小结
2017/08/10 Javascript
微信小程序使用toast消息对话框提示用户忘记输入用户名或密码功能【附源码下载】
2017/12/09 Javascript
webpack+vue2构建vue项目骨架的方法
2018/01/09 Javascript
详解如何使用node.js的开发框架express创建一个web应用
2018/12/20 Javascript
小程序文字跑马灯效果
2018/12/28 Javascript
通过npm或yarn自动生成vue组件的方法示例
2019/02/12 Javascript
vue 中的 render 函数作用详解
2020/02/28 Javascript
[05:09]第二届DOTA2亚洲邀请赛决赛日比赛集锦:iG 3:0 OG夺冠
2017/04/05 DOTA
[58:18]2018DOTA2亚洲邀请赛3月29日 小组赛B组 iG VS Mineski
2018/03/30 DOTA
python实现zencart产品数据导入到magento(python导入数据)
2014/04/03 Python
python中xrange和range的区别
2014/05/13 Python
python中对list去重的多种方法
2014/09/18 Python
python保存字符串到文件的方法
2015/07/01 Python
在Pandas中处理NaN值的方法
2019/06/25 Python
python循环输出三角形图案的例子
2019/11/22 Python
CSS3实现曲线阴影和翘边阴影
2016/05/03 HTML / CSS
美国男士和女士奢侈品折扣手表购物网站:Certified Watch Store
2018/06/13 全球购物
小学教师岗位职责
2013/11/25 职场文书
物业保安员岗位职责制度
2014/01/30 职场文书
教师民族团结演讲稿
2014/08/27 职场文书
春节慰问信范文
2015/02/15 职场文书
MySQL sql_mode修改不生效的原因及解决
2021/05/07 MySQL
Windows下载并安装MySQL8.0.x 版本的完整教程
2022/04/10 MySQL