4

我正在使用大量 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 属性并且永远不会显示工具提示。

现在,我知道我有几个选择(至少是我能想到的):

  1. 编写我自己的自定义工具提示插件,它更强大一点。
  2. 不要“禁用”该元素,而是将其设置为禁用。这是我最依赖的选项(就易于开发而言),但我讨厌这样做。
  3. 使按钮保持启用状态,但不处理单击事件。我不太喜欢这个选项,因为我喜欢让事物保持自然风格,因为它们应该是合乎逻辑的。禁用按钮“感觉”最正确,并且禁用按钮的外观可以立即识别为禁用按钮。

所以,说了这么多,我错过了什么吗?有什么简单的事情我可以做,我只是没有想到?谷歌搜索在这个话题上让我失望了,所以我想我会把它扔到 StackOverflow 上,让我对此有一些新的认识。

**编辑**

我刚刚在同一主题上找到了另一个 StackOverflow 问题,尽管那个人使用了一组非常不同的术语来描述他的问题(可能是我没有找到它的原因)。

问题的 url 是:Firefox does not show tooltips on disabled input fields

这个问题的两个答案都很好,虽然我想看看是否有人有任何其他建议。也许更具体的jQuery?再次感谢。

4

4 回答 4

7

我遇到了类似的问题,我只是将禁用的元素包围在另一个元素中并与该 div 交互,我使用tipTip 来显​​示禁用复选框的工具提示

<div style="cursor: pointer;" class="disabled" title="Do something to make it work" >   
        <input disabled="disabled" type="checkbox">
</div>
于 2011-07-23T03:53:55.290 回答
3

有几个非常强大的验证插件。您可以在 jQuery 插件区找到它们。

我碰巧喜欢并且现在趋于流行的另一种选择是使用“Tipsy”插件。你可以把小'?文本字段右侧的图标,人们可以将鼠标悬停在它们上以获得“类似facebook”的工具提示。这个插件非常锋利,我强烈推荐它。

祝你好运!

于 2010-01-20T20:05:35.290 回答
1

我还没有测试这是否解决了缺少标题的问题,但您也可以使用 jquery 禁用按钮$(document).ready()

问候, 哈帕克斯

于 2010-01-20T19:45:04.540 回答
1

如果这并没有完全破坏您的设计,您可以将按钮替换为“span”、“p”、... 标记为“我的‘有用’文本。”

并且仅当用户做出正确的动作时才将其与按钮交换。

于 2010-01-20T20:46:42.763 回答