YUI 3画廊»雅虎的用户界面博客（YUIBlog）

在YUI 3画廊：批量编辑器部件

12月5日，在下午01:01 2011年由约翰Lindal |在发展中， YUI 3画廊|评论

锐3 DataTable的快速编辑插件可以很容易地编辑记录的整个页面作为一个原子操作。然而，有时你需要做更多。例如，您可能必须同时编辑多个记录，比你可以舒适地适应在单页上。或者您可能需要支持添加，复制和删除记录作为原子操作的一部分。或者，你不妨直观地组字段放置在一个表格单元格。批量编辑器部件支持所有这些可能性。

（点击截图发挥这个例子。）

概述

批量编辑器部件由三部分组成：

Data source: 这个包装一个YUI的数据源和管理的变化：插入，删除，和更改后的值。
Base widget: 这提供管理记录，并在每个记录中的字段编辑的基本结构。派生类负责渲染成一个单独的行，这可能是一个div，TBODY，或其他容器每个记录。
HTML table implementation: 这延伸的基础构件，呈现在一个HTML表格TBODY，每个记录。列配置，确定哪些领域是在每个表中的列显示。可用于自定义单元格的格式化，呈现在一个表格单元格的多个领域。

配置

在这个例子中，生成上面的截图，配置一直保持尽可能简单：

fields定义在每个记录的编辑值。输入默认的类型是。其他有效的类型选择和 textarea。（选择需要的值的列表。）基本验证所提供的表格经理库模块。这包括所需的字段，长度的限制，和数值范围。指定regex或您自己的函数（ fn ），可以执行更复杂的验证。下面是一个活生生的例子摘录：

 VAR领域=
 {
	标题：
	 {
		类型：“textarea的”
	 }，
	年：
	 {
		验证：
		 {
			 CSS：“yiv整数：[1500,2100]”
		 }
	 }，
	颜色：
	 {
		类型：“选择”，
		值：
		 [
			 {值：“红”，文字：“红”}，
			 {值：“绿色”的文本：“绿色”}，
			 {值：“蓝”的文本：“蓝”}
		 ]
	 }
 };

Y.BulkEditDataSource需要一个实例Y.DataSource和下列参数：

uniqueIdKey: 唯一标识每条记录的一个关键的名称。
generateRequest: 一个函数生成请求参数Y.DataSource源。（这是空的例子，因为Y.DataSource.Local总是返回的所有数据。）
extractTotalRecords: 一个函数来提取记录的总数从Y.DataSource响应。

例如使用Y.DataSource.Local ， totalRecordsReturnExpr也是必需的。这OGNL表达式指定在响应存储记录总数。（请注意， extractTotalRecords读取该值。）

 VAR DS = Y. BulkEditDataSource（
 {
	 DS：raw_ds
	 uniqueIdKey：“ID”，
	 generateRequest：函数（）{}，
	 totalRecordsReturnExpr：“meta.totalRecords。”
	 extractTotalRecords：函数（响应）
	 {
		返回response.meta.totalRecords;
	 }
 }）;

