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

丸趣王慧杰

丸趣王慧杰

2016-02-19 16:36

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

  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

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

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

 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怎么下载,为什么下载这么困难呢?

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

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

展开更多 50%)
分享

猜你喜欢

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

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

Prototype使用学习手册指南之form.js

Web开发
Prototype使用学习手册指南之form.js

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

Prototype使用学习手册指南之ajax.js

Web开发
Prototype使用学习手册指南之ajax.js

Prototype使用学习手册指南之Selector.js

Web开发
Prototype使用学习手册指南之Selector.js

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

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

Web开发
prototype使用学习手册指南之event.js

Prototype使用学习手册指南之dom.js

Web开发
Prototype使用学习手册指南之dom.js

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

Win10自动待机功能关闭步骤

Win10自动待机功能关闭步骤

常用的JavaScript验证正则表达式

常用的JavaScript验证正则表达式
下拉加载更多内容 ↓