Prototype1.5 rc2版指南最后一篇之Position


Posted in Javascript onJanuary 10, 2007

Position是prototype中定义的一个对象,提供了操作DOM中与位置相关的方法,要很好的理解元素在页面中的位置,可以参考这篇文章:Relatively Absolute

具体代码如下,按照代码说说,其中英文是作者的注释,中文红色的才是偶的说明或翻译英文的注释,采用顶式注释法(注释在要说明的代码的上面)说明

  // set to true if needed, warning: firefox performance problems
  // NOT neeeded for page scrolling, only if draggable contained in
  // scrollable elements
  //只有在使用拖动的时候元素包含在有滚动条的元素中才需要设置为true
  includeScrollOffsets: false,

  // must be called before calling withinIncludingScrolloffset, every time the
  // page is scrolled
  //当页面被scrolled后,使用withinIncludingScrolloffset的时候需要先调用这个方法

  prepare: function() {
    //横向滚动条滚动的距离

    this.deltaX =  window.pageXOffset
                || document.documentElement.scrollLeft
                || document.body.scrollLeft
                || 0;
    //纵向滚动条滚动的距离
    this.deltaY =  window.pageYOffset
                || document.documentElement.scrollTop
                || document.body.scrollTop
                || 0;
  },

//元素由于滚动条偏移的总距离 
realOffset: function(element) {
    var valueT = 0, valueL = 0;
    do {
      valueT += element.scrollTop  || 0;
      valueL += element.scrollLeft || 0;
      element = element.parentNode;
    } while (element);
    return [valueL, valueT];
  },

//元素在页面中由offsetParent累积的offset,当offsetParent都没有滚动条时,就是元素在页面中的位置
cumulativeOffset: function(element) {
    var valueT = 0, valueL = 0;
    do {
      valueT += element.offsetTop  || 0;
      valueL += element.offsetLeft || 0;
      element = element.offsetParent;
    } while (element);
    return [valueL, valueT];
  },

//元素相对于containing block("nearest positioned ancestor")的位置,也就是相对于最近的一个position设置为relative或者absolute的祖先节点的位置,如果没有就是相对于body的位置,跟style.top,style.left一样?
positionedOffset: function(element) {
    var valueT = 0, valueL = 0;
    do {
      valueT += element.offsetTop  || 0;
      valueL += element.offsetLeft || 0;
      element = element.offsetParent;
      if (element) {
        if(element.tagName=='BODY') break;
        var p = Element.getStyle(element, 'position');
        if (p == 'relative' || p == 'absolute') break;
      }
    } while (element);
    return [valueL, valueT];
  },

  //offsetParent
  offsetParent: function(element) {
    if (element.offsetParent) return element.offsetParent;
    if (element == document.body) return element;

    while ((element = element.parentNode) && element != document.body)
      if (Element.getStyle(element, 'position') != 'static')
        return element;

    return document.body;
  },

  // caches x/y coordinate pair to use with overlap
  //判断指定的位置是否在元素内
  within: function(element, x, y) {
    if (this.includeScrollOffsets)
      return this.withinIncludingScrolloffsets(element, x, y);
    this.xcomp = x;
    this.ycomp = y;
    this.offset = this.cumulativeOffset(element);

    return (y >= this.offset[1] &&
            y <  this.offset[1] + element.offsetHeight &&
            x >= this.offset[0] &&
            x <  this.offset[0] + element.offsetWidth);
  },

//跟within差不多,不过考虑到滚动条,也许是在元素上面,但不是直接在上面,因为滚动条也许已经使元素不可见了 
withinIncludingScrolloffsets: function(element, x, y) {
    var offsetcache = this.realOffset(element);

    this.xcomp = x + offsetcache[0] - this.deltaX;
    this.ycomp = y + offsetcache[1] - this.deltaY;
    this.offset = this.cumulativeOffset(element);

    return (this.ycomp >= this.offset[1] &&
            this.ycomp <  this.offset[1] + element.offsetHeight &&
            this.xcomp >= this.offset[0] &&
            this.xcomp <  this.offset[0] + element.offsetWidth);
  },

  // within must be called directly before
  //在调用这个方法前,必须先调用within,返回在with指定的位置在水平或者垂直方向上占用的百分比
  overlap: function(mode, element) { 
    if (!mode) return 0; 
    if (mode == 'vertical')
      return ((this.offset[1] + element.offsetHeight) - this.ycomp) /
        element.offsetHeight;
    if (mode == 'horizontal')
      return ((this.offset[0] + element.offsetWidth) - this.xcomp) /
        element.offsetWidth;
  },

