javascript YUI 读码日记之 YAHOO.util.Dom - Part.4_YUI.Ext相关

var getXY = function() {
    // 判断是否是 IE
    if (document.documentElement.getBoundingClientRect) {
        // 注1
        return function(el) {
            var box = el.getBoundingClientRect();

            var rootNode = el.ownerDocument;
            return [box.left + 
          Y.Dom.getDocumentScrollLeft(rootNode), box.top +
                    Y.Dom.getDocumentScrollTop(rootNode)];
        };
    } else {
        return function(el) {
            var pos = [el.offsetLeft, el.offsetTop];
            var parentNode = el.offsetParent;

            // 判断是否在 Safari 下,节点是否为 absolute ,
            // 并且父元素是否为 body
            // 注2.
            var accountForBody = (isSafari &&
                    Y.Dom.getStyle(el, 'position') == 'absolute' &&
                    el.offsetParent == el.ownerDocument.body);

            // 如果父元素不是自身
            if (parentNode != el) {
                while (parentNode) {
                    pos[0] += parentNode.offsetLeft;
                    pos[1] += parentNode.offsetTop;
                    if (!accountForBody && isSafari && 
                            Y.Dom.getStyle(parentNode,'position') 
                                                  == 'absolute' ) { 
                        accountForBody = true;
                    }
                    parentNode = parentNode.offsetParent;
                }
            }

            // 还是针对 Safari 的
            if (accountForBody) { //safari doubles in this case
                pos[0] -= el.ownerDocument.body.offsetLeft;
                pos[1] -= el.ownerDocument.body.offsetTop;
            } 
            parentNode = el.parentNode;

            // account for any scrolled ancestors
            while ( parentNode.tagName && 
                         !patterns.ROOT_TAG.test(parentNode.tagName) ) 
            {
               // work around opera inline/table scrollLeft/Top bug
               // 注3.
               if (Y.Dom.getStyle(parentNode, 'display')
                                  .search(/^inline|table-row.*$/i)) { 
                    pos[0] -= parentNode.scrollLeft;
                    pos[1] -= parentNode.scrollTop;
                }

                parentNode = parentNode.parentNode; 
            }

            return pos;
        };
    }
}() // NOTE: Executing for loadtime branching注. 有关 IE 的 getBoundingClientRect 方法,可以参考这里。
注. Safari 的 BUG,详细情况参见这里。
注. 参见老外的原话(出处):
"- Remove parent scroll UNLESS that parent is inline or a table 
to work around Opera inline/table scrollLeft/Top bug"
Fixed in Opera 9.5. (also, Opera 9.5 supports getBoundingClientRect 
and getClientRects.)最后,有关更多 DOM 的兼容性,可以参看 PPK 的总结(怎么又是他)。

时间: 2024-10-27 10:29:06

javascript YUI 读码日记之 YAHOO.util.Dom - Part.4_YUI.Ext相关的相关文章

YUI 读码日记之 YAHOO.util.Dom - Part.1_YUI.Ext相关

先绕开头部很多的 if...else (其实就是定义 toCamel 与 getStyle 两个函数) - 由于浏览器的实现不统一,才造成如此麻烦的情况,回头可以聊聊这些代码. 下面我们在 YAHOO.util.Dom 类中看看有哪些宝藏.目前思想已经逐步的分裂,我看见个函数说个函数. // 基本上可以认为是 document.getElementById 的翻版 get: function(el) {     // 如果已经是 HTMLElement ,那么就直接返回     if (el &

YUI 读码日记之 YAHOO.lang.is*_YUI.Ext相关

YAHOO.lang = YAHOO.lang || {     isArray: function(o) {          if (o) {            var l = YAHOO.lang;            // 如果该对象有 length 这个属性,同时支持 splice 方法,            // 那么就认为它为数组.            return l.isNumber(o.length) && l.isFunction(o.splice);   

javascript 放大镜 v1.0 基于Yui2 实现的放大镜效果_YUI.Ext相关

v1.0实现功能 1 放大倍数设置 2 透明度设置 3 反转特效 4 放大图片层的大小自定义 5 鼠标层的大小自定义 6 ie6下select遮盖问题 7 光标样式自定义 8 zIndex设置 简单初始化方法举例 复制代码 代码如下: new flower.init("Demo","mag"); new flower.init("Demo1","mag1",{ max:3,zoomType:false,zoomWidth:20

Javascript的一种模块模式_YUI.Ext相关

Douglas Crockford已经传授了一个有用的单例模式(singleton pattern)实现此规则,我认为他的模式有益于你基于YUI的那些应用.Douglas叫它模块模式(module pattern).它是如下工作的: 创建一个命名空间对象:如果你使用YUI,可以用YAHOO.namespace()方法: YAHOO.namespace("myProject");这分配了一个空的myProject对象,是YAHOO的一个成员(如 果myProject已存在的话,则不会被覆

学习YUI.Ext第五日--做拖放Darg&Drop_YUI.Ext相关

拖放某个元素Darg&Drop是windows(视窗)问世时的一个重要特征.现在我们要在浏览器里面实现,怎么做呢?先看看基本例子: 复制代码 代码如下: YAHOO.example.DDApp = function() {      var dd;      return {          init2: function() {  //   var dropzone =["dz"];  //   for(i in dropzone){  //           new Y

如何简单地用YUI做JavaScript动画_YUI.Ext相关

原文地址:http://www.jackslocum.com/blog/2006/08/24/javascript-animations-with-yahoo-ui-made-easy/ YUI的动画类简直就是一门艺术工作.不像其它的传统的JS库,提供了已经"预设好"的直接可运行的效果,相反,它由开发者做自己喜欢的.在这点,我比较喜欢适当地运行一些动画和变换效果,越多越好. 按照这么地说,也会有个问题.动画API是非常"底层"的工作,而且需要您花时间去弄的,子类的构

javascript-请教一下YAHOO.util.Connect.asyncRequest的用法

问题描述 请教一下YAHOO.util.Connect.asyncRequest的用法 通过这段代码YAHOO.util.Connect.asyncRequest('POST''/xpe/jingpinke/service/security/json/login' callback null)把POST请求发送给服务器端 和我直接用post请求发送给服务器端有什么区别 ??我如何通过java代码模拟这段JS代码提交数据给服务器. 解决方案 参考Java利用httpasyncclient进行异步H

为Yahoo! UI Extensions Grid增加内置的可编辑器_YUI.Ext相关

原文地址 文章日期:2006/9/10 对YUI-EXT GIRD功能需求最强烈的是内置可编辑的支持.市场上大多数收费的JAVASCRIPT GIRD,我看过的那些可编辑支持,并没有给我留下太深的印象.它给你一个基本的TEXT FIELD,一些CHECKBOXS或者是Select fields,这导致了你一边单击某个字段在编辑,另一边厢插入一个FORM到这个单元格之中,不知不觉地,会出现越来越多编辑过的"脚印footprint",尤其是IE,在很多行的情况下. 所以我决定不采用这种方法

学习YUI.Ext第七日-View&JSONView Part Two-一个画室网站的案例_YUI.Ext相关

之前在Part 1简单介绍了Veiw和JSONView.今天这里小弟为大家说说应用的案例,原本Jack的Image Chooser是一个非常好的案例,当中包含Jack大量的奇技淫巧,不过正因为这样,过于深奥,小弟我亦不能全盘吃透,只挑其"勃大茎深"之处,与君共勉之!本文包含四大知识点:1.在LayoutDialog中加入Tabs:2.View的使用方式:3.JSONView的使用方式;4.获取XML/JSON的fields值与分页 演示地址 [View之定义]  A View is g