Y.HTMLTableBulkEditor需要的数据源，现场配置，列配置。在列配置，关键是字段的名称，除非您指定一个自定义格式化。标签是用来作为列标题。下面是一个活生生的例子摘录：

 VAR列=
 [
	 {
		键：“复选框”，
		标签：<input type="checkbox" id="select-all" />“
		格式化：函数（O）
		 {
			 VAR标记<input type="checkbox" class="record-select" id="{id}" />“;
			 o.cell.set（“的innerHTML”，Y.Lang.sub（标记，
			 {
				编号：this.getRecordId（o.record）
			 }））;
		 }
	 }，
	 {键：“标题”，标签：“标题”}，
	 {关键：“今年'的标签：”年份“}，
	 {键：“色”，标签：“色”}
 ;

（请注意，活生生的例子定义了一个未成年人扩展Y.HTMLTableBulkEditor HTMLTableBulkEditor处理复选框列）。

您还可以通过一个实例Y.Paginator Y.BulkEditDataSource 。在一个单独的，更复杂的活生生的例子说明了这一点。

本地与远程数据源

当决定是否使用本地或远程数据源，你必须仔细考虑权衡。明显的贸易是本地的数据源时，分页，但初始页面加载需要更长的时间，它需要更多的内存，在客户端上。

然而，批量编辑器部件施加额外的取舍。

首先，YUI的数据源必须返回不可变的数据。这是本地数据源的自动的，但可能会非常棘手，实施远程数据源。您将需要批量编辑操作的持续时间锁定数据库中的表行，如果多个用户可以修改。

二，本地和远程数据源之间的选择会影响你如何保存数据。当您使用本地数据源，你可以做最好的努力，节能，即，保存到服务器的所有有效的记录，将它们从本地数据源，并允许用户把重点放在有无效值的记录。当您使用远程数据源，不可改变的要求，只允许你做或没有储蓄，即数据只能保存后的所有数据是有效的。

实际使用的情况下

批量编辑器部件的原始动机是为了让上传的电子表格后处理。介绍后处理步骤不再需要电子表格的值是完美的。错误可以批量编辑器部件，而不是否定整个上传的标记和固定。此外，在服务器上处理，可以做最佳猜测每个记录所需的额外价值的分配，并且用户可以保存前检查和修复这些额外的价值。这简化了初始创建的电子表格。

在这种情况下，远程数据源是最好的选择。上载的数据存储在一个临时空间，因此，保证一成不变的，因为没有其他用户可以看到它。 “全部或没有”节约是适当的：一旦所有的错误已被固定，就像一个标准的上传操作，保存操作是原子。

作者简介： 约翰Lindal （ @ jafl5272在Twitter）建设的基础上率先工程师之一雅虎 APT是内置。 此前，他曾雅虎出版商网络。

分享和扩展：书签del.icio.us | Digg它！ | 书签交易！

更新：“MakeNode”部件扩展

2011年9月12日，下午03:18由萨蒂扬| 在发展中，YUI 3 画廊| 8评论

编者按：本文最初是今年早些时候发表的。自那时以来，已出版的MakeNode模块锐画廊，并收到了一些增强。今天的文章反映了所有MakeNode最新变化。

在我以前的文章，一个YUI的3应用配方，我展示了一种使用Y.substitute作为一个非常基本的模板处理器。从那里生活的想法，建议＃YUI IRC频道的乡亲，和我做了一个Widget的延伸，是对YUI画廊，被称为MakeNode。 MakeNode是不是一个通用的模板处理器，它不是作为一个意思。另一方面，它是紧密集成的YUI 部件的基础类，包括classname和事件佣工和国际化。在这篇文章中，我将采取微调器的例子，并修改它，按照我以前的文章的准则和使用 MakeNode。MakeNode是作为一个画廊组成部分以及修改后的微调组件，将在这篇文章中使用的例子。

扩展您的组件

要加载MakeNode，你需要包括在你的YUI().use() ）使用的'gallery-makenode' “，或者如果定义通过一个YUI.add()列出它requires需要数组的声明。然后，延长你的widget，你列出的第三个参数Y.Base.create()像这样：

  Y。微调= Y.Base.create（
      “微调”，
      Y。部件，
      [Y。MakeNode]
      {
         / /实例成员...
      }，
      {
          / /静态成员
      }
 ）;

，您可以添加沿任意数量的适当扩展部件，如WidgetParent，WidgetChild，WidgetStdMode MakeNode，等MakeNode增加了两个开发商，所使用的_makeNode保护_locateNodes, _makeNode和_locateNodes，它会读取从几个静态属性，如果发现。

这个扩展的所有成员都是protected或private，因为他们是为了组件的开发和使用这些组件的实施者，谁不应该与他们的困扰。记住要检查“显示受保护”选项，查看API文档时。

定义模板

你通常会做的第一件事是定义为您的组件的模板。对于微调，我们的模板将是：

  _template：
     <input type="text" title="{s input}" class="{c input}">“
     “<button type="button" title="{s up}" class="{c up}"> </按钮>”，
     “<button type="button" title="{s down}" class="{c down}"> </按钮>”
加入（的'\ n'），

通常会被命名为默认模板_TEMPLATE和沿其他静态属性的类，如宣布ATTRS 。 MakeNode将使用此模板，如果没有其他明文规定。模板是纯HTML加了一系列括在大括号中，每一个单个字符（处理代码）和一个或多个参数的占位符。占位符和它们的产品是：

{@ attributeName}配置属性的值
{p propertyName}实例的属性值
{m methodName arg1 arg2 ….}返回值的方法。其次是方法的名称和任何数量由空格隔开的参数处理代码。
{c classNameKey} CSS Classname代替从生成_CLASS_NAMES静态属性（见_CLASS_NAMES属性下面一节）
{s key}字符串从strings属性，子属性使用key 。
{? condition valueIfTrue valueIfFalse很像?: valueIfTrue valueIfFalse } ?: JavaScript的运营商，评估valueIfTrue如果条件truish，否则valueIfFalse 。
{1 condition valueIfOne valueIfMore }用于生产的基础上，条件值的单/复数的话。
{}任何其他值将处理Y.substitute不一样。

例如， {@ value}将转化为this.get('value')而{p value}转换this['value']

当占位符参数，如{m} {?}和{1}字符串必须括在双引号。数字，布尔值null null （所有不带引号）将被解析到其正确的数据类型。占位符可以嵌套。 {?}和{1}占位符通常会包含一个嵌套的占位符条件和很可能对他们的价值观，例如：

  {P数量} {1 {P数量}“单位”，“单位”}

如果该属性qty数量是1，它会"1 unit" “，2个或更多它将"2 units" “等。处理与零一个更详细的版本将是：

  {？  {P数量}“{P数量} {1 {P数量}”单位“，”单位“}”，“无”}

请注意，必须在其自己的一套引号括起来，处理内部的占位符，如果一个字符串的结果。

要包括一个带引号的字符串内的双引号， \\" “双反斜杠是必要的，因为JavaScript将解释单一并丢弃前，先要到MakeNode仅允许双引号。MakeNode不eval()以便解析器是有限的，但安全，什么，但null ，空，布尔和双引号的字符串将被忽略。

{?}占位符也是得心应手地使用复选框和单选按钮。它可以用于生产的字符串"checked"根据处理指令的代码如下真理价值。因此， <input type="checkbox" {? {m getLength} "checked" ""}/> <input type="checkbox" {? {m getLength} "checked" ""}/>将产生显着的复选框getLength方法返回什么，但零。

{c}占位符，我们需要有一个_CLASS_NAMES属性定义。

进一步的占位符，可以加入_templateHandlers他们_templateHandlers哈希添加到MakeNode。

_CLASS_NAMES财产

随着ATTRS和_TEMPLATE静态属性，我们可以定义一个静态属性，它指向一个字符串_CLASS_NAMES _CLASS_NAMES 。这些字符串都将被用于生成的className。因此_CLASS_NAMES: ['input']会产生"yui3-spinner-input"的className 。这些类名是存储在实例属性this._classNames 。 {c input}上面模板中的占位符将"yui3-spinner-input"摇钱树输入“。我呼吁在_CLASS_NAMES列出的字符串，例如'input' ，“的className 键 ”，因为它们可以作为一个关键，是指实际的className或包含这些类名的元素，我们将在后面看到。

您可以使用_CLASS_NAMES的属性来生成任意数量的类名，无论你在模板中使用或不。您仍然可以达到从内部this._classNames这些额外的类名。产生的className使用yui3前缀NAME的静态属性的价值变成小写，然后在给定的字符串_CLASS_NAMES （这一次不会变成小写），全部由连字符分隔。 _classNames哈希也将包含为类名boundingBox contentBox ，首先根据"boundingBox"键和下第二个"content"键。部件的boundingBox分配的值派生的类名NAME继承链中的每个类的属性， yui3-widget构件。到MakeNode店this._classNames只有最顶层的className boundingBox 。

如果WidgetStdMod模块被加载，MakeNode也将产生其作品HEADER ， BODY和FOOTER与那些相同的密钥，这也是在同一模块中定义的常量部分。

如果一个组件是几个层次从部件一样， SuperSpecialSpinner继承SuperSpinner继承Spinner继承Widget,如果任何一个或所有_CLASS_NAMES _CLASS_NAMES属性定义，MakeNode将产生所有类名和存储在this._classNames 。 this._classNames 。你并不需要包括在每个级别的名称已经宣布在以前的水平。事实上，它是更好的，你不会因为在每个级别产生的类名使用该级别的属性值NAME名称。因此，在SuperSpecialSpinner ， {c input}仍然会导致"yui3-spinner-input" “，而"yui3-superspecialspinner-input" “，所以它会保持你的CSS文件仍然有效。

{S}占位符

构件有一个strings配置属性定义，虽然它不与任何值初始化。此属性是为了保存字符串（或通过屏幕阅读器，阅读）的用户是可见的。重要的是，你永远不包括直接在模板中可见的字符串。这不是一个MakeNode要求 - 它从未是一个好主意。应始终被视为或读给用户的所有字符串放置在strings属性。 strings属性包含了每一个人的文字是由它的键位于哈希。微调器组件有以下字符串，你可以看到上面模板中使用。

 字符串：{
    值：{
        输入：“按箭头向上/下轻微的增量，主要增量页面向上/向下键”，
        起来：“增量”，
        下来：“减”
     }
 }，

这样做的最好的部分是组件可以使用您的组件的开发人员本地化为其他语言很容易。创建微调的一个实例时，您可以这样做：

  VAR mySpinner =新的微调（{字符串：Y.Intl.get（“微调')});

设置这样的配置属性中的strings替换默认strings值与使用先前定义的语言的语言资源文件。 {s}的占位符访问中存储的字符串strings字符串属性，无论是默认的或翻译的，如果设置。 {s xxxx}占位符几乎是一样使用{@ strings.xxxx}除了本地化替换字符串将进一步处理的占位符。这是翻译的重要，因为语法为了从语言到语言不同，这使得改述的文本，包括其占位符，以适应任何语言。使用{@ strings.xxxx.yyyy.zzzz}这将使访问嵌套更深的下跌，并防止进一步的替换字符串，字符串也可以访问。大括号可以包含在文字的{LBRACE} } {RBRACE} }占位符。

使用renderUI _makeNode

我们使用的模板来创建我们的组件的标记。要做到这一点，我们可以调用MakeNode的_makeNode方法，是这样的：

  renderUI：函数（）{
     this.get追加（“contentBox）（this._makeNode（））;
 }，

这将填补在我们的widget contentBox处理模板的标记。 _makeNode方法返回的一个实例Y.Node可以追加或插入的任何地方或只是供以后使用。它不会返回一个字符串，它会产生一个Node实例。（如果你需要一个字符串，而不是一个节点，你可以使用_substitute方法，这就要求您在模板中通过。）

_makeNode方法需要两个参数：一个参考模板和对象填写占位，作为Y.substitute 。在我们简单的微调例子，整个部件，但其他部件，可能需要几个模板位和出件有一个单独的模板。在这种情况下，您通常会呼叫_makeNode的主要部分没有参数，并调用不同的模板，它再次以填补额外的部分。例如包含此renderUI方法：

  renderUI：函数（）{
     VAR的fieldset = this._makeNode（）;
     this.each（函数（项目）{
         fieldset.appendChild（this._makeNode（MultipleTemplates.RADIO_TEMPLATE，项目））;
     }）;
     this.get（'contentBox“）追加（字段集）;
 }

_makeNode第一次调用返回一个Node的实例变量中fieldset fieldset 。 Y.ArrayList这样的RADIO_TEMPLATE从存储在数组列表中的项目和由此产生的附加到节点的值fieldset的fieldset之前，最后contentBox的contentBox样本组成部分，也是延长。如特殊占位{@} {p} }仍然指向的主要对象的属性或属性。嵌套的项目将被处理一样Y.substitute会。

