65.9K
CodeProject 正在变化。 阅读更多。
Home

自定义样式的复选框

Matt Gullett
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.45/5 (7投票s)

2008年4月21日

MIT

11分钟阅读

viewsIcon

54644

downloadIcon

639

一个 JavaScript 小部件， 用于自定义复选框的外观和感觉

自定义样式的复选框

左侧的图像显示了我最近为客户构建的 Web 应用程序中使用的自定义过滤器栏。这个特定的 Web 应用程序具有高度自定义的外观和感觉，它利用了大量自定义 Web 小部件、JavaScript、CSS 和 AJAX。这项工作很有趣，但一路上面临许多挑战。

在构建的几个自定义 Web 小部件中，有一个自定义复选框控件，其外观与此过滤器栏中的控件相似。（还可以看到一个自定义的 2 向滑块控件，类似于 Bluenile.com 上的控件，这将是另一篇文章的主题。）

复选框的基本操作尽可能类似于标准的浏览器生成的复选框，但采用了更具视觉吸引力的外观。虽然修改标准控件通常不利于可用性和可访问性问题，但有时仍然有必要实现与网站其他部分匹配的外观。本文介绍的控件并非旨在完全取代标准复选框控件，我也不建议它适用于所有类型的应用程序。但是，您可能会在许多地方找到它的用途，因此我将其公开提供。

支持的功能

开箱即用，此复选框小部件支持大多数典型的复选框功能。主要功能列于下文。
  • 2 种状态（选中，未选中）（* 注意：不支持三态复选框）
  • 启用/禁用
  • 鼠标支持
  • 键盘支持，包括制表顺序
  • 工具提示
  • 简单分组
  • 2 种状态 + 启用/禁用状态的可自定义图像。可以根据需要为整个页面或逐个复选框自定义图像。
  • 与标准 input type=checkbox 元素配合使用以同步状态。
  • 支持 onMouseOver、onMouseOut、onMouseDown、onMouseUp、onKeyDown 的自定义事件处理程序。
  • 已在 IE 6、IE 7 和 Mozilla FireFox 2.0 上测试

如何使用此小部件

在使用小部件之前，您必须执行 4 个步骤。这 4 个步骤将在下面进行说明。
1）在网页的 HEAD 部分添加一行以引用此小部件的 JavaScript 文件。下面显示了一个示例。
<script src="MTGCheckBoxes.js" type="text/javascript"></script>

注意：还包含一个名为 MTGCheckBoxesCompressed.js 的第二个 JS 文件，它会删除原始 JS 文件中的所有注释、多余的换行符等。您可以将其替换为 MTGCheckBoxes.js 以节省一些带宽。

2）在 CSS 表中添加一个 CSS 元素。下面显示了一个示例。
div.MTGCheckBox
{
    background-repeat: no-repeat;
    background-position: top left;
    padding-left: 20px;
    cursor: pointer;
}

注意：您使用的类名不需要是 MTGCheckBox。它可以是您喜欢的任何名称。初始化复选框小部件时，您将类名作为参数传递。

3）将下载文件中的 images 目录下的图像添加到您的项目/网站的 images 目录中。

4）将下载文件中的 MTGCheckBoxes.js 和 MTGCheckBoxesCompressed.js 添加到项目/网站中。
有几种方法可以使用此小部件。您使用的方法将取决于您构建应用程序的方式、使用的工具以及您打算如何与复选框进行交互。有 4 种基本的使用场景，我将在此一一介绍。

方法 1：自定义现有的 ASP.NET 页面（或其他遵循相同模式的页面）。

当 ASP.NET 生成复选框控件时，HTML 看起来与下面所示的示例类似。其他工具也可能遵循类似的模式。如果您的 HTML 看起来与下面所示的示例一致，则可以使用此方法。
<input id="CheckBox1" type="checkbox" name="CheckBox1" />
<label for="CheckBox1">ASP.NET CheckBox</label>

