自定义样式复选框

分享于 

18分钟阅读

Web开发

  繁體

自定义样式复选框

左边的图像显示了我最近为客户端构建的web应用程序中使用的自定义过滤栏。 这个特定的web应用程序具有定制的外观,它利用了定制网页小部件。JavaScript。CSS和 AJAX。 这是一个有趣的工作分配,但在方法上呈现了许多挑战。

这些自定义web小部件是一个自定义复选框控件,该控件通常看到这个筛选栏。 ( 也被看到是一个自定义的2-way slider 控件,类似于在 Bluenile.com 上找到的一个文章。)

复选框的基本操作与我可以得到的标准浏览器类似,但是使用了更多的视觉吸引力。 虽然修改标准控件通常不是可用性和易访问性问题的好主意,但是有时仍然需要实现look-and-feel来匹配站点的其他部分。 本文中描述的控件并不是为标准复选框控件所代替的,也不是适用于所有类型的应用。 但是,你可能在许多领域中发现了它的用途,所以我将它的公开。

支持什么

这个复选框小部件提供了对大多数典型复选框函数的支持。 下面列出了关键特性。
  • 2 状态( 已经选中,未选中) ( * 注释: 不支持tri状态 check
  • 启用/禁用
  • 鼠标支持
  • 键盘支持,包括制表符排序
  • 工具提示
  • 简单分组
  • 2状态+ 启用/禁用的可以自定义图像。 根据需要,可以为整个页面或者复选框定制图像,根据需要。
  • 标准输入type=checkbox元素一起工作以同步状态。
  • 支持 onmouseover,onmouseout,onmousedown,onmouseup,onKeyDown的自定义事件处理程序。
  • 在 IE 6,IE 7和 Mozilla Firefox 2.0上测试

如何使用这里小部件

你必须执行 4个步骤才能使用小部件。 下面描述了以下 4个步骤。
为网页的头部部分添加一行,以引用这里小部件的JavaScript文件。 下面给出了一个示例。

<script src="MTGCheckBoxes.js" type="text/javascript"></script>




注:包含名为 MTGCheckBoxesCompressed.js的第二个JS文件,它删除了原始JS文件中的所有注释,多余的换行符,等等。 你可以将它替换为 MTGCheckBoxes.js 以节省一些带宽。

将CSS元素添加到CSS工作表。 下面是一个示例。




div.MTGCheckBox


{


 background-repeat: no-repeat;


 background-position: top left;


 padding-left: 20px;


 cursor: pointer;


}




注意:你使用的类 NAME 不需要是 MTGCheckBox。 你喜欢什么 NAME 都可以。 初始化复选框小部件时,将类 NAME 作为参数传递。

将图片目录中的图片添加到项目/网站的图片目录中。

从下载到项目/网站中添加 MTGCheckBoxes.js )。 有多种方法可以使用这个小部件。 你使用的方法取决于你如何构建应用程序。使用的工具以及如何与复选框交互。 这里有 4个基本的使用场景,我将在这里。

方法 1: 自定义现有的ASP.NET 页( 或者同一个 Pattern 中的其他页)。

当 ASP.NET 生成一个复选框控件时,这个HTML看起来像 below 所示的示例。 其他工具可能遵循类似的Pattern。 如果你的HTML看起来像示例 below,则可以使用这里方法。

<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 事件处理程序,只需将行 below 添加到方法的底部。




checkbox_initFromInputs("MTGCheckBox");





在使用这个小部件进行定制之前,* 示例 1A 显示了一个简单的ASP.NET 页面。
* 示例 1B shows示例 1A 显示了相同的ASP.NET 页,并应用了自定义。


方法 2: 在页面呈现时使用 inline JavaScript来呈现checkbox对象

小部件包含一个名为checkbox_writeNewCheckbox的helper 方法,你可以使用它直接使用 inline JavaScript将checkbox对象呈现到页面中。

checkbox_writeNewCheckbox方法具有以下 Prototype。

checkbox_writeNewCheckbox(CSSClassName, NameOfInputElementToWrite, 


 Label, Checked?, [optional] Disabled?, 


 [optional] CustomTooltipText, [optional] GroupName)




下面是演示这里技术的代码 Fragment。

<script language="javascript">


 checkbox_writeNewCheckbox("MTGCheckBox", "abcd1", 


 "Was written in JavaScript and is DISABLED", true, true);


</script>




这里方法使用 document.write 为复选框编写 HTML。 HTML编写包含一个隐藏输入type=checkbox元素,以便与后端处理的无缝集成可以在( 如果需要的话) 中使用。

