我有一个包含许多表单的应用程序,这些表单包含复选框,在取消选中时会禁用表单的部分。为了使这些表单更容易维护,我想创建一个可以用来";禁用";容器(例如包含表单UI的DIV);禁用";表示:
- 所有表单输入字段都被禁用(使用HTML
disabled
属性) - 所有文本都是";暗黑的";通过将其变灰(#999)
- 没有任何元素(尤其是像选项卡这样的jQuery小部件)会对键盘或鼠标输入做出响应
对于#1,我使用jQuery将disabled
属性应用于每个input
、select
和textarea
。容易的
对于#2,我将向容器应用一个CSS类(.disabled {color:#999 !important}
)。对于我自己的控件(例如链接按钮),我添加了额外的CSS规则来处理额外的禁用操作,比如像真正的按钮一样将背景变成不同的颜色
但是对于jQueryUI窗口小部件,是否有一种通用的方法";禁用";这样我就不必构建单独的CSS类和/或脚本来处理禁用每种不同类型的小部件了?例如,我可以应用特定的类或调用特定的方法来禁用任何一种遵循jQuery UI编码标准的jQuery UI小部件吗?
我也被困在第三位。有什么通用方法可以防止容器中的HTML响应任何键盘或鼠标输入,尤其是包括jQueryUI小部件?
我创建了一个jquery小部件来实现这一点。我刚把它放在Github上。我正在我工作的应用程序中使用它,它做得很好。如果你愿意,你可以自由尝试。(http://dougestep.com/dme/jquery-disabler-widget)。
作为所有jQuery UI窗口小部件的基础,窗口小部件工厂似乎至少尝试烘焙一些禁用的支持,您可以这样使用:
$(dialogEl).dialog("disable");
基本功能添加了ui-state-disabled
类和aria-disabled
属性,并且不激发任何处理程序。
可能有些小部件在特定情况下没有正确覆盖这一点;你需要测试一下。但这似乎在大多数情况下都有效。
备选方案:
应用ui-state-disabled
类可能会带来一些好处,但它可能只适用于样式,而不会阻止任何响应。
在某些浏览器中阻止响应的一种方法是pointer-events: none
,但这不是跨浏览器的,也有点像黑客攻击(例如,不确定它是否具有您想要的键盘行为)。
最好的方法是在所有具有onclick和onmouseover事件但返回false的事件之上放置一个不可见的覆盖。这可能有点尴尬,但肯定是最有效的。