通过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 相关文章推荐
jQuery中的.bind()、.live()和.delegate()之间区别分析
Jun 08 Javascript
jQuery EasyUI API 中文文档 - Tree树使用介绍
Nov 19 Javascript
关于textarea提交的内容无法换行的解决办法
Apr 09 Javascript
关于JavaScript与HTML的交互事件
Apr 12 Javascript
在css加载完毕后自动判断页面是否加入css或js文件
Sep 10 Javascript
js使用for循环与innerHTML获取选中tr下td值
Sep 26 Javascript
基于jQuery日历插件制作日历
Mar 11 Javascript
vue + socket.io实现一个简易聊天室示例代码
Mar 06 Javascript
js 监控iframe URL的变化实例代码
Jul 12 Javascript
详解Vue双向数据绑定原理解析
Sep 11 Javascript
详解自定义ajax支持跨域组件封装
Feb 08 Javascript
图文讲解vue的v-if使用方法
Feb 11 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
js表格分页实现代码
2009/09/18 Javascript
javascript实用方法总结
2015/02/06 Javascript
ExtJs动态生成treepanel的Json格式
2015/07/19 Javascript
浅谈jQuery 选择器和dom操作
2016/06/07 Javascript
JS实现的简单轮播图运动效果示例
2016/12/22 Javascript
EasyUI学习之Combobox级联下拉列表(2)
2016/12/29 Javascript
Vuejs 用$emit与$on来进行兄弟组件之间的数据传输通信
2017/02/23 Javascript
vue2 自定义动态组件所遇到的问题
2017/06/08 Javascript
H5基于iScroll实现下拉刷新和上拉加载更多
2017/07/18 Javascript
Angularjs中的验证input输入框只能输入数字和小数点的写法(推荐)
2017/08/16 Javascript
JS实现预加载视频音频/视频获取截图(返回canvas截图)
2017/10/09 Javascript
JS+canvas画布实现炫酷的旋转星空效果示例
2019/02/13 Javascript
layui中select,radio设置不生效的解决方法
2019/09/05 Javascript
[02:48]DOTA2英雄基础教程 暗夜魔王
2013/12/12 DOTA
python从sqlite读取并显示数据的方法
2015/05/08 Python
Python中的变量和作用域详解
2016/07/13 Python
Python selenium 三种等待方式解读
2016/09/15 Python
python删除不需要的python文件方法
2018/04/24 Python
Pipenv一键搭建python虚拟环境的方法
2018/05/22 Python
Python3.7中安装openCV库的方法
2018/07/11 Python
python子线程退出及线程退出控制的代码
2019/10/16 Python
使用pickle存储数据dump 和 load实例讲解
2019/12/30 Python
python3+openCV 获取图片中文本区域的最小外接矩形实例
2020/06/02 Python
Python tkinter制作单机五子棋游戏
2020/09/14 Python
Python通过yagmail实现发送邮件代码解析
2020/10/27 Python
Scrapy-Redis之RedisSpider与RedisCrawlSpider详解
2020/11/18 Python
python lambda的使用详解
2021/02/26 Python
高级方案规划工程师岗位职责
2013/11/29 职场文书
高中自我评价分享
2013/12/05 职场文书
争论的故事教学反思
2014/02/06 职场文书
一份教室追逐打闹的检讨书
2014/09/27 职场文书
人事部:年度述职报告范文
2019/07/12 职场文书
签证扫盲贴,41个常见签证知识,需要的拿走
2019/08/09 职场文书
厉害!这是Redis可视化工具最全的横向评测
2021/07/15 Redis
用Python可视化新冠疫情数据
2022/01/18 Python
Python采集股票数据并制作可视化柱状图
2022/04/04 Python