Position是prototype中定义的一个对象,提供了操作DOM中与位置相关的方法,要很好的理解元素在页面中的位置,具体代码如下,按照代码说说,其中英文是作者的注释,中文的才是偶的说明或翻译英文的注释,采用顶式注释法(注释在要说明的代码的上面)说明
// 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的所有部分都写完了,哈哈,越来越佩服自己的耐力了
下一步决定写写Scriptaculous这个超级流行的效果库
Prototype1.5的下载为什么不简单点
这几天在论坛和博客上看到很多人问Prototype1.5怎么下载,为什么下载这么困难呢?
Prototype的官方网站是:http://prototype.conio.net/,如果你一下子找不到,到google上搜索Prototype就找到了
下载当然要到官方网站下载了,但是问题是Prototype官方网站更新太慢,首页上的下载连接还是prototype1.4的,而且只是一个单独的js文件
那么怎么下载最新版本的呢?
1,如果你只想得到一个单独的js文件使用的话,其实官方网站提供了最新版1.5的下载, 下面连接就是下载地址了http://dev.rubyonrails.org/browser/trunk/railties/html/javascripts/prototype.js?format=raw
2,如果你想得到详细的源文件以及测试代码,需要通过svn下载:使用下面的命令就可以了:svn co http://dev.rubyonrails.org/svn/rails/spinoffs/prototype
如果你没有svn的话,我已经下载打包了传到51js论坛中,查看下面连接的帖子中有下载的:http://bbs.51js.com/viewthread.php?tid=65070&highlight=prototype
想必很多prototype爱好者都一直在等待着prototype1.5的发布,虽然等待的时间很长,但是这一令人激动的一天终于到来了
因为网友提醒,今天访问prototype网站,发现原来的网址已经自动跳转到新的网站去了, 作者使用了一个独立的域名 http://www.prototypejs.org/
刚才在google里搜索prototype,发现搜索结果中出现的已经是新网站了,google爬虫也蛮勤快的嘛
更让人高兴的是,一向被人诟病的文档问题这一版有了非常大的提高,可以说是有了质的飞跃,以前的版本基本上没有文档,要使用只有自己理解了,
现在在它的官方网站上有专门的API参考以及一些使用的例子,看来作者真正的关于这个问题来了,prototype爱好者应该高兴一把了哈哈,赶快到prototype官方网站下载了Engoy吧 如果感觉阅读英文是一种折磨的话,可以参考我以前写的prototype 1.5使用指南系列文章.
分享到:
相关推荐
《prototype_1.7.3.js:JavaScript框架的里程碑》 在JavaScript的世界里,Prototype库是一个不可或缺的重要组成部分,尤其在Web开发领域,它为开发者提供了强大的功能和便利性。Prototype_1.7.3.js是这个库的一个...
通过阅读Prototype.js 1.6的中文和英文手册,开发者可以深入了解其用法和背后的原理,提高JavaScript编程效率,创建更具交互性和动态性的网页应用。"prototypeAPI"这个文件可能包含了Prototype.js的API参考文档,是...
Prototype.js 是一款广泛使用的JavaScript库,它极大地扩展了JavaScript的基本功能,提供了丰富的DOM操作、事件处理、Ajax交互以及对象扩展等工具,使得JavaScript编程变得更加简洁高效。在"prototype-1.6.0.2.js....
总结来说,这个压缩包是学习和使用Prototype JavaScript库的宝贵资源。通过阅读手册,你可以了解如何利用Prototype进行DOM操作、事件处理、Ajax通信和动画效果。而源代码文件`prototype-1.6.0.3.js`则让你可以直接在...
Prototype.js是一款强大的JavaScript库,由Sam Stephenson开发,旨在简化JavaScript的编程,提供了一系列实用的函数和类扩展,增强了JavaScript的基本功能。这款库的核心理念是通过类原型(Class Prototyping)实现...
这个“Prototype 1.6中文手册 chm+prototype 1.6.js源码 最新版”正是面向希望深入学习和掌握Prototype框架的开发者们的重要资源。 Prototype 1.6中文手册: 手册详细介绍了Prototype框架的1.6版本,这是一个非常...
通过学习和使用Prototype.js,开发者可以大大提高JavaScript编程的效率,同时享受到其带来的强大功能和便利性。《prototype.js中文手册》是深入理解并掌握这个库的宝贵资源,涵盖了从基础到高级的各种知识点,对于...
《prototype.js 1.4版开发者手册》是JavaScript开发领域中的一个重要参考资料,尤其对于那些希望深入理解并利用Prototype库的开发者来说,它是一份不可多得的资源。Prototype.js是一个强大的JavaScript库,由Sam ...
Prototype.js 是一个JavaScript库,由Sam Stephenson编写,主要目标是简化JavaScript开发,尤其是创建具有Web 2.0特性的富客户端应用。这个库引入了面向对象的概念,提供了许多实用的对象、类、函数和扩展,使得...
通过学习和使用prototype.js,开发者可以编写出结构更清晰、可维护性更强的JavaScript代码,同时也能提高开发效率,减少跨浏览器兼容性的烦恼。然而,随着ES6及后续版本的推出,许多prototype.js的功能已被原生...
1. **入门指南**:介绍如何引入Prototype.js到项目中,以及基本的使用方法。 2. **核心概念**:阐述Prototype.js的核心思想,如DOM操作、Ajax和事件处理。 3. **API参考**:详尽列举了所有提供的函数和方法,以及...
Prototype.js 是一个广泛使用的JavaScript库,它扩展了JavaScript语言的功能,为开发人员提供了更强大的面向对象编程支持。该库的核心特性是其对JavaScript原型(prototype)机制的深入利用,使得JavaScript对象的...
《prototype.js开发手册》是关于JavaScript库Prototype的详细指南,旨在帮助开发者更好地理解和利用这个强大的工具。Prototype由Sam Stephenson创建,它提升了JavaScript的基础功能,为Web开发提供了更丰富的功能和...
《Prototype开发应用手册》是关于JavaScript库Prototype的详尽指南,该库主要为Web开发提供了一系列强大的函数式编程工具,极大地简化了JavaScript的DOM操作。Prototype.js文件是这个库的核心,它包含了大量的实用...
Prototype.js 是一个JavaScript库,由Sam Stephenson编写,主要用于简化JavaScript开发,特别是在创建富客户端Web应用程序方面。这个库尤其在支持Ajax技术上表现出色,它为JavaScript提供了许多优雅的扩展和改进,...
万一你没有使用过大名鼎鼎的prototype.js,那么让我来告诉你,prototype.js是由Sam Stephenson写的一个javascript类库。这个构思奇妙,而且兼容标准的类库,能帮助你轻松建立有高度互动的web2.0特性的富客户端...
**prototype.js 文件详解** 在JavaScript中,`prototype`是一个核心概念,它关乎对象的继承机制。...记得结合`prototype.js`开发手册,深入学习并熟练掌握其各种用法,提升你的JavaScript开发技能。
下面是Prototype.js的开发笔记,涵盖了该库的使用指南、Ajax对象、JavaScript类的扩展、对象的扩展、事件处理等多个方面。 一、Programming Guide Prototype.js是一个强大的JavaScript库,提供了许多有用的函数和...
《.prototype.and.scriptaculous.taking.the.pain.out.of.javascript》是一本专注于使用Prototype和Scriptaculous库简化JavaScript开发的资源,对于那些希望通过AJAX技术提升网页交互体验的开发者来说,这本书无疑是...