_locateNodes方法

MakeNode进一步提供了_locateNodes方法将尝试查找在声明的类名的所有_CLASS_NAMES _CLASS_NAMES 。为了找到特定的元素，您可以通过任意数量的className键，否则， _locateNodes尝试所有。对于每个的className每个元素， _locateNodes会产生一个私有的实例属性，使用键名"Node" “后缀的下划线前缀。因此，在我们的微调例如_locateNodes _locateNodes将生成的_inputNode _inputNode _upNode _upNode _downNode _downNode 。如果有多个元素具有相同的className， _locateNodes将返回到他们的第一个参考。如果一个元素没有被发现，没有变量将被创建。

在微调组件，我们_locateNodes _locateNodes后创建的标记：

  renderUI：函数（）{
     this.get（CBX）追加（this._makeNode（））;
     this._locateNodes（）;
 }，

_EVENTS静态属性

一个进一步的属性可以被定义沿着_TEMPLATE _template _CLASS_NAMES _CLASS_NAMES _EVENTS _EVENTS _EVENTS _EVENTS将包含一个散列类的名称键，每一个包含事件的类型和方法来处理它们的哈希。这是更好地用一个例子来解释：

  _EVENTS：{
    输入：'变'，/ /调用this._afterInputChange
     boundingBox：
         {
            类型：“钥匙”，
             FN：“_onDirectionKey'，/ /调用this._onDirectionKey
            参数：（（Y.UA.opera）“下来：”：！“记者：”）+“38，40，33，34”
         }，
         “的mousedown'/ /调用this._afterBoundingBoxMousedown
     ]
    文件：“的MouseUp”，/ /调用this._afterDocumentMouseup
     Y：“broadcastingObject：someEvent”/ /调用[“_afterYBroadcastingObject：someEvent”]
 }，

_EVENTS是与任意数量的条目的对象（哈希）。属性的名称，即哈希键，确定节点的事件，我们会听取。他们是相同的className定义键_CLASS_NAMES 。有一些额外的特殊功能键：

"boundingBox"将参照边界框本身。
"document"是指文件包含这个widget。
"THIS" ，是指在widget本身
"Y"指Y Y实例。

如果部件已与WidgetStdMod以及延长，键HEADER ， BODY和FOOTER将那些部分，因为他们将在_classNames哈希。 JavaScript并不需要被引用的键，如果他们是有效的标识符，因此上述都不需要被引用。

_EVENTS财产处理后renderUI ， bindUI和syncUI方法被称为所以部件预计将已经插入文档正文内，否则， "document"标识将失败。

对于每个元素有一个事件标识符或事件标识符的数组。事件可以听的事件或进一步的细节的对象的类型确定。默认情况下，MakeNode将使用作为一个监听器使用命名方法"_after"前缀，其次是与它的第一个字符的元素标识符资本化资本化与它的第一个字符的事件类型。上面的代码块显示为每个事件调用的方法。

事件标识符，也可以与属性的type fn FN args args 。该type是强制性的，并表示事件的类型，被听到。 fn属性给出的方法，将听来的事件，从而避免了自动命名的名称。由于_EVENTS是静态属性，它已不能访问，因此它不能采取一个实际的方法，只有它的名字。 this 可以使用args参数，通过进一步的论据，这需要一个键key的关键事件，如与来电。

