必威体育下载基督教Heilmann

您当前正在浏览必威体育下载基督教Heilmann八月份的博必威体育简介客档案,2007。

8月存档,2007

谈论不引人注目,易趣英国网站上对出版商友好的徽章

星期五,8月31日,2007

在易趣展示

我刚刚回来,做了一个演讲,介绍了如何通过徽章和小部件来迎合内容分发给合适的观众,以及我们是如何失败的。

上看到它slideshare.net

等高柱增强YUI网格

星期四,8月30日,2007

最大的问题之一CSS布局并不是所有的列都具有相同的高度,这使得很难以传统的方式设置它们的样式。作为一名设计师,你可以接受这种变化,但这种情况很少发生。

玩过悠悠电网最近我意识到了这个缺点,也是。嵌套网格的高度不同。我相信你可以调整CSS为此(艾德·艾略特)展示了许多如何实现等高列的选项但我没有从中得到多少乐趣CSS黑客攻击。

我喜欢的是JavaScript和相同的列高并不是网站功能的关键部分,我很乐意用它来解决这些问题。

随着悠悠网格有一个定义的集合CSS我有我的钩子来应用JS功能的类,并且脚本很容易使用悠悠Dom和悠悠Dom。

请查看演示页面,了解等高嵌套网格下载脚本在您自己的网格解决方案中使用它。

你所要做的就是增加雅虎,雅虎Dom和雅虎事件(最容易使用已排序的yahoo-dom-event包)和文档正文底部的脚本。脚本自动等于嵌套网格中的所有列。如果你不想他们都平等,通过添加一个“columnfix”CSS类,只定义那些需要修复的。

用YUI监测元件尺寸和位置

周二,8月28日,2007

雅虎用户界面库中一个鲜为人知的宝石是区域实用程序,它是dom实用程序的一部分。文档只提到了它和它给您的东西,但并没有完全实现它在日常接口开发中的强大功能。

请参阅附带演示页关于悠悠区域以查看本文中的示例。

检索元素的区域

Region实用程序返回浏览器中某个元素所占用的区域。你通过发送身份证来使用它,对getRegion()方法的元素或元素数组的引用:


var区域雅虎.util.dom.getRegion(“reg1”);

该方法返回一个具有多个属性和一些方法的对象。属性:

顶部

元素顶部和窗口左上角之间的像素量。


元素底部和窗口左上角之间的像素量。

正确的

元素右侧和窗口左上角之间的像素量。

左边

元素左侧和窗口左上角之间的像素量。

0,1

左侧和顶部属性的快捷方式(为与兼容而添加 雅虎.util.dom.setxy()。

关于区域很酷的一点是,它提供的信息与元素的位置无关(静态、相对、绝对、固定)。可能的结果是:


区域顶部:109,权利要求:571,底部:177,左:371 };

的“获取已占用空间1号”链接演示页面试试看。

确定元素重叠

此外,该对象有几个方法:

getArea()

返回该区域所占像素的总数。

容器()

如果一个区域完全包含另一个区域,则返回一个布尔值

单位()

返回两个区域的联合区域,哪个屏幕区域同时包含这两个属性

交叉()

返回两个区域共有的区域

contains()方法非常有用,因为它可以告诉您一个元素在什么时候以及是否在另一个元素内部。这对拖放界面非常有帮助。您可以通过定义两个区域来使用它,它返回一个布尔值。


ReG1=雅虎.util.dom.getRegion(“reg1”);
ReG2=雅虎.util.Dom.getRegion (“reg2”);
var contains=reg1.包含(reg2);

如果ID为reg2的元素在视觉上完全位于ID为reg1的元素中,则该元素将为true,否则就是错误的。
您可以通过单击“是否2号完全在1号内部?演示页面这篇文章。还可以使用“调整大小”2调整元素的大小,以在再次单击测试链接时查看更改,并使用“撤消调整大小”2重置元素。

union()方法返回包含这两个元素的屏幕区域。如果无论它们的位置如何,都要覆盖它们,这是非常有用的。


ReG1=雅虎.util.dom.getRegion(“reg1”);
ReG2=雅虎.util.Dom.getRegion (“reg2”);
var包含=reg1.union(reg2);

结果是另一个区域对象。

方法的作用是:返回两个元素所覆盖的屏幕区域。这对于确定两个元素重叠或突出重叠部分的百分比非常有用。


ReG1=雅虎.util.dom.getRegion(“reg1”);
ReG2=雅虎.util.Dom.getRegion (“reg2”);
var contains=reg1.intersect(reg2);

结果是另一个区域对象。

您可以通过单击附带演示页关于悠悠区域.

计算单元尺寸

您可以将区域信息用于许多不同的事情。可能最有用的方法之一是以可靠的方式获得元素的宽度和高度。要计算它们,只需从左到右减去宽度,从上到下减去高度:


var区域雅虎.util.dom.getRegion(“reg1”);
var elmheight=region.bottom–region.top;
var elmwidth=region.right–region.left;

检查上的“获取2”链接的尺寸演示页面试试看。

例如,您可以使用它来读取表单元素的大小,并将工具提示固定到正确的大小。说你有一个div使用id reg2和带有id select box的选择框。下面的脚本将定位div并使其与选择框一样宽。


VALSEL =雅虎.util.dom.get(“selectbox”);
var榆树=雅虎.util.dom.get(“reg2”);
VaR大小=雅虎.util.Dom.getRegion(选取);
雅虎.util.dom.setxy(elm,[size.left,size.bottom]);
雅虎.util.dom.setStyle(elm,“width”,(size.right-size.left-20)+“px”);

您可以通过单击上的“将2调整为选定对象的大小”链接来尝试此操作。演示页面这篇文章。