//返回元素相对页面的真实位置 
page: function(forElement) {
    var valueT = 0, valueL = 0;

    var element = forElement;
    do {
      valueT += element.offsetTop  || 0;
      valueL += element.offsetLeft || 0;

      // Safari fix
      if (element.offsetParent==document.body)
        if (Element.getStyle(element,'position')=='absolute') break;

    } while (element = element.offsetParent);

    element = forElement;
    do {
      if (!window.opera || element.tagName=='BODY') {
        valueT -= element.scrollTop  || 0;
        valueL -= element.scrollLeft || 0;
      }
    } while (element = element.parentNode);

    return [valueL, valueT];
  },

//设置target为source的位置,大小 
clone: function(source, target) {
    var options = Object.extend({
      setLeft:    true,
      setTop:     true,
      setWidth:   true,
      setHeight:  true,
      offsetTop:  0,
      offsetLeft: 0
    }, arguments[2] || {})

    // find page position of source
    source = $(source);
    var p = Position.page(source);

    // find coordinate system to use
    target = $(target);
    var delta = [0, 0];
    var parent = null;
    // delta [0,0] will do fine with position: fixed elements,
    // position:absolute needs offsetParent deltas
    if (Element.getStyle(target,'position') == 'absolute') {
      parent = Position.offsetParent(target);
      delta = Position.page(parent);
    }

    // correct by body offsets (fixes Safari)
    if (parent == document.body) {
      delta[0] -= document.body.offsetLeft;
      delta[1] -= document.body.offsetTop;
    }

    // set position
    if(options.setLeft)   target.style.left  = (p[0] - delta[0] + options.offsetLeft) + 'px';
    if(options.setTop)    target.style.top   = (p[1] - delta[1] + options.offsetTop) + 'px';
    if(options.setWidth)  target.style.width = source.offsetWidth + 'px';
    if(options.setHeight) target.style.height = source.offsetHeight + 'px';
  },

//将element的position设置为absolute的模式 
absolutize: function(element) {
    element = $(element);
    if (element.style.position == 'absolute') return;
    Position.prepare();

    var offsets = Position.positionedOffset(element);
    var top     = offsets[1];
    var left    = offsets[0];
    var width   = element.clientWidth;
    var height  = element.clientHeight;

    element._originalLeft   = left - parseFloat(element.style.left  || 0);
    element._originalTop    = top  - parseFloat(element.style.top || 0);
    element._originalWidth  = element.style.width;
    element._originalHeight = element.style.height;

    element.style.position = 'absolute';
    element.style.top    = top + 'px';;
    element.style.left   = left + 'px';;
    element.style.width  = width + 'px';;
    element.style.height = height + 'px';;
  },

//将element的position设置为absolute的模式 
relativize: function(element) {
    element = $(element);
    if (element.style.position == 'relative') return;
    Position.prepare();

    element.style.position = 'relative';
    var top  = parseFloat(element.style.top  || 0) - (element._originalTop || 0);
    var left = parseFloat(element.style.left || 0) - (element._originalLeft || 0);

    element.style.top    = top + 'px';
    element.style.left   = left + 'px';
    element.style.height = element._originalHeight;
    element.style.width  = element._originalWidth;
  }
}

// Safari returns margins on body which is incorrect if the child is absolutely
// positioned.  For performance reasons, redefine Position.cumulativeOffset for
// KHTML/WebKit only.
if (/Konqueror|Safari|KHTML/.test(navigator.userAgent)) {
  Position.cumulativeOffset = function(element) {
    var valueT = 0, valueL = 0;
    do {
      valueT += element.offsetTop  || 0;
      valueL += element.offsetLeft || 0;
      if (element.offsetParent == document.body)
        if (Element.getStyle(element, 'position') == 'absolute') break;

      element = element.offsetParent;
    } while (element);

    return [valueL, valueT];
  }
}

终于把Prototype的所有部分都写完了哈哈,越来越佩服自己的耐力了Prototype1.5 rc2版指南最后一篇之Position

