必威体育下载基督教Heilmann

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

8月份存档,2007

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

星期五,8月31日,2007

呈现在ebay

我刚刚结束了一场演讲,主题是如何通过徽章和小部件将内容分发给合适的受众,以及我们在这方面是如何失败的。

上看到它slideshare.net:

用等高柱增强YUI网格

周四,8月30日,2007

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

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

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

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

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

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

使用YUI监视元件的大小和位置

周二,8月28日,2007

Yahoo用户界面库中一个鲜为人知的亮点是区域实用程序,它是Dom实用程序的一部分。文档中只提到了它以及它所提供的功能,但并没有真正体现它在日常接口开发中的强大功能。

请参阅随附演示页YUI地区来看看这篇文章中的例子吧。

检索元素的区域

Region实用程序返回浏览器中某个元素占用的区域。你通过发送ID来使用它,对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.contains(reg2);

如果id reg2的元素在视觉上完全位于id reg1包含的元素中,则为真,否则就是假的。
您可以通过单击“是否2号完全在1号内部?演示页面这篇文章。还可以使用“resize #2”调整元素的大小,以便在再次单击测试链接时查看更改,并使用“Undo resize #2”重置元素。

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


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包含= reg1.intersect(reg2);

结果是另一个区域对象。

您可以通过单击随附演示页YUI地区

计算单元尺寸

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


var地区=雅虎.util.Dom.getRegion (“reg1”);
var elmHeight = region.bottom – region.top;
var elmwidth=region.right–region.left;

的“获取尺寸2”链接演示页面试一试。

例如,您可以使用它读取表单元素的大小,并将工具提示固定为其正确的大小。假设你有一个DIV使用ID reg2和一个使用ID selectbox的选择框。下面的脚本将定位DIV并使其与selectbox一样宽。


var选取=雅虎.util.Dom.get(选择框);
var榆树=雅虎.util.Dom.get (“reg2”);
var大小=雅虎.util.Dom.getRegion(选取);
雅虎.util.Dom.setXY(榆树,[size.left size.bottom]);
雅虎.util.Dom.setStyle(榆树,“宽度”,(size.right-size.left-20)+“px”);

您可以通过单击演示页面这篇文章。

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

这只是一个关于你可以用区域来做什么的题目。小部件的YUI菜单或容器经常使用它来确定某些功能是否可以显示。

谈到JavaScript,我感到很惭愧——@media Ajax还有更多内容

周三,8月22日,2007

我目前在[tag]香港[/tag]培训来自亚洲的同事如何在欧洲做事。至少我是这么想的。我带着道格拉斯·克罗克福德(Douglas Crockford)和内特·科奇利(Nate Koechley)来到这里,向大家展示我们在美国和英国为简化开发人员创建web站点和应用程序所做的工作。

当我们要求每个团队向我们展示他们在做什么,以及他们在哪些方面需要投入时,我们大吃一惊。您在亚洲的web站点上看到的是什么样的实现,以及这里的开发人员如何自然地使用推荐的技术,而从不询问或告诉我们这些技术,这是非常令人惊讶的。我迫不及待地想把这里的团队记录下来的发现带回国内与大家分享。

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

说到谦卑说到JavaScript,事情正在发生[标记]@mediaAjax[/标记]网站。这些会议大部分都是固定的,已经令人印象深刻的发言者名单上还增加了一些有趣的内容。特别是[tag]Dojo[/tag]的[tag]Ajaxian[/tag] folk [/tag] Dion Almaer[/tag] & [tag]Ben Galbraith[/tag]和[tag]Alex Russell[/tag]加入了知名JS音箱的行列,在欧洲音箱圈中难得一见。如果你想讲JS和Ajax,我确信今年没有比这更好的峰会了。

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

周三,8月22日,2007

不久前,我还对JavaScript中的模块模式赞不绝言,并对从其他公共方法和属性调用或读取公共方法和属性时重复使用长名称空间感到烦恼。

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

varclassicModulePattern= 函数(){
  varprivateVar= 1;
  函数privateFunction(){警报(“私人”);
  }
  返回 {publicVar:2,publicFunction:函数(){classicModulePattern。anotherPublicFunction();   
    },anotherPublicFunction:函数(){privateFunction();
    }
  }
}();classicModulePattern。publicFunction();

这里的问题是,当你想从另一个公共方法调用一个公共方法或访问公共变量时,你需要重复主对象的名称。另一件让我烦恼的事情是,对于你想要公开的东西,我不得不切换到对象文字表示法。

灵感来自于博客上的评论YUI关于模块模式和发布标准,我开始提倡在返回之前使用名为pub的命名对象来追加方法和属性。That way you can call public methods via the pub.methodName shortcut notation instead of repeating the main name:

varnamedObjectModulePattern= 函数(){
  var酒吧= {};
  varprivateVar= 1;
  函数privateFunction(){警报(“私人”);
  };酒吧。publicVar = 2;酒吧。publicFunction = 函数(){酒吧。anotherPublicFunction();    
  };酒吧。anotherPublicFunction = 函数(){privateFunction();
  };
  返回酒吧;
}();namedObjectModulePattern。publicFunction();

昨天在香港的一次培训中,我向道格拉斯·克罗克福德(Douglas Crockford)展示了这个问题,并问他对这个问题的看法。他不介意这个想法,但甚至认为pub对象是多余的。

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

varrevealingModulePattern= 函数(){
  varprivateVar= 1;
  函数privateFunction(){警报(“私人”);
  };
  varpublicVar= 2;
  函数publicFunction(){anotherPublicFunction();    
  };
  函数anotherPublicFunction(){privateFunction();
  };
  //通过分配公共指针来显示所有私有的东西
  返回 {publicFunction:publicFunction,publicVar:publicVar,anotherPublicFunction:anotherPublicFunction}
}();revealingModulePattern。publicFunction();

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

varrevealingModulePattern= 函数(){
  varprivateVar= 1;
  函数privateFunction(){警报(“私人”);
  };
  varpublicVar= 2;
  函数publicFunction(){anotherPublicFunction();    
  };
  函数anotherPublicFunction(){privateFunction();
  };
  //通过分配公共指针来显示所有私有的东西
  返回 {初始化:publicFunction,:publicVar,增加:anotherPublicFunction}
}();revealingModulePattern。初始化();

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

varrevealingModulePattern= 函数(){
  varprivateVar= 1;
  函数privateFunction(){警报(“私人”);
  };
  varpublicVar= 2;
  函数publicFunction(){anotherPublicFunction();    
  };
  函数anotherPublicFunction(){privateFunction();
  };
  函数getCurrentState(){
    返回 2;
  };
  //通过分配公共指针来显示所有私有的东西
  返回 {初始化:publicFunction,:publicVar,增加:anotherPublicFunction,当前的:getCurrentState()
  }
}();警报(revealingModulePattern。当前的) 
/ / = > 2revealingModulePattern。初始化();

当然,这里的示例名称与我在实际脚本中使用的名称相去甚远,但它展示了这种模式的力量。