注意最后一行的-20,这是一个修复,因为元素的填充为10个像素。这是必要的,因为您无法轻松可靠地自动读取元素的填充内容,除非您还使用javascript设置它。

这只是一个关于您可以使用区域的取笑。像这样的小部件悠悠菜单或容器经常使用它来确定某些功能是否可以显示。

在谈论javascript时感到很谦虚,@media ajax将带来更多

星期三,8月22日,2007

我目前在香港,培训亚洲的同事如何在欧洲做事。我大概是这么想的。我带着道格拉斯·克罗克福德(Douglas Crockford)和奈特·科奇利(Nate Koechley)来到这里,展示我们在美国和英国的所作所为,让开发者更轻松地创建网站和应用程序。

当我们要求每一个团队向我们展示他们在做什么,以及他们需要输入什么东西时,我们非常惊讶。令人惊讶的是,您在亚洲网站上看到的是什么样的实现,以及这里的开发人员在不询问或不告诉我们的情况下如何自然地使用推荐的技术。我迫不及待地想把这里的团队记录下来的结果带回家里和大家分享。

也就是说,我还了解到美国拉丁字必威体育下载体用户不会遇到的问题,只有当你使用普通话或韩语时才会出现。总之,这是一次伟大的经历,无论是在共享信息方面,还是在意识到您为web标准运动所做的工作中有多少是在您还没有变得更明智的情况下被使用方面,都是如此。例如,我发现翻译PDF我的一篇文章我以前不知道。

说到谦虚,说到javascript,事情发生在[标签]@mediaajax[/tag]网站。会议大多是定义好的,已经令人印象深刻的演讲者名单上增加了一些更有趣的内容。具体来说,来自Dojo的Dion Almer、Ben Galbraith和Alex Russell加入了著名的JS演讲者行列,在欧洲演讲者圈子里很少见到人。如果你想讲JS和Ajax,我确信今年没有比这更好的峰会了。

再次使用模块模式——向世界揭示一些东西

星期三,8月22日,2007

不久前,我对javascript中模块模式的美和它的烦人进行了猛烈抨击,因为当我从其他公共方法和属性调用或读取公共方法和属性时,它会重复长名称空间。

回顾一下,“经典”模块模式意味着您将一个变量定义为一个匿名函数,该函数将立即用()调用。定义私有函数和变量,并将公共变量和函数作为匿名对象的属性和方法返回:

varClassicModulePattern类= 功能){
  varprivateVar= 
  功能privateFunction){警觉的“私人”)
  }
  返回 {公费publicFunction功能){ClassicModulePattern.其他公共功能)   
    }其他公共功能功能){privateFunction)
    }
  }
})ClassicModulePattern.publicFunction)

这里的问题是,当你想从另一个公共方法调用一个公共方法或访问公共变量时,你需要重复主对象的名称。另一个让我恼火的地方是必须切换到对象文字符号来表示您想要公开的内容。

灵感来自于博客上的评论悠悠关于模块模式和公共标准,我开始提倡在返回之前使用名为pub的命名对象来追加方法和属性。这样,您就可以通过pub.methodname快捷符号调用公共方法,而不是重复主名称:

var名称对象模块打印机= 功能){
  var酒吧= {}
  varprivateVar= 
  功能privateFunction){警觉的“私人”)
  }酒吧。公费 = 酒吧。publicFunction = 功能){酒吧。其他公共功能)    
  }酒吧。其他公共功能 = 功能){privateFunction)
  }
  返回酒吧
})名称对象模块打印机。publicFunction)

昨天在香港的一次培训问答会上,我把这个给道格拉斯·克罗克福德看,问他对这个问题有什么看法。他不介意这个主意,但认为即使是Pub对象也是多余的。

还有一个选项,我在此称之为揭示模块模式。在这种排列中,您只需定义私有范围中的所有函数和变量,并在模块末尾返回一个匿名对象,其中包含指向私有变量的指针和要公开显示的函数:

varrevealingModulePattern= 功能){
  varprivateVar= 
  功能privateFunction){警觉的“私人”)
  }
  var公费= 
  功能publicFunction){其他公共功能)    
  }
  功能其他公共功能){privateFunction)
  }
  //通过分配公共指针来显示所有私有内容
  返回 {publicFunctionpublicFunction公费公费其他公共功能其他公共功能}
})重新排列模块模式。publicFunction)

这使整个脚本的语法保持一致,并在最后明确哪些函数和变量可以公开访问。另一个好处是你可以和其他人一起展示私人功能,更具体的名字,如果你想的话。

varrevealingModulePattern= 功能){
  varprivateVar= 
  功能privateFunction){警觉的“私人”)
  }
  var公费= 
  功能publicFunction){其他公共功能)    
  }
  功能其他公共功能){privateFunction)
  }
  //通过分配公共指针来显示所有私有内容
  返回 {初始化publicFunction计数公费增加其他公共功能}
})重新排列模块模式。初始化)

甚至可以通过调用匿名对象中的函数将值作为公共属性返回:

varrevealingModulePattern= 功能){
  varprivateVar= 
  功能privateFunction){警觉的“私人”)
  }
  var公费= 
  功能publicFunction){其他公共功能)    
  }
  功能其他公共功能){privateFunction)
  }
  功能获取当前状态){
    返回 
  }
  //通过分配公共指针来显示所有私有内容
  返回 {初始化publicFunction计数公费增加其他公共功能现在的获取当前状态)
  }
})警觉的重新排列模块模式。现在的) 
//=>2重新排列模块模式。初始化)

当然,这里的示例名称与我在真实脚本中使用的名称相差甚远,但它显示了这种模式的威力。