我正在使用大量 Javascript 构建一个非常动态的基于 Web 的应用程序来处理用户事件。我正在使事情变得更有用,并遇到了一个我以前从未遇到过的问题。
我正在使用 jQuery,因此请考虑到您的答案。提前致谢。
我有一组按钮元素定义为:
<input type="button" title="My 'useful' text here." disabled="disabled" />
我有这些按钮的默认样式:
div#option_buttons input {
cursor: help;
}
然后,使用 jQuery,我在选择框上运行类似这样的点击事件:
window.current_column = '';
$('select.report_option_columns').live('click', function() {
var column = $(this).val();
if ( column == window.current_column ) {
// clear our our previous selections
window.current_column = '';
// make this option no longer selected
$(this).val('');
$('div#option_buttons input').attr('disabled','disabled');
$('div#option_buttons input').attr(
'title',
'You must select a column from this list.'
);
$('div#option_buttons input').css('cursor', 'help');
} else {
window.current_column = column;
$('div#option_buttons input').attr('disabled','');
$('div#option_buttons input').attr(
'title',
'Add this option for the column "' + column + '"'
);
$('div#option_buttons input').css('cursor', 'default');
}
});
因此,如您所见,当在选择框中选择一列时(此处未显示),我希望启用该按钮并像按钮一样运行(使用我自己的点击事件)。但是当未选择列时(包括默认加载),我希望禁用该按钮。我的可用性开发人员希望为用户提供微妙的上下文线索,了解他们可以做些什么来通过标题属性的原生呈现作为轻量级工具提示来启用按钮。我已经在应用程序的其他区域这样做了(这是一个疯狂的项目),我们的可用性测试表明,用户至少能够认识到当光标变为“帮助”时,他们可以将鼠标悬停在元素并获取有关正在发生的事情的一些信息。
但这是我第一次尝试使用表单元素。显然,当我在元素中放置 disabled="disabled" 时,它完全忽略了 title 属性并且永远不会显示工具提示。
现在,我知道我有几个选择(至少是我能想到的):
- 编写我自己的自定义工具提示插件,它更强大一点。
- 不要“禁用”该元素,而是将其设置为禁用。这是我最依赖的选项(就易于开发而言),但我讨厌这样做。
- 使按钮保持启用状态,但不处理单击事件。我不太喜欢这个选项,因为我喜欢让事物保持自然风格,因为它们应该是合乎逻辑的。禁用按钮“感觉”最正确,并且禁用按钮的外观可以立即识别为禁用按钮。
所以,说了这么多,我错过了什么吗?有什么简单的事情我可以做,我只是没有想到?谷歌搜索在这个话题上让我失望了,所以我想我会把它扔到 StackOverflow 上,让我对此有一些新的认识。
**编辑**
我刚刚在同一主题上找到了另一个 StackOverflow 问题,尽管那个人使用了一组非常不同的术语来描述他的问题(可能是我没有找到它的原因)。
问题的 url 是:Firefox does not show tooltips on disabled input fields
这个问题的两个答案都很好,虽然我想看看是否有人有任何其他建议。也许更具体的jQuery?再次感谢。