100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > prototype使用学习手册指南之Position.js

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

时间:2022-07-13 05:02:58

相关推荐

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

给自己一点时间接受自己,爱自己,趁着下午茶的时间来学习推荐的prototype使用学习手册指南之,过去的都会过去,迎接崭新的开始,释放更美好的自己。

Position是prototype中定义的一个对象,提供了操作DOM中与位置相关的方法,要很好的理解元素在页面中的位置,具体代码如下,按照代码说说,其中英文是作者的注释,中文的才是偶的说明或翻译英文的注释,采用顶式注释法(注释在要说明的代码的上面)说明

// set to true if needed, warning: firefox performance problems// NOT neeeded for page scrolling, only if draggable contained in// scrollable elements//只有在使用拖动的时候元素包含在有滚动条的元素中才需要设置为trueincludeScrollOffsets: false,// must be called before calling withinIncludingScrolloffset, every time the// page is scrolled//当页面被scrolled后,使用withinIncludingScrolloffset的时候需要先调用这个方法prepare: function() {//横向滚动条滚动的距离 = || || || 0;//纵向滚动条滚动的距离 = || || || 0;},

//元素由于滚动条偏移的总距离

realOffset: function(element) {var valueT = 0, valueL = 0;do { valueT += || 0; valueL += || 0; element = ;} while (element);return [valueL, valueT];},

//元素在页面中由offsetParent累积的offset,当offsetParent都没有滚动条时,就是元素在页面中的位置

cumulativeOffset: function(element) {var valueT = 0, valueL = 0;do { valueT += || 0; valueL += || 0; element = ;} while (element);return [valueL, valueT];},

//元素相对于containing block("nearest positioned ancestor")的位置,也就是相对于最近的一个position设置为relative或者absolute的祖先节点的位置,如果没有就是相对于 body的位置,跟,一样?

positionedOffset: function(element) {var valueT = 0, valueL = 0;do { valueT += || 0; valueL += || 0; element = ; if (element) { if(&&;) break; var p = (element, 'position’); if (p == 'relative’ || p == 'absolute’) break; }} while (element);return [valueL, valueT];},//offsetParentoffsetParent: function(element) {if () return ;if (element == ) return element;while ((element = ) && element != ) if ((element, 'position’) != ’static’) return element;return ;},// caches x/y coordinate pair to use with overlap

//判断指定的位置是否在元素内

within: function(element, x, y) {if () return (element, x, y); = x; = y; = () (y = [1] && y [1] + && x = [0] && x [0] + );},

//跟within差不多,不过考虑到滚动条,也许是在元素上面,但不是直接在上面,因为滚动条也许已经使元素不可见了

withinIncludingScrolloffsets: function(element, x, y) {var offsetcache = this.realOffset(element); = x + offsetcache[0] - ; = y + offsetcache[1] - ; = () ( = [1] && [1] + && = [0] && [0] + );},// within must be called directly before

//在调用这个方法前,必须先调用within,返回在with指定的位置在水平或者垂直方向上占用的百分比

overlap: function(mode, element) {if (!mode) return 0;if (mode == 'vertical’) return (([1] + ) - ) / ;if (mode == 'horizontal’) return (([0] + ) - ) / ;},

//返回元素相对页面的真实位置

page: function(forElement) {var valueT = 0, valueL = 0;var element = forElement;do { valueT += || 0; valueL += || 0; // Safari fix if (==) if ((element,’position’)==’absolute’) break;} while (element = );element = forElement;do { if (! || &&;) { valueT -= || 0; valueL -= || 0; }} while (element = );return [valueL, valueT];},

//设置target为source的位置,大小

clone: function(source, target) {var options = ({ , , , , offsetTop:0, offsetLeft: 0}, arguments[2] || {})// find page position of sourcesource = $(source);var p = () find coordinate system to usetarget = $(target);var delta = [0, 0];var parent = null;// delta [0,0] will do fine with position: fixed elements,// needs offsetParent deltasif ((target,’position’) == 'absolute’) { parent = Position.offsetParent(target); delta = Position.page(parent);}// correct by body offsets (fixes Safari)if (parent == ) { delta[0] -= .offsetLeft; delta[1] -= .offsetTop;}// set positionif(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 += || 0; valueL += || 0; if ( == ) if ((element, 'position’) == 'absolute’) break; element = ;} while (element);return [valueL, valueT];}}

终于把Prototype的所有部分都写完了,哈哈,越来越佩服自己的耐力了

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

Prototype1.5的下载为什么不简单点

这几天在论坛和博客上看到很多人问Prototype1.5怎么下载,为什么下载这么困难呢?

Prototype的官方网站是:/,如果你一下子找不到,到google上搜索Prototype就找到了

下载当然要到官方网站下载了,但是问题是Prototype官方网站更新太慢,首页上的下载连接还是prototype1.4的,而且只是一个单独的js文件

那么怎么下载最新版本的呢?

1,如果你只想得到一个单独的js文件使用的话,其实官方网站提供了最新版1.5的下载, 下面连接就是下载地址了/browser/trunk/railties/html/javascripts/prototype.js?format=raw

2,如果你想得到详细的源文件以及测试代码,需要通过svn下载:使用下面的命令就可以了:svn co /svn/rails/spinoffs/prototype

如果你没有svn的话,我已经下载打包了传到51js论坛中,查看下面连接的帖子中有下载的:/viewthread.php?tid=65070&highlight=prototype

想必很多prototype爱好者都一直在等待着prototype1.5的发布,虽然等待的时间很长,但是这一令人激动的一天终于到来了

因为网友提醒,今天访问prototype网站,发现原来的网址已经自动跳转到新的网站去了, 作者使用了一个独立的域名 /

刚才在google里搜索prototype,发现搜索结果中出现的已经是新网站了,google爬虫也蛮勤快的嘛

更让人高兴的是,一向被人诟病的文档问题这一版有了非常大的提高,可以说是有了质的飞跃,以前的版本基本上没有文档,要使用只有自己理解了,

现在在它的官方网站上有专门的API参考以及一些使用的例子,看来作者真正的关于这个问题来了,prototype爱好者应该高兴一把了哈哈,赶快到prototype官方网站下载了Engoy吧 如果感觉阅读英文是一种折磨的话,可以参考我以前写的prototype 1.5使用指南系列文章.

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。