MakeNode将使用Node.delegate听内元素的boundingBox boundingBox，而它会Node.after Node.after听取boundingBox boundingBox和文档的主体。它将使用this.after听下的THIS这个关键Y.after Y.after根据上市Y Ÿ关键。所有的事件都听过的事件侦听器后使用，因为他们是为了使部件响应事件，不过滤的对象，火灾他们在任何情况下，这些事件可以预防或停止的行为。（注：听任何嵌套元素的key事件只与版本3.4.0pr1及以上的工程，因为代表团key关键事件是不是之前的所有其他功能的工作以及与以前的版本）。

_EVENTS声明是累积的，当组件从一个继承。继承链中的每一个类都会有_EVENTS的_EVENTS声明分开处理。

_ATTRS_2_UI静态属性

活动是双向的，从UI组件从组件到UI。首先是由_EVENTS财产处理。然后是属性值的变化，需要体现在用户界面的发射事件。正如我在前一篇文章中，当有任何更改配置属性二次效应中提到的，他们应该更改的事件监听器来处理， setter不是可选的setter属性的方法，它应该只处理正常化所设置的值。 UI应该反映的配置属性的状态，首先syncUI syncUI，正在初始化，然后每个属性改变事件。对于后者，我们需要附加一个事件监听器，我们通常会在bindUI 。部件已经提供了一个机制，使简单，这是我在以前的文章评论中描述。

部件使用实例属性_UI_ATTRS包含与另外两个属性，对象SYNC和BIND 。这些上市最初同步，然后听取以反映当前值保持UI的配置属性的名称是一个数组。部件预计每个条目有与之相关联的方法，由前缀的属性名后的第一个字符转换为大写，在适当的骆驼方法名称的属性_uiSet命名_uiSet的。因此，如果"value"在任何上市_UI_ATTRS阵列（无论SYNC BIND BIND），小部件会期望找到_uiSetValue _uiSetValue方法。此方法将接受两个参数，该value被设置和src的变化。这是对我们的微调_uiSetValue代码_uiSetValue方法：

  _uiSetValue：功能（价值，SRC）{
     （SRC === UI），{
        回报;
     }
     this._inputNode.set（值，this.get（格式化）（值））;
 }，

你在这段代码中看到对应的字符串常量的所有大写字母标识符宣布在其他地方，让YUI压缩到做得更好。，基本上，该方法设置的value在HTML属性<input>方块，新设置的值，被格式化后。提及到TextBox提供了_locateNodes 。 src参数的初步检查，看看是否设置为字符串值'ui' 如果是这样的话，会采取任何行动。这是为了避免无限循环。如果用户在输入框中输入的东西，其价值将value价值配置属性，然后valueChange火valueChange事件， _uiSetValue得到_uiSetValue所谓，如果任其发展下去，然后去改变输入框的值，这将再次引发整个过程。 _uiSetValue ，因此，如果我们知道变化从UI，我们什么也不做，所以打破循环。然而，这需要另一块代码的其他地方。 DOM事件监听器，当我们设置的配置属性，我们使用第三个可选参数设置，这样：

  _afterValueChange：功能（EV）{
     this.set（值，ev.newVal，{SRC：界面}）;
 }

这是我们确保，从UI的变化从而标记，然后检查相同的标志，以避免循环。不要使用标识src SRC时设置的属性，而不是source的源泉，将无法识别。

这一切说，我还没有谈到本节的标题中提到的_ATTRS_2_UI属性_ATTRS_2_UI。由于在我以前的文章显示，通过我在他们的失误，确保正确列出所有属性影响的UI是有些凌乱。你不应该初始化_UI_ATTRS从头开始，因为构件已经列出了一大堆的属性和那些会丢失。你要串连现有的，这有点很难记住如何做是正确的，新的属性名称。为了简单，MakeNode将读取静态属性_ATTRS_2_UI ，并为你做，串联。它将连接所有这些名单，从每类继承链中的每个级别，每个类都可以处理自己的属性。在微调，我们有：

  _ATTRS_2_UI：{
     BIND：VALUE
    同步：VALUE
 }，

MakeNode将接受的名称，数组或单一的属性名称，在这种情况下。

问题自然就出现了，为什么两个列表，一个用于同步约束力？ SYNC是首次周围， renderUI和bindUI方法后，如果它们存在，被称为前syncUI而那些上市BIND将被绑定到为以后的变化，相应的属性。常常SYNC阵列比少项BIND清单，这是因为组件的模板可能已经配置属性相同的默认值，也没有必要做一个初步的同步。所以，如果的value配置属性的默认值是一个空字符串“ <input>模板中的value没有价值属性，那么有没有必要在初始化同步。

中列出的属性BIND将_uiSet Xxxx以任何顺序调用的方法，属性可以以任何顺序设置。属性SYNC上市将在它们上市前他们的继承者的祖先者的顺序被调用一次，因此如果一个依赖于另一个（不应该），顺序可能很重要。

MakeNode将检查在这些阵列中的任何重复的条目。如果任何出现，它意味着已经处理此属性和任何新的声明将最有可能超越我们的一个类组件继承_uiSet Xxxx为它的处理程序。顺便说一下，MakeNode在_CLASS_NAMES重复的条目，这也可能导致在一些冲突虽然不是所有的情况下还检查。 MakeNode将消息写入任何这样的错误日志。

_PUBLISH财产

最后， _PUBLISH静态属性将列出这些事件予以公布。它包含一个散列，使用事件的名称作为其键和对象的文字作为其值的配置属性。它会公布所有的继承链中的任何此类财产中列出的所有事件。同一事件的名称，可以发表在一个类，在任何类从它继承，这将使后来者的配置属性将覆盖在年纪稍长的。例如，你可能想使现有的全球赛事转播。正如_EVENTS财产，因为_PUBLISH是得不到的静态属性，当指定的功能，这是该方法的名称，作为一个字符串，需要给予。 this

结论

MakeNode提供了一个非常简单的模板处理器，与功能，是高度集成的部件基础类。它还提供了辅助方法创建在模板中使用的类名，并使用这些名称来定位和参考节点。它还提供了挂接到由UI组件本身所产生的事件和与之相关的每一个方法的手段。它所有这些事情，同时注意尊重继承链向上伸直Widget和你可以定义任何类的水平。