下一步决定写写Scriptaculous这个超级流行的效果库

Javascript 相关文章推荐
在页面上点击任一链接时触发一个事件的代码
Apr 07 Javascript
你需要知道的JavsScript可以做什么?
Jun 29 Javascript
js中的getAttribute方法使用示例
Aug 01 Javascript
jquery捕捉回车键及获取checkbox值与异步请求的方法
Dec 24 Javascript
js插件dropload上拉下滑加载数据实例解析
Jul 27 Javascript
功能强大的Bootstrap组件(结合js)
Aug 03 Javascript
JS控制FileUpload的上传文件类型实例代码
Oct 07 Javascript
JS实现的简单轮播图运动效果示例
Dec 22 Javascript
vue2.X组件学习心得(新手必看篇)
Jul 05 Javascript
js原生代码实现轮播图的实例讲解
Jul 28 Javascript
用vue的双向绑定简单实现一个todo-list的示例代码
Aug 03 Javascript
layui use 定义js外部引用函数的方法
Sep 26 Javascript
Prototype使用指南之form.js
Jan 10 #Javascript
Prototype使用指南之selector.js
Jan 10 #Javascript
Prototype使用指南之dom.js
Jan 10 #Javascript
Prototype使用指南之ajax
Jan 10 #Javascript
Prototype使用指南之range.js
Jan 10 #Javascript
Prototype使用指南之hash.js
Jan 10 #Javascript
Prototype使用指南之array.js
Jan 10 #Javascript
You might like
基于PHP+MySQL的聊天室设计
2006/10/09 PHP
dedecms 制作模板中使用的全局标记图文教程
2007/03/11 PHP
PHP实现可精确验证身份证号码的工具类示例
2018/05/31 PHP
参考:关于Javascript中实现暂停的几篇文章
2007/03/04 Javascript
JS加ASP二级域名转向的代码
2007/05/17 Javascript
在javascript将NodeList作为Array数组处理的方法
2010/07/09 Javascript
JavaScript中的条件判断语句使用详解
2015/06/03 Javascript
js+html5通过canvas指定开始和结束点绘制线条的方法
2015/06/05 Javascript
jquery实现可横向和竖向展开的动态下滑菜单效果
2015/08/24 Javascript
angular实现form验证实例代码
2017/01/17 Javascript
Vue实例简单方法介绍
2017/01/20 Javascript
JavaScript使用readAsDataUrl方法预览图片
2017/05/10 Javascript
vue之数据交互实例代码
2017/06/20 Javascript
微信小程序报错:this.setData is not a function的解决办法
2017/09/27 Javascript
Vue 进阶之路(三)
2019/04/18 Javascript
vue2 v-model/v-text 中使用过滤器的方法示例
2019/05/09 Javascript
对Layer弹窗使用及返回数据接收的实例详解
2019/09/26 Javascript
Python基于有道实现英汉字典功能
2015/07/25 Python
十个Python程序员易犯的错误
2015/12/15 Python
Python中的is和==比较两个对象的两种方法
2017/09/06 Python
解决python测试opencv时imread导致的错误问题
2019/01/26 Python
Python编写合并字典并实现敏感目录的小脚本
2019/02/26 Python
python 实现将list转成字符串,中间用空格隔开
2019/12/25 Python
Python基于Dlib的人脸识别系统的实现
2020/02/26 Python
Python 判断时间是否在时间区间内的实例
2020/05/16 Python
python 基于selectors库实现文件上传与下载
2020/12/31 Python
意大利专业化妆品品牌:KIKO MILANO
2017/02/01 全球购物
美国庭院家具购物网站:AlphaMarts
2019/04/10 全球购物
中医临床专业自我鉴定范文
2014/01/15 职场文书
医院深入开展党的群众路线教育实践活动实施方案
2014/08/27 职场文书
党员应该树立反腐倡廉的坚定意识思想汇报
2014/09/12 职场文书
清洁工个人总结
2015/03/04 职场文书
观后感开头
2015/06/19 职场文书
创业者如何撰写出一份打动投资人的商业计划书?
2019/07/02 职场文书
创业项目大全(适合在家创业的项目)
2019/08/15 职场文书
一文简单了解MySQL前缀索引
2022/04/03 MySQL