prototype使用学习手册指南之Position.js

【 tulaoshi.com - Web开发 】

　　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使用指南系列文章.