* 示例shows一个简单的HTML页面,它使用 inline JavaScript插入复选框


方法 3: 在预先定义的元素内将复选框插入到页中

小部件包含一个名为checkbox_insertNewCheckBox的helper 方法,你可以使用它在给定的DOM元素中将checkbox对象插入到页面中。

checkbox_insertNewCheckBox方法具有以下 Prototype。

checkbox_insertNewCheckBox(IDOfElementToInsertAt, CSSClassName, 


 NameOfInputElementToWrite, Label, Checked?, 


 [optional] Disabled?, [optional] CustomTooltipText, 


 [optional] GroupName)




这里方法创建DOM元素并将它的作为指定元素的子元素插入页中。

下面是演示这里技术的代码 Fragment。

<div id=idInsertedCheckbox></div>


<script>


 checkbox_insertNewCheckBox("idInsertedCheckbox", "MTGCheckBox", 


 "InsertedCheckBox11", 


 "Was inserted into an existing div", true, false, "Tool tip #1");


</script>




在page页面上,* 示例 3显示了一个简单的HTML页面,该页面用于在预先定义的点上插入复选框( check )。


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

正如从方法 #1, 中看到的,小部件包含一个名为checkbox_initFromDivs的方法,用给定的类 NAME 查找页上的所有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(...);的调用。

自定义外观和感觉

widget提供了几种定制复选框外观和感觉的方法。 你可以轻松地应用自定义of和of事件处理程序,自定义复选框图像的大小。形状和外观。

* 示例 5 shows如何应用基本的mouseover和mouseout自定义自定义。

下面是对该控件的API引用,并简要说明每个方法的。
checkbox_initFromInputs(strClassName)
在 window.onLoad 事件处理程序中调用这里方法,使包含 ASP.NET 样式复选框的页面样式化。
checkbox_initFromDivs(strClassName)
在 window.onload 事件hanlder中调用这里方法以对包含生成的DIV元素( 使用 inline JavaScript或者服务器端生成的)的页面进行样式化。
checkbox_writeNewCheckbox ( strClassName,strName,strLabel,bChecked,bDisabled,strTooltip,strGroup )
调用这里方法以使用 inline JavaScript插入新的复选框。 这里方法将使用 document.write 插入新复选框。 在使用这里方法时,还必须在 window.onload 事件hanlder中调用 checkbox_initFromInputs(...)。
checkbox_insertNewCheckBox ( 支持 strDivID,strClassName,bChecked,strLabel,bDisabled,strTooltip,strGroup )
通过将DOM元素插入到给定元素( 按strDivID指定) 页上,调用这里方法来插入新的复选框。
checkbox_checkAll ( strGroup,bFireClickEvents )
调用这里方法将所有复选框对象设置为给定组( 或者如果 strGroup =""),所有复选框都为选中状态。
checkbox_uncheckAll ( strGroup,bFireClickEvents )
调用这里方法将所有复选框对象设置为给定组( 或者如果 strGroup =""),所有复选框都为未选中状态。
checkbox_sync()
有时页面上的其他javascript可以设置输入元素的checked属性。 发生这种情况时,自定义复选框对象不会自动更改 background 图像以表示对用户的更改。 这里方法将显示与隐藏输入type=checkbox元素的选中状态同步。
checkbox_getPostData(bForceReturnUnchecked)
在处理AJAX重网站时,可能需要( 我做了) 来获取页面上所有复选框的post数据。 这里方法将返回一个字符串,该字符串表示复选框的发布数据。
checkbox_setOption_IncludeTabIndexes(bValue)
默认情况下,小部件包括键盘支持和标签。 调用这里方法更改这里选项。
注:必须在任何小部件初始化或者插入函数之前调用。
默认为 true。
checkbox_setOption_PathToImages(strPath)
将默认路径更改为图像所在的位置。
注:必须在任何小部件初始化或者插入函数之前调用。
默认为"/images"
checkbox_setOption_EnabledCheckedImageName(strName)
为启用的选中状态更改图像的文件 NAME。
注:必须在任何小部件初始化或者插入函数之前调用。
默认值为 checkbox_enabledchecked_blackbox。gif"
checkbox_setOption_EnabledUnCheckedImageName(strName)
为启用的未选中状态更改图像的文件 NAME。
注:必须在任何小部件初始化或者插入函数之前调用。
默认值为 checkbox_enabledunchecked_blackbox。gif"
checkbox_setOption_DisabledCheckedImageName(strName)
更改已经禁用选中状态的图像的文件 NAME。
注:必须在任何小部件初始化或者插入函数之前调用。
默认值为 checkbox_disabledchecked_blackbox。gif"
checkbox_setOption_DisabledUnCheckedImageName(strName)
更改禁用的未选中状态的图像的文件 NAME。
注:必须在任何小部件初始化或者插入函数之前调用。
默认值为 checkbox_disabledunchecked_blackbox。gif"
checkbox_setOption_ToggleOnMouseUp(bValue)
默认情况下,当用户按下鼠标按钮时,小部件会切换选中和未选中的复选框状态。 有些人似乎喜欢在按下鼠标按钮时切换复选框,而不是在放开按钮时。 当设置为 false 时,将在鼠标下拉事件中打开复选框状态。
注:必须在任何小部件初始化或者插入函数之前调用。
默认为 true。
checkbox_setOption_CustomMouseOverMethod(fnMethod)
小部件可以根据需要执行自定义 onmouseover 方法。 自定义函数应该是第一个参数,它是表示复选框的DIV对象。
注:必须在任何小部件初始化或者插入函数之前调用。
默认为空。
checkbox_setOption_CustomMouseOutMethod(fnMethod)
小部件可以根据需要执行自定义 onmouseout 方法。 自定义函数应该是第一个参数,它是表示复选框的DIV对象。
注:必须在任何小部件初始化或者插入函数之前调用。
默认为空。
checkbox_setOption_CustomMouseUpMethod(fnMethod)
小部件可以根据需要执行自定义 onmouseup 方法。 自定义函数应该是第一个参数,它是表示复选框的DIV对象。
注:自定义函数应该是 return true 或者 false。 false 告诉小部件不要切换复选框状态。
注:必须在任何小部件初始化或者插入函数之前调用。
默认为空。
checkbox_setOption_CustomMouseDownMethod(fnMethod)
小部件可以根据需要执行自定义 onmousedown 方法。 自定义函数应该是第一个参数,它是表示复选框的DIV对象。
注:自定义函数应该是 return true 或者 false。 false 告诉小部件不要切换复选框状态。
注:必须在任何小部件初始化或者插入函数之前调用。
默认为空。
checkbox_setOption_CustomKeyDownMethod(fnMethod)
小部件可以根据需要执行自定义 onkeydown 方法。 自定义函数应该是第一个参数,它是表示复选框的DIV对象。
注:自定义函数应该是 return true 或者 false。 false 告诉小部件不要切换复选框状态。
注:必须在任何小部件初始化或者插入函数之前调用。
默认为空。

