雅虎的用户界面博客（YUIBlog）

在锐三廊：复选框组行为

3月1日，在2010年|下午1时31分由约翰林达尔发展 ， 锐3画廊 | 没有评论

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

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

第一个行为模块所提供的是Y.AtLeastOneCheckboxGroup 。 这可强制执行，至少必须选取一个项目。 不止一个选择是允许的，但取消选择所有项目是可以避免的。 这个实现使用了水银“拖放”算法在讨论瓶酒的界面 ：当您尝试取消的最后一个项目，选择幻灯片从光标下。 你可以发挥它在这里 。

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

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

该possiblities是无穷无尽的。 你可以建立自己的自定义行为很快通过扩展基类：使用上述所有例子Y.CheckboxGroup 。 这需要所有的官僚照顾，因此，所有您需要做的就是实现enforceConstraints() 该函数调用与被管理的复选框列表以及刚刚被更改复选框指数。 然后，您可以检查并更新了所有的复选框的状态，以执行自定义的限制。

在许多情况下，所有你需要的是自己的复选框，如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重视行为类的所有复选框：“我的服务处最少的一个复选框组”
	新士元AtLeastOneCheckboxGroup（'。我，在最不- 1 -复选框组'）;

	 / /用CSS重视行为类的所有复选框：“我的服务处最一个复选框组”
	新士元AtMostOneCheckboxGroup（'。我的服务处最一个复选框组'）;

	 / /用CSS重视行为类的所有复选框：“我选，全复选框组”，
	 / /由ID为“我选，全复选框复选框控制的”
	新士元SelectAllCheckboxGroup（'＃我选，全复选框'，'。我选，全复选框组'）;
 ））;

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

查找谈话： bloglines | Technorati的

分享和扩展： del.icio.us书签与 | Digg它！ | reddit的！