通过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之大字符串的连接的StringBuffer 类
May 08 Javascript
js 判断文件类型并控制表单提交示例代码
Nov 14 Javascript
jQuery仿天猫实现超炫的加入购物车
May 04 Javascript
JavaScript实现带箭头标识的多级下拉菜单效果
Aug 27 Javascript
尝试动手制作javascript放大镜效果
Dec 25 Javascript
Easyui的组合框的取值与赋值
Oct 28 Javascript
AngularJS入门教程之与服务器(Ajax)交互操作示例【附完整demo源码下载】
Nov 02 Javascript
vue项目中做编辑功能传递数据时遇到问题的解决方法
Dec 19 Javascript
详解vue-router 2.0 常用基础知识点之router.push()
May 10 Javascript
layer.open 子页面弹出层向父页面传输数据的例子
Sep 26 Javascript
js实现单元格拖拽效果
Feb 10 Javascript
Javascript Symbol原理及使用方法解析
Oct 22 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句法规则详解 入门学习
2011/11/09 PHP
用js得到网页中所有的div的id
2020/10/19 Javascript
jQuery 常见学习网站与参考书
2009/11/09 Javascript
jQuery中的常用事件总结
2009/12/27 Javascript
jquery 插件学习(四)
2012/08/06 Javascript
jquery parent和parents的区别分析
2013/10/02 Javascript
js中浮点型运算BUG的解决方法说明
2014/01/06 Javascript
js 判断图片是否加载完以及实现图片的预下载
2014/08/14 Javascript
深入剖析JavaScript编程中的对象概念
2015/10/21 Javascript
浅谈使用MVC模式进行JavaScript程序开发
2015/11/10 Javascript
js全选按钮的实现方法
2015/11/17 Javascript
原生JS取代一些JQuery方法的简单实现
2016/09/20 Javascript
Bootstrap CSS布局之代码
2016/12/17 Javascript
微信小程序 实现点击添加移除class
2017/06/12 Javascript
本地存储localStorage用法详解
2017/07/31 Javascript
js断点调试经验分享
2017/12/08 Javascript
Node使用Sequlize连接Mysql报错:Access denied for user ‘xxx’@‘localhost’
2018/01/03 Javascript
详解NODEJS的http实现
2018/01/04 NodeJs
vue+jquery+lodash实现滑动时顶部悬浮固定效果
2018/04/28 jQuery
js+css实现红包雨效果
2018/07/12 Javascript
js限制输入框只能输入数字(onkeyup触发)
2018/09/28 Javascript
node中使用es6/7/8(支持性与性能)
2019/03/28 Javascript
vue中实现Monaco Editor自定义提示功能
2019/07/05 Javascript
微信小程序点击滚动到指定位置的实现
2020/05/22 Javascript
基于原生JS封装的Modal对话框插件的示例代码
2020/09/09 Javascript
Vue时间轴 vue-light-timeline的用法说明
2020/10/29 Javascript
python网络爬虫采集联想词示例
2014/02/11 Python
python使用opencv进行人脸识别
2017/04/07 Python
Python 实现微信自动回复的方法
2020/09/11 Python
Java的类可以定义为Protected或者Private得吗
2015/09/25 面试题
机关作风建设心得体会
2014/10/22 职场文书
2015年仓管员工作总结
2015/04/21 职场文书
小学一年级班主任工作经验交流材料
2015/11/02 职场文书
详解如何在Canvas中添加事件的方法
2021/04/17 Javascript
canvas多重阴影发光效果实现
2021/04/20 Javascript
LayUI+Shiro实现动态菜单并记住菜单收展的示例
2021/05/06 Javascript