完成上述 4 个步骤后，您需要做的就是在页面中添加 window.onload 事件处理程序或修改现有的。要添加 window.onload 事件处理程序，请将以下代码片段放在 </body> 标签正下方。
<script>
window.onload = onLoad;

function onLoad(e)
{
    checkbox_initFromInputs("MTGCheckBox");
}
</script>

如果您的页面已经有 onLoad 事件处理程序，只需在方法末尾添加下面的行。
checkbox_initFromInputs("MTGCheckBox");


* 示例 1A 显示了一个简单的 ASP.NET 页面，在用此小部件自定义之前
* 示例 1B 显示了与示例 1A 相同的 ASP.NET 页面，已应用自定义


方法 2：使用内联 JavaScript 在页面渲染过程中渲染复选框对象

该小部件包含一个名为 checkbox_writeNewCheckbox 的辅助方法，您可以使用它通过内联 JavaScript 将复选框对象直接渲染到页面中。

checkbox_writeNewCheckbox 方法的原型如下。
checkbox_writeNewCheckbox(CSSClassName, NameOfInputElementToWrite, 
   Label, Checked?, [optional] Disabled?, 
   [optional] CustomTooltipText, [optional] GroupName)

这是一个演示此技术的代码片段。
<script language="javascript">
   checkbox_writeNewCheckbox("MTGCheckBox", "abcd1", 
   "Was written in JavaScript and is DISABLED", true, true);
</script>

此方法使用 document.write 来写入复选框的 HTML。写入的 HTML 包括一个隐藏的 input type=checkbox 元素，以便可以使用（如果需要）与后端处理无缝集成。

* 示例 2 显示了一个使用内联 JavaScript 插入复选框的简单 HTML 页面


方法 3：将复选框插入到预定义元素中的页面

该小部件包含一个名为 checkbox_insertNewCheckBox 的辅助方法，您可以使用它将复选框对象插入到页面中指定的 DOM 元素。

checkbox_insertNewCheckBox 方法的原型如下。
checkbox_insertNewCheckBox(IDOfElementToInsertAt, CSSClassName, 
   NameOfInputElementToWrite, Label, Checked?, 
   [optional] Disabled?, [optional] CustomTooltipText, 
   [optional] GroupName)

此方法创建 DOM 元素并将它们作为子元素插入到指定元素的页面中。

这是一个演示此技术的代码片段。
<div id=idInsertedCheckbox></div>
<script>
    checkbox_insertNewCheckBox("idInsertedCheckbox", "MTGCheckBox", 
    "InsertedCheckBox11", 
    "Was inserted into an existing div", true, false, "Tool tip #1");
</script>

* 示例 3 显示了一个简单的 HTML 页面，它使用内联 JavaScript 将复选框插入到页面中的预定义点


方法 4：使用服务器端代码生成给定类的 DIV 元素，然后允许小部件自定义其外观

正如我们在方法 1 中看到的，该小部件包含一个名为 checkbox_initFromDivs 的方法，该方法会查找页面上具有给定类名的所有 DIV 元素并应用自定义样式。有了这个可用方法，您就可以使用任何编程工具（ASP.NET、ASP、PHP 等）在服务器端生成 HTML，并在客户端允许小部件美化内容。

要使用此方法，请生成如下所示的 HTML。
<div class="MTGCheckBox" checked="1">This is my checkbox</div>

并像这样添加一个 window.onLoad 事件处理程序。
<script language>
window.onload = onLoad;

function onLoad(e)
{
    checkbox_initFromDivs("MTGCheckBox");
}
</script>


* 示例 4 显示了一个简单的生成的网页，其中包含 DIV 元素和对 initFromDivs(...) 的调用

自定义外观和感觉

该小部件提供了多种方法来自定义复选框的外观和感觉。您可以轻松应用自定义的 mouseOver 和 mouseOut 事件处理程序，自定义复选框图像本身的大小、形状和外观，以及自定义复选框图像的位置。

