雅虎用户界面博客（YUIBlog）

在锐3图库：复选框组行为

复选框和单选按钮是众所周知的，从一小部分项目选择的模式。 前者可以让你选择任何项目（包括无）的一个子集，而后者需要正好一个选择。

但是，如果你需要一个不同的行为？ 该复选框组模块中的锐3图库实现了三个共同的案件及其他基础建设。 该模块是基于复选框，因为默认情况下，他们不执行任何限制，这使其成为理想的基础上建立。

第一个行为模块提供的是Y.AtLeastOneCheckboxGroup 。 这加强了，至少有一个项目必须选择。 超过一种选择是允许的，但取消选择所有的项目是可以避免的。 这个实现使用了“汞滴”算法讨论接口托格上 ：当您尝试取消最后一个项目，选择幻灯片从光标下的。 你可以使用它在这里 。

第二个例子（ Y.AtMostOneCheckboxGroup ）允许任何选择，但超过一种选择是不允许的。 请注意您不能使用此单选按钮，因为那是不可能取消选择当前项。 这表现在本例中第二次此网页 。

最后一个例子（ Y.SelectAllCheckboxGroup ）实现了“全选”的行为使用一个额外的复选框。 选择“全选”复选框，选择所有其他项目。 取消选择它取消所有其他项目。 选择或取消任何一项更新的“全选”复选框的状态。 你可以试着在第三个例子，在玩的这个页面 。

该possiblities是无止境的。 你可以建立自己的自定义行为很快被扩展基类的例子中使用的所有以上： Y.CheckboxGroup 。 这需要所有的官僚机构照顾，所以你必须做的就是实现enforceConstraints() 该函数调用与被管理的复选框列表和checkbox的指数刚刚被更改。 然后，您可以检查并更新所有的复选框的状态执行你的自定义约束。

在许多情况下，所有你需要的是自己的复选框，如Y.AtLeastOneCheckboxGroup和Y.AtMostOneCheckboxGroup 。 对于这一点，你的构造可传递，自基类Y.CheckboxGroup会管理你的清单。 如果您需要更多的控制，如Y.SelectAllCheckboxGroup ，你的构造应要求引用这些控件，您将需要存储它们，以便您可以访问他们的国家内enforceConstraints()

要使用复选框组模块，包括以下网页上的脚本：

 <脚本类型=“文/ JavaScript的”钢骨混凝土=“http://yui.yahooapis.com/combo?3.0.0/build/yui/yui-min.js&gallery-2009.12.08-22/build/gallery-checkboxgroups/画廊checkboxgroups - min.js“> </脚本>

所提供的行为都是安装即忘：

锐（）。使用（'画廊checkboxgroups'，函数（Y）
 {
	 / /所有复选框重视行为与CSS类的“my -在-最少的一个复选框组”
	新华AtLeastOneCheckboxGroup（'我的，在-最少一个复选框组。'）;

	 / /所有复选框重视行为与CSS类的“my -在-最一个复选框组”
	新华AtMostOneCheckboxGroup（'我的- AT的，最多的一个复选框组。'）;

	 / /所有复选框重视行为与CSS类“我选，全复选框组”
	 / /控制的复选框ID为“我选，全复选框”
	新华SelectAllCheckboxGroup（'＃我选，全复选框'，'我选，全复选框组。'）;
 }）;

最后一个注意：理想情况下，用自定义的行为样式复选框应该不同，所以用户有一些迹象表明，他们不只是简单的复选框。 例如，托格建议使用钻石Y.AtLeastOneCheckboxGroup 。 然而在实践中，还必须确保市民能弄清楚，你的控制要选择的项目使用。 所以，要聪明，只是没有太聪明了！

查找谈话： bloglines | Technorati的

共享和扩展： 书签和书签 | Digg它！ | reddit！