其他自定义设置

除了 上面 提供的自定义选项外,还有一些它的他方法可以进一步定制外观。 没有提供示例,但我认为几个词足够了。

  • 在DIV元素上设置一个customOnClickEvent事件 hanlder。 这里方法应该将第一个参数作为DIV对象。 更改复选框状态时,将激发此事件处理程序。
  • 你可以通过在DIV元素上设置以下属性来定制checkbox-by-checkbox基础上使用的图像。
    • cbx_disabledCheckedImage
    • cbx_disabledUnCheckedImage
    • cbx_CheckedImage
    • cbx_UnCheckedImage
  • 通过更改CSS条目在右侧放置复选框,将 background 图像置于右侧并使用右 padding。

已知问题

这个小部件与 Opera 不兼容。 我不知道为什么,这个时候不是优先级,但是如果有人能指出问题,我会试着找时间。

关于自定义标准控件的单词

相信不应该重新实现标准控件(。复选框,单选按钮,列表框,编辑框等),尤它的是在web上的可以用性人员分配。 对于这种情况,自定义控件很少支持实际的所有可以用性和可以访问性特性( 比如 )。 主题。本地化等,用户可能很难使用。 我相信这里有真实的分配,不应该使用自定义控件,而不考虑应用程序/站点的受众。 但是我不认为这是个绝对的( 否则,我为什么要创建这个小部件)。 标准控件有时会遗漏需要的功能或者样式选项。 有时,应用程序或者站点针对有限的受众,而不是总体总体。 其他时候,标准控件与应用程序/站点的外观进行竞争和削弱。 在这些特殊的情况下,定制定制控件非常有用。

对于可以用性来说,可以能最重要的原因是,它需要接近来模拟自己的行为。 然后完成工作后,发现用户不喜欢它或者b,它们太喜欢它了。 不管怎样工作会产生更多的工作。 所以,在选择这个路径时要小心。

相关文章