* 示例 5 展示了如何应用基本的鼠标悬停和移出自定义

下面是控件的 API 参考，并简要介绍了每种方法。
checkbox_initFromInputs(strClassName)
在 window.onLoad 事件处理程序中调用此方法来美化包含 ASP.NET 样式复选框的页面。
checkbox_initFromDivs(strClassName)
在 window.onload 事件处理程序中调用此方法来美化包含生成 DIV 元素（无论是使用内联 JavaScript 创建还是服务器端生成）的页面。
checkbox_writeNewCheckbox(strClassName, strName, strLabel, bChecked, bDisabled, strTooltip, strGroup)
调用此方法以使用内联 JavaScript 插入新复选框。此方法将使用 document.write 来插入新复选框。当您使用此方法时，还必须在 window.onload 事件处理程序中调用 checkbox_initFromInputs(...)。
checkbox_insertNewCheckBox(strDivID, strClassName, strName, strLabel, bChecked, bDisabled, strTooltip, strGroup)
调用此方法通过将 DOM 元素插入到给定元素（由 strDivID 指定）的页面上来插入新复选框。
checkbox_checkAll(strGroup, bFireClickEvents)
调用此方法将给定组中的所有复选框对象（或如果 strGroup = ""，则所有复选框）设置为选中状态。
checkbox_uncheckAll(strGroup, bFireClickEvents)
调用此方法将给定组中的所有复选框对象（或如果 strGroup = ""，则所有复选框）设置为未选中状态。
checkbox_sync()
有时页面上的其他 JavaScript 可能会设置 input 元素的 checked 属性。发生这种情况时，自定义复选框对象不会自动更改背景图像以向用户显示更改。此方法将显示与隐藏的 INPUT type=checkbox 元素的选中状态同步。
checkbox_getPostData(bForceReturnUnchecked)
在处理大量 AJAX 的网站时，您可能需要一种方法（就像我一样）来获取页面上所有复选框的发布数据。此方法将返回一个字符串，该字符串代表复选框的发布数据。
checkbox_setOption_IncludeTabIndexes(bValue)
默认情况下，该小部件包含键盘支持和制表功能。调用此方法以更改此选项。
注意：必须在任何小部件初始化或插入函数之前调用。
默认为 TRUE。
checkbox_setOption_PathToImages(strPath)
更改图像所在位置的默认路径。
注意：必须在任何小部件初始化或插入函数之前调用。
默认为 "IMAGES/"
checkbox_setOption_EnabledCheckedImageName(strName)
更改已启用选中状态的图像的文件名。
注意：必须在任何小部件初始化或插入函数之前调用。
默认为 "checkbox_EnabledChecked_BlackBox.gif"
checkbox_setOption_EnabledUnCheckedImageName(strName)
更改已启用未选中状态的图像的文件名。
注意：必须在任何小部件初始化或插入函数之前调用。
默认为 "checkbox_EnabledUnchecked_BlackBox.gif"
checkbox_setOption_DisabledCheckedImageName(strName)
更改已禁用选中状态的图像的文件名。
注意：必须在任何小部件初始化或插入函数之前调用。
默认为 "checkbox_DisabledChecked_BlackBox.gif"
checkbox_setOption_DisabledUnCheckedImageName(strName)
更改已禁用未选中状态的图像的文件名。
注意：必须在任何小部件初始化或插入函数之前调用。
默认为 "checkbox_DisabledUnchecked_BlackBox.gif"
checkbox_setOption_ToggleOnMouseUp(bValue)
默认情况下，小部件会在用户释放鼠标按钮时（而不是按下时）切换复选框状态，使其在选中和未选中之间切换。有些人似乎更喜欢在按下鼠标按钮时切换复选框，而不是在释放时。当设置为 FALSE 时，复选框状态将在 mouse down 事件中切换。
注意：必须在任何小部件初始化或插入函数之前调用。
默认为 TRUE。
checkbox_setOption_CustomMouseOverMethod(fnMethod)
如果需要，该小部件可以执行自定义的 OnMouseOver 方法。自定义函数应期望第一个参数是代表复选框的 DIV 对象。
注意：必须在任何小部件初始化或插入函数之前调用。
默认为 NULL。
checkbox_setOption_CustomMouseOutMethod(fnMethod)
如果需要，该小部件可以执行自定义的 OnMouseOut 方法。自定义函数应期望第一个参数是代表复选框的 DIV 对象。
注意：必须在任何小部件初始化或插入函数之前调用。
默认为 NULL。
checkbox_setOption_CustomMouseUpMethod(fnMethod)
如果需要，该小部件可以执行自定义的 OnMouseUp 方法。自定义函数应期望第一个参数是代表复选框的 DIV 对象。
注意：自定义函数应返回 TRUE 或 FALSE。FALSE 会告知小部件不切换复选框状态。
注意：必须在任何小部件初始化或插入函数之前调用。
默认为 NULL。
checkbox_setOption_CustomMouseDownMethod(fnMethod)
如果需要，该小部件可以执行自定义的 OnMouseDown 方法。自定义函数应期望第一个参数是代表复选框的 DIV 对象。
注意：自定义函数应返回 TRUE 或 FALSE。FALSE 会告知小部件不切换复选框状态。
注意：必须在任何小部件初始化或插入函数之前调用。
默认为 NULL。
checkbox_setOption_CustomKeyDownMethod(fnMethod)
如果需要，该小部件可以执行自定义的 OnKeyDown 方法。自定义函数应期望第一个参数是代表复选框的 DIV 对象。
注意：自定义函数应返回 TRUE 或 FALSE。FALSE 会告知小部件不切换复选框状态。
注意：必须在任何小部件初始化或插入函数之前调用。
默认为 NULL。