它不提供绝对的一切可能性，但其中涵盖了良好的范围。然而，它并不妨碍你增加额外的功能。你可能很少有写一个bindUI或syncUI方法，如果您使用胶水MakeNode提供，但你可以这样做，因为MakeNode不使用他们。

作为画廊那些有耐心看完，到目前为止，我还修改了安东尼Pipkin的图库组件的按钮设置，并在手风琴和TimeSpinner组件，所有可用的奖金。

作者简介：丹尼尔巴雷罗（网名萨蒂扬）已经存在了很长一段时间。 ENIAC的是关闭的前一天，他出生，所以他错过了，但他却没有错过了很多 。 他有一个打孔卡的机会，计划6502芯片（还记得苹果II？），自己的TRS - 80，看操作设备的一些精彩片在他的家乡阿根廷，有可能在博物馆别处。 当全球化向世界敞开了大门，他则勉强可用英语（加电机工程学士学位）把他的职业生涯路径，从而结束了在海湾地区的一个5年的工作，NCSA的马赛克天。 完全由他的一个朋友写在他的纯文本编辑器，<'s和>的有趣的波浪线很感兴趣，他结束了学习很多很多关于世界的前端工程。 这是一个自COBOL和FORTRAN的长途跋涉 。 现在他的生活相当愉快地半退休状态，在靠近西班牙巴塞罗那的地中海沿岸 。

分享和扩展：书签del.icio.us | Digg它！ | 书签交易！

在YUI 3画廊：地理

