通过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代码混淆综合解决方案-Javascript在线混淆器
Dec 18 Javascript
js修改地址栏URL参数解决url参数问题
Dec 15 Javascript
使用javascipt---实现二分查找法
Apr 10 Javascript
举例讲解AngularJS中的模块
Jun 17 Javascript
jquery ajax局部加载方法详解(实现代码)
May 12 Javascript
JavaScript中闭包之浅析解读(必看篇)
Aug 25 Javascript
使用Vue.js创建一个时间跟踪的单页应用
Nov 28 Javascript
Angular 4.x 动态创建表单实例
Apr 25 Javascript
JavaScript数据结构学习之数组、栈与队列
May 02 Javascript
Vue中axios的封装(报错、鉴权、跳转、拦截、提示)
Aug 20 Javascript
解决Angularjs异步操作后台请求用$q.all排列先后顺序问题
Nov 29 Javascript
Jquery Fade用法详解
Nov 06 jQuery
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 mail 通过Windows的SMTP发送邮件失败的解决方案
2009/05/27 PHP
使用CodeIgniter的类库做图片上传
2014/06/12 PHP
PHP启动windows应用程序、执行bat批处理、执行cmd命令的方法(exec、system函数详解)
2014/10/20 PHP
Laravel 4 初级教程之安装及入门
2014/10/30 PHP
表单元素的submit()方法和onsubmit事件应用概述
2013/02/01 Javascript
javascript中的绑定与解绑函数应用示例
2013/06/24 Javascript
jquery得到font-size属性值实现代码
2013/09/30 Javascript
js选项卡的实现方法
2015/02/09 Javascript
使用jquery组件qrcode生成二维码及应用指南
2015/02/22 Javascript
jquery让指定的元素闪烁显示的方法
2015/03/17 Javascript
浅谈jquery中delegate()与live()
2015/06/22 Javascript
基于Javascript实现返回顶部按钮
2016/02/29 Javascript
jQuery ajaxSubmit 实现ajax提交表单局部刷新
2016/07/04 Javascript
javascript图片预览和上传(兼容IE)
2017/03/15 Javascript
vue.js异步上传文件前后端实现代码
2017/08/22 Javascript
Vue结合SignalR实现前后端实时消息同步
2017/09/19 Javascript
javaScript字符串工具类StringUtils详解
2017/12/08 Javascript
Nodejs libuv运行原理详解
2019/08/21 NodeJs
python读取Android permission文件
2013/11/01 Python
python之模拟鼠标键盘动作具体实现
2013/12/30 Python
Python常用小技巧总结
2015/06/01 Python
Python使用matplotlib填充图形指定区域代码示例
2018/01/16 Python
Python3 使用cookiejar管理cookie的方法
2018/12/28 Python
Django框架模板介绍
2019/01/15 Python
python之mock模块基本使用方法详解
2019/06/27 Python
html5中监听canvas内部元素点击事件的三种方法
2019/04/28 HTML / CSS
美国儿童运动鞋和服装零售商:Kids Foot Locker
2017/08/05 全球购物
优秀的教师个人的中文求职信
2013/09/21 职场文书
生产管理的三大手法
2013/11/11 职场文书
幼儿园开学家长寄语
2014/01/19 职场文书
电力公司个人求职信范文
2014/02/04 职场文书
培训心得体会怎么写
2016/01/25 职场文书
MySQL连接查询你真的学会了吗?
2021/06/02 MySQL
Python使用socket去实现TCP客户端和TCP服务端
2022/04/12 Python
深入理解 Golang 的字符串
2022/05/04 Golang
MySQL实现字段分割一行转多行的示例代码
2022/07/07 MySQL