附加自定义

除了上面提供的自定义选项外，还有其他几种方法可以进一步自定义外观和感觉。这里没有提供示例，但我认为几句话就足够了。

  • 在 DIV 元素上设置自定义的 onClickEvent 事件处理程序。此方法应期望第一个参数是 DIV 对象。当复选框状态更改时，将触发此事件处理程序。
  • 您可以通过在 DIV 元素上设置以下属性来逐个复选框地自定义使用的图像。
    • cbx_disabledCheckedImage
    • cbx_disabledUnCheckedImage
    • cbx_CheckedImage
    • cbx_UnCheckedImage
  • 通过修改 CSS 条目将背景图像定位在右侧并使用右填充，将复选框放置在右侧。

已知问题

此小部件无法在 Opera 中使用。我不知道为什么。目前这对我来说不是优先事项，但如果有人能指出问题，我会设法抽出时间来纠正它。

关于自定义标准控件的说明

许多可用性专家认为，不应该重新实现标准控件（复选框、单选按钮、列表框、编辑框等），尤其是在 Web 上。其原因是自定义控件很少支持真正控件的所有可用性和可访问性功能，通常对用户机器的各种设置（例如主题、本地化等）很敏感，并且用户使用起来可能更困难。我相信这其中有很多道理，您应该在首先考虑应用程序/网站的目标受众之后再使用自定义控件。但是，我不认为这是一个绝对的规则（否则我为什么要创建这个小部件）。标准控件有时会缺少所需的功能或样式选项。有时应用程序或网站的目标受众是有限的，而不是普通大众。其他时候，标准控件会与应用程序/网站的外观相冲突并损害其外观。在这些独特的情况下，自定义自定义控件可能非常有用。

说到可用性，大概不重新实现标准控件的最大原因是，要接近模拟它们的行为需要大量工作。然后，在完成工作后，您会发现用户要么 a) 不喜欢它，要么 b) 非常喜欢它并希望所有其他内容都相应地进行自定义。无论哪种情况，工作都会带来更多的工作。所以，在选择这条道路时要小心。
© . All rights reserved.