2011年5月6日下午4:46由Nicholas C. Zakas |在发展中， YUI 3画廊 | 评论地理位置是在浏览器中出现一个更令人兴奋的HTML5相关技术，地理图库模块，您可以访问的位置信息。 W3C的地理定位API提供了一个简单的界面，从JavaScript访问用户的位置。下面的代码访问用户的支持的浏览器中的当前位置：

 navigator.geolocation.getCurrentPosition(function(result) { //success handler }, function (result){ //failure handler })

执行此代码时，浏览器弹出一个消息，要求用户的权限，以揭示它们的当前位置。在Firefox中显示的对话框中看起来像这样：在Firefox的地理定位对话框

如果用户拒绝的权限，或者试图获得当前的位置时发生错误，故障处理程序被调用。否则，成功处理被称为当前位置的信息。该信息在经度和纬度坐标（其他相关信息，可为好，取决于执行）的形式。 W3C的地理定位API支持的Internet Explorer 9 +，Firefox 3.5的Safari浏览器5 +，Chrome，和Opera 10.6以及Android上的移动Safari浏览器和Webkit，使得它相当无处不在。可用时，它的地理模块使用地理定位API，并落在通过YQL pidgets.geoip开放以IP为基础的查找表时，不可用，或者如果有错误。此表是特别有用，因为你可以查找一个特定的IP地址的位置信息，或可以省略的IP地址，它会返回的IP地址请求的位置信息。确保后者的一部分，您需要做只有一个请求，得到的位置信息，而不是两个其他解决方案使用一个得到的IP地址，然后得到该IP地址的位置信息。在典型的锐时尚，地理模块提供了一个简化的界面访问地理位置信息。提供两个回调函数，成功和失败之一，而不是仅仅在一通。结果对象表示如果调用成功， success的物业：

 YUI({ gallery: 'gallery-2011.04.27-17-14' }).use('gallery-geo', function(Y) { Y.Geo.getCurrentLocation(function(response){ //check to see if it was successful if (response.success){ console.log(response.coords.latitude); console.log(response.coords.longitude); } }); });

当一个地理位置调用成功完成， success属性为true和response.coords是充满至少有两个属性latitude longitude和经度（如果使用原生API，然后所有可用的属性复制到这个对象）。还有一个source响应对象的属性，要么是“原生”，如果信息是取自本机API，或“pidgets.geoip”，如果它是由YQL检索。如果出现错误，或者如果用户拒绝提供位置信息，然后success是假的。地理定位API，如果有错误，地理模块将尝试，而不是基于IP的查找。但是，如果用户拒绝提供信息，基于IP的查找不执行。请记住，本机API是比IP位置更准确，因此，您将无法获得在浏览器中的相同质量的结果，不支持本土地理位置。然而，地理模块是一个良好的开端，为用户提供基于位置的经验。

分享和扩展：书签del.icio.us | Digg它！ | 书签交易！

锐3 DataTable中的快速编辑模式

4月19日，在下午3:20 2011年由约翰Lindal | 在发展， YUI 3画廊| 1条评论

即使YUI 3的DataTable还没有单个细胞中的内联编辑，它是相对简单的实现快速编辑模式。快速编辑DataTable中的插件锐3画廊允许同时编辑一个DataTable中的所有可见值。

（点击截图发挥这个例子。）

概述

至于与YUI 2版本，快速编辑模式的核心思想是，换出新的形式的元素，例如，输入域或下拉列表填充细胞的细胞格式化。这样做start()被调用，基于下文所述的配置。用户完成后，你可以调用getChanges()获得更改后的值，然后坚持。要退出快速编辑模式，呼吁cancel() （它被命名取消，而不是停下来提醒你，它放弃所有更改。）

由于快速的编辑廊模块是一个DataTable中的插件，你需要插入到您的DataTable之前，你可以用它：

 my_table.plug（Y.Plugin.DataTableQuickEdit）;

这个插件存储在DataTable的qe的成员，所以你必须这样调用插件的功能：

 my_table.qe.start（）;

配置

快速编辑增加了两个新的所有列的配置quickEdit快速qeFormatter和qeFormatter。

如果一个列的quickEdit属性定义，列将可编辑的快速编辑模式。要接受所有默认设置，你可以简单地设置quickEdit:true 。进行更多的控制，你可以传递一个具有以下属性的对象：

formatter

细胞格式化将呈现以适当的形式领域：<input type="text">，<TEXTAREA>，或<SELECT>。默认情况下，细胞格式化Y.Plugin.DataTableQuickEdit.textFormatter用于所有细胞产生的输入元素。要得到一个textarea元素，配置，而不是一列使用Y.Plugin.DataTableQuickEdit.textareaFormatter 。

validation

验证配置列中的各个领域。

css

CSS类编码的基本验证规则：

yiv-required: 值不能为空。
yiv-length:[x,y]: 字符串必须x x字符，并且在最y字符。至少必须指定其中一个X和Y。
yiv-integer:[x,y]: 整数值必须在x X ，并在y x y和y都是可选的。
yiv-decimal:[x,y]: 十进制值必须至少x和在最y 。指数是不允许的。 x x y y都是可选的。

fn

一个称为其范围和细胞的表单元素作为参数将与DataTable的功能。返回true，如果该值是有效的。否则，调用this.displayMessage(...)显示错误，则返回false。

msg

一个类型映射到一个基本的或正则表达式验证规则失败时，将显示的消息。有效的类型有： required ， min_length ， max_length ， integer ， decimal ， regex Regex 。是regex没有类型的默认，所以你必须指定一个消息，如果你配置了一个正则表达式验证。其他类型的默认的错误消息存储Y.FormManager.Strings Y.FormManager.Strings（所提供的画廊formmgr CSS验证）和可重写和/或本地化。

regex

正则表达式，该值必须满足以被视为有效。

有时候，一个不可编辑的列必须在快速编辑模式呈现不同的。最好的例子是一个列包含一个链接，因为从页面导航，而在快速编辑模式可能是灾难性的的。要删除在快速编辑链接，配置qeFormatter列Y.Plugin.DataTableQuickEdit.readonlyLinkFormatter 。对于电子邮件地址，使用Y.Plugin.DataTableQuickEdit.readonlyEmailFormatter 。你也可以写你自己的自定义，只读格式化。只需按照正常的规则，为建设一个DataTable细胞格式化。

缺少的特性

由于在YUI 3.3.0 DataTable中的td 一个错误td元素传递给一列格式化，实际上是从以前的列。这使得它支持复制下来，在第一行中的一个按钮，让你的价值复制所有其他行太麻烦。

该缺陷还需要一个基本的快速编辑单元格格式化完成改造，而不是操纵DOM返回的文本。这是为什么没有正式在此初始版本支持自定义单元格的格式化。如果你喜欢冒险，你仍然可以建立，但要记住，你将需要重写，包括支持复制下来加入，一旦在DataTable中的错误是固定的。

作者简介： 约翰Lindal （ @ jafl5272在Twitter）建设的基础上率先工程师之一雅虎 APT是内置。 在此之前，他曾在雅虎出版商网络。

分享和扩展：书签del.icio.us | Digg它！ | 书签交易！

过滤锐3 DataTable中显示的数据，

3月1日下午01:39 2011年由约翰Lindal |在发展中，锐3图库| 4评论

除了排序，这是由支持YUI 3的DataTable ，它往往是有用的是能够对数据进行筛选，并显示可用的行的子集。在查询生成器部件锐3画廊提供了一个构建一个简单的过滤器表达式的UI 。

（点击截图发挥这个例子。）

历史

雅虎出版商网络（YPN）和我一起工作的同事写的第一个版本。（他离开后不久，尝试诚实的就业由Jamie Zawinski的先例后，他开了一家酒吧推销啤酒 - 家中自酿，毫不逊色，但我离题...）黑客查询生成器的第一个版本后，他向我展示它的错误。几天后，他抱怨说，“你改写了整个事情！”其实，我改写了多年来数次。 YPN已经一去不复返了，但最新的YUI的查询生成器“的权力，所有数据表的版本APT ，雅虎的显示广告管理平台。 YUI的3端口实际上是我不得不做，以生成一个新版本的最少的工作！

这个例子是如何工作的

这个例子的核心是：（1）查询生成器指定用户可以对数据进行筛选和（2）延伸到Y.DataSource.Local实现过滤器的配置。（服务器端分页，你会向服务器发送的数据进行筛选和烤到您的SQL查询。）

配置查询生成器，例如先定义一个可以过滤的变量列表：

 VAR var_list =
 [
	 {
		名称：“标题”，
		类型：'string'的，
		文字：“标题”
	 }，
	 {
		名称：“今年'
		类型：“数”，
		文字：“年”，
		验证：“yiv整数：[0,2100]”
	 }，
	 {
		名称：“量”，
		类型：“数”，
		文字：“量”，
		验证：“yiv整数：[0]”
	 }
 ;

每个变量都被分配一个名称（匹配DataTable中的列配置的关键）和类型。默认的类型是“串”，“数”和“选择”，但你可以扩展构建自定义插件（见下文）。对于每种类型，您使用，您还必须定义一个运营商的设置：

 VAR OPS =
 {
	字符串：
	 [
		 {值：'包含'，文字：'包含'}，
		 {价值：“开始”，文字：“开始”}，
		 {价值：“两端”，文字：“完”}
	 ]

	编号：
	 [
		 {价值：“平等”，文本：“=”}，
		 {值：“少”，文字：'<='}，
		 {值：“更大的”，文本：'> ='}
	 ]
 };

这指定的经营者，用户可以适用于每个变量的类型。（如果您需要两套不同的运营商相同的基本类型的变量，你可以克隆的类型。参见下面的插件部分。）

Y。FormManager是用来验证用户输入的过滤器应用之前的值。在上面的查询生成器配置每个变量的验证密钥提供了CSS，这是由Y. FormManager解释数据。

如果通过了所有验证，请求被发送到数据源。扩展Y.DataSource.Local很简单。它只是过滤器，然后返回结果数据：

 Y.extend（CustomDataSource，Y.DataSource.Local
 {
	 _defDataFn：功能（E）
	 {
		数据筛选数据（e.data，e.request.filter）;
		 VAR响应=
		 {
			结果：data.slice（e.request.recordOffset
						 e.request.recordOffset + e.request.rowsPerPage）
			元：
			 {
				总记录：data.length
			 }
		 };

		 this.fire（“回应”，Y.mix（{响应：响应}，E））;
	 }
 }）;

filter的请求的元素是QueryBuilder.toDatabaseQuery() （），它[variable, operator, value]值]元组。另外还要注意的响应必须包括上记录总数的信息，因为基于过滤器被应用。

filterData()简单地循环toDatabaseQuery()从元组，申请在两个级别的查找表中定义的过滤器运营商：

 VAR过滤器=
 {
	字符串：
	 {
		包含：函数（值，过滤器）
		 {
			返回（value.indexOf（过滤器）> = 0）;
		 }，
		 “开始，用”：函数（值，过滤器）
		 {
			返回（value.substr（0，filter.length）==过滤器）;
		 }，
		 “结尾使用”：函数（值，过滤）
		 {
			返回（value.substr（- filter.length）==过滤器）;
		 }
	 }，

	编号：
	 {
		平等：函数（值，过滤器）
		 {
			返回（parseInt（价值10）== parseInt（过滤器，10））;
		 }，
		不足：功能（价值，过滤器）
		 {
			返回（parseInt（价值10）<= parseInt（过滤器，10））;
		 }，
		更大：函数（值，过滤器）
		 {
			返回（parseInt（价值10）> = parseInt（过滤器，10））;
		 }
	 }
 };

这一切之后，DataTable中只显示它从数据源接收。

插件

Y.QueryBuilder.plugin_mapping定义类型的名称映射到实际的类。你可以增加这个映射有两种方式：

克隆定义为同一类的新名称的现有类型。这允许不同的运营商相同的基本类型不同的变量。
创建一个通过实施新型插件API 。研究现有插件的源代码是最好的方式来获得这个API是如何工作的感觉。

通用查询生成器

查询生成器不支持括号，所以你可以和所有的条件或或全部条件。虽然这是我所见过的所有设计都可能引入的图形表示的布尔表达式的括号，使用过于繁琐。文本表示是更简单，更易于操作。表达式生成器集成到一个widget，让文字表述，而不必记住语法或类型的一切，在手工构建一个查询生成器。

作者简介： 约翰Lindal （ @ jafl5272在Twitter）建设的基础上率先工程师之一雅虎 APT是内置。 在此之前，他曾在雅虎出版商网络。

分享和扩展：书签del.icio.us | Digg它！ | 书签交易！

Treeble与YUI 3的DataTable

2011年1月24日，上午10点四十一约翰Lindal |在发展中， YUI 3画廊 | 7评论

beta版的DataTable中锐3.3.0为我们提供了一个非常强大的组件一起玩。要踢一个有用的方式轮胎，我决定更新我的 Treeble例子使用的DataTable 。（Treeble可以显示在一个表中的分层数据。）

让我高兴的，这是一件轻而易举的！ TreebleDataSource ，它扩展了YUI的数据源3，所以我不得不这样做是插入到DataTable中使用它Y.Plugin.DataTableDataSource ，然后配置列在所有的辛勤工作是：

 VAR DS = Y. TreebleDataSource (...),
	 PG =新Y. Paginator (...),
	表;

函数sendRequest（）{
	 table.datasource.load（{
		要求：{
			从startIndex：pg.getStartIndex（），
			 resultCount：pg.getRowsPerPage（）
		 }
	 }）;
 }

 VAR COLS = [
     {键：“yui33的黑客”，标签：“}，
     {
        关键：“treeblenub”标签：“，
        格式化：Y.Treeble.buildTwistdownFormatter（sendRequest）
     }，
     {
        关键：“标题”标签：“标题”，
        格式化：Y.Treeble.treeValueFormatter
     }，
     ... ...
 ;

表=新Y.DataTable.Base（{columnset：COLS}）;
 table.plug（Y.Plugin.DataTableDataSource，{数据源：DS}）;

要看到完整的源代码，是指以活生生的例子。

唯一美中不足的苍蝇是：

yui33劈列。由于在YUI 3.3.0 DataTable中的td 一个错误td元素传递给一列格式化，实际上是从以前的列。因此，表中的第一列显示的twistdown，第二列是空的。
未定义的值的数据显示为{value} ，而不是空白（错误2529858 ）。

为了使Treeble更容易使用，我添加了一个山姆皮肤风格，以书面的CSS类Y.Treeble格式化。

享受！

作者简介： 约翰Lindal （ @ jafl5272在Twitter）建设的基础上率先工程师之一雅虎 APT是内置。 在此之前，他曾在雅虎出版商网络。

分享和扩展：书签del.icio.us | Digg它！ | 书签交易！

在YUI 3画廊：传送带模块

2010年12月13日11时53时戈帕尔卡特桑和弗兰克费边|在发展中， YUI 3画廊 | 16评论

作者简介： 戈帕尔卡特桑（ @ g13n ）雅虎在印度班加罗尔，在那里他是前端工程社区院长之一;戈帕尔已锐上的首席工程师2传送带2.6.0发布以来的项目。 他也是新锐3画廊传送带模块的作者。弗兰克费边从德国和雅虎在北京的工程的冰雹;费边与雅虎以来，他在格拉斯哥大学完成他的主人研究。

什么是旋转木马？

传送带控制提供了部件之间的垂直或水平排列在一个重载的页面区域状物体设置浏览。 “传送带”的比喻，源于一个比喻幻灯片在胶片摄影的日子传送带，传送带控制，可以保持忠于这个比喻让一个连续的，通过所有的内容块的圆形导航。

传送带是一个部件，让你“超负荷”页面上的空间，提供更多的空间，比它的尺寸范围内的符合的内容，同时提供了一种简单，直观的机制，为用户发现和浏览其他内容家庭的一部分。手风琴，制表符，树木和ScrollViews是这一流派的其他例子。

为什么又一次传送带控制呢？

YUI 3需要一个强大的，功能丰富的旋转木马（正如我们在锐2 ）。这个转盘的设计目标是使精益和清洁，并添加额外的配置，通过插件，利用优势YUI 3的模块化保持轻盈和速度的内在支持。

YUI 3 Widget框架

编写自定义部件使用YUI 3的最大的优势之一是Widget框架（Widget框架：用户指南，深入的视频介绍）。我YUI 3画廊传送带传送带比较YUI 2.8.2 ，YUI 3版是精简和优雅。这是因为大多数提供了基础，提供一套通用部件的属性，有纪律的生命周期，渐进增强支持，等方面的繁重Widget类。

锐3 Widget框架还提供了一个一致的MVC模式，促进每一个部件，采用分离状态的方法与UI更新方法。这使得代码非常干净，维护的。事实上，这是为什么YUI 3传送带是比其先前的锐2型表妹的重要因素之一。

锐3插件模型允许开发人员添加新的功能或修改现有的行为对象。这允许添加的传送带上的附加功能，动态地拉通过Ajax等元素，因此，YUI 3传送带不烤到它的动画代码，而是我已经创建了一个插件，它增加了动画需要的地方的情况下支持。这有助于保持非常轻量级的组件。

一个为自己的网站画廊传送带

读取传送带是什么和它如何能帮助您改善您的网站后，你希望感到渴望得到你的手脏。不要担心，我们锐3画廊传送带延伸，实施一个旋转木马在你的网站提供HTML格式的项目符号列表一样简单。这不只是“推销”出去 - 这就是我们最近如何集成到一个画廊传送带雅虎体育搜索结果页。

一个简单的例子

让我们先从一个简单的例子，几乎涵盖了所有你需要知道。最简单的方法是让您使用新的画廊传送带锐3自动将负载从雅虎的内容交付网络。回顾传送带是什么，滚动列表中的项目，我们在HTML中创建一个列表。我们包括在一个div的名单，这使得我们的JavaScript很容易地找到工作。如果您已经有一些是在标记列表的方式表示的数据，你可能也只是把它周围的传送带格和测试你的运气！这是非常重要的说，虽然我们在这里用一个形象的例子，你可以使用任何你想要的画廊传送带！

  <div class="carousel" id="container">
   <OL>
     <LI> <img src="img/c1.jpg"> </李
     <LI> <img src="img/c2.jpg"> </李
     <LI> <img src="img/c3.jpg"> </李
     <LI> <img src="img/c4.jpg"> </李
     <LI> <img src="img/c5.jpg"> </李
     </ OL>
 </ DIV>

现在，我们有我们的工作与数据，我们要增强显示所有五个项目使用的传送带部件的长相。假设你已经使用YUI 3，这是一个简单的任务。唯一，你可能没有见过，这取决于你有多深已挖成锐3，在过去的画廊，是我们明确指定画廊版本。这是必要的，因为我们使用的是一个全新的部件，这是不包括在YUI的装载机尝试加载默认情况下建立的画廊。然而，YUI和YUI画廊成熟，这不会是必要再在未来时默认生成的数量正在增加。

  YUI（{画廊：“画廊2010.10.20 - 19 - 33'}）
 使用（“画廊传送带”，“画廊传送带- ANIM”，“替代”，函数（y）{
   VAR传送带=新Y.传送带（{boundingBox：“＃容器”，
    contentBox：“＃容器> OL”}）;
   carousel.plug（Y. CarouselAnimPlugin，{动画：{速度：0.7}）;
   carousel.render（）;
 }）;

（顺便说一下，如果你获得全新的东西，您可以访问感兴趣锐3画廊库GitHub上或戈帕尔的叉子，他在那里发展传送带。如果您发现了错误，我们总是很高兴听到它。）

回到我们的例子... ... YUI将采取从这里。装载机自动拉廊传送带和雅虎的内容交付网络的依赖关系。之后，传送带被初始化并显示出来。然后，用户可以单击向左或向右箭头滚动显示。请原谅我带来一个不必要的复杂性，但我无法抗拒。我用Y.CarouselAnimPlugin传送带滑动顺利，让我们从一个页面到其他，而不是仅仅显示下一页瞬间。随意发挥，如果你想与速度参数。

正如你可以看到从上面的截图中，传送带和运行。但是，CSS可能不适合到您的网页的其余部分很好。这使我们下一节，我们将讨论如何定制画廊传送带。

自定义图库传送带

现在，你有你的传送带和运行，并确定了为您的网站的使用情况下，你希望希望它无缝集成。如前所述，我们这样做，我们的体育搜索结果页。如果你想增加可见项目的数量，例如3至4，你可以这样做通过修改实例传送带行。

  VAR传送带=新Y.传送带（{boundingBox：“＃容器”，
  contentBox：“＃容器> OL”，numVisible：4}）;

还不够好？是的，正确的。幸运的是，CSS允许我们添加我们自己的风格定义，甚至不触及任何现有的CSS覆盖初始的。所以你的第一步可能会被删除边界，因为他们是相当突兀。只需添加到您的网页标题下面的CSS。

  。YUI 3，转盘{
  边界：无;
 }
传送带的资产净值。YUI 3 {
  背景：没有重要的;
 }
 。传送带OL李{
  边界：无;
 }

现在，看起来更好。我还使用了负的保证金，以减少我的传送带和标题之间的差距。但是，我们现在还没有完全出现。我认为你也想用自己的自定义按钮，它很好地融入您的页面布局。在这个例子中，我们将使用雅虎的搜索结果页面上也使用相同的按键。这需要多一点，但仍然简单，CSS。

 传送带的按钮。YUI 3 {
  背景：URL（“sprite_button.png”）不重复滚动0 0透明的重要！
  高度：20像素的重要;宽度：！28px重要;
 }
锐3转盘导航项目{
  背景：URL（“sprite_button.png”）不重复滚动0 0透明的重要！
  背景位置：133px 0重要;！
 }
 YUI 3传送带按钮。{
  背景位置：90px 0重要;！
  保证金右：35px重要;
 }
 。YUI 3，旋转木马，第一个按钮，禁用{
  背景位置：60px 0重要;！
  保证金右：35px重要;
 }
 3 YUI的传送带，旁边的按钮{
  背景位置：30px 0重要;！
 }
锐3传送带按钮禁用{
  背景位置：0重要！
 }
 。YUI 3，转盘导航项目选择{
  背景位置：121px 0重要;！
 }

今天我们将离开它，并希望你觉得准备好开始。至少，我们需要。然而，这取决于你的网站是多么大，以及如何感兴趣，你在它的性能，有来自第三方的内容交付网络，也适用于这里的东西有关加载的一般想法。 Sidnei达席尔瓦例如，在博客中提出了一些有趣的想法本月初。我们将竭诚为您提供一个如何解释如何YUI的部件和它的依赖可以移动到自己的网站，甚至是内容交付网络，让你能够保持尽可能低的HTTP请求的数量。让我们知道，如果你有兴趣，我们期待着您的反馈！

Yahoo!用户界面博客（YUIBlog）

在YUI 3画廊：批量编辑器部件

概述

配置

本地与远程数据源

实际使用的情况下

更新：“MakeNode”部件扩展

扩展您的组件

定义模板

_CLASS_NAMES财产

{S}占位符

使用renderUI _makeNode

_locateNodes方法

_EVENTS静态属性

_ATTRS_2_UI静态属性

_PUBLISH财产

结论

在YUI 3画廊：地理

锐3 DataTable中的快速编辑模式

概述

配置

缺少的特性

过滤锐3 DataTable中显示的数据 ，

历史

这个例子是如何工作的

插件

通用查询生成器

Treeble与YUI 3的DataTable

在YUI 3画廊：传送带模块

什么是旋转木马？

为什么又一次传送带控制呢？

YUI 3 Widget框架

一个为自己的网站画廊传送带

一个简单的例子

自定义图库传送带

更多的探索，在画廊

YUI库在Twitter

翻译

辛迪加

最近的帖子

YUI库

档案：

网志串连

评论政策

成为一个Yahoo!

元：

过滤锐3 DataTable中显示的数据，