Атрибут заголовка для отключенных элементов в Firefox

Question

Я создаю очень динамичное веб-приложение, использующее большое количество Javascript для обработки пользовательских событий. Я делаю вещи немного более удобными и столкнулся с проблемой, которой у меня никогда не было.

Я использую 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');
    }
});

Итак, как вы можете видеть, когда столбец выбран в поле выбора (здесь не показано), я хочу, чтобы кнопка была включена и работала так же, как и кнопка (с моими собственными событиями нажатия). Но когда столбец не выбран (включая загрузку по умолчанию), я хочу, чтобы кнопка была отключена. Разработчик юзабилити во мне хотел дать пользователям тонкие контекстные подсказки о том, что они могут сделать, чтобы активировать кнопку через встроенную визуализацию атрибута title в виде облегченной подсказки. Я делаю это уже в других областях приложения (это сумасшедший зверь проекта), и наши тесты юзабилити показали, что пользователи, по крайней мере, способны распознать, что когда курсор меняется на «помощь», они могут наводить курсор на элемент и получить некоторую информацию о том, что происходит.

Но я впервые пробовал это с элементом формы. По-видимому, когда я помещаю disabled = "disabled" в элементе, он полностью игнорирует атрибут title и никогда не отображает подсказку.

Теперь я знаю, что у меня есть несколько вариантов (по крайней мере, те, о которых я мог подумать):

1. Напишите мой собственный подключаемый модуль с подсказками, который немного более надежен.
2. Не «отключать» элемент, а стилизовать его как отключенный. Это был вариант, на который я больше всего опирался (с точки зрения простоты разработки), но я ненавижу это делать.
3. Оставьте кнопку включенной, но не обрабатывайте событие нажатия. Мне не очень нравится этот вариант, потому что мне нравится оставлять вещи в оригинальном стиле, какими они должны быть логически. Отключенная кнопка «чувствует» наиболее правильную, а внешний вид отключенной кнопки мгновенно распознается как отключенная кнопка.

Итак, со всем сказанным, я что-то упустил? Есть ли что-то простое, что я могу сделать, о котором я просто не думал? Поиски в Google не помогли мне в этой теме, поэтому я решил добавить это в StackOverflow, чтобы по-новому взглянуть на это.

** Редактировать **

Я только что нашел другой вопрос StackOverflow по этой же теме, хотя этот человек использовал совсем другой набор терминов, описывающих его проблему (возможно, поэтому я не нашел его).

URL-адрес вопроса: Firefox не показывает всплывающие подсказки на отключенных полях ввода

Оба ответа на этот вопрос довольно хороши, хотя я хотел бы посмотреть, есть ли у кого-нибудь другие предложения. Может быть, что-то более специфичное для jQuery? Еще раз спасибо.

Answer 1

У меня была похожая проблема, и я просто окружил отключенный элемент другим элементом и взаимодействовал с этим элементом. Я использовал подсказку, чтобы показать всплывающую подсказку для отключенного флажка

<div style="cursor: pointer;" class="disabled" title="Do something to make it work" >   
        <input disabled="disabled" type="checkbox">
</div>

Answer 2

Есть несколько проверочных плагинов, которые очень надежны. Вы можете найти их в области плагинов jQuery.

Еще один вариант для вас, который, как мне кажется, очень нравится и имеет тенденцию быть в тренде сейчас, - это использование плагина "Tipsy". Вы можете положить немного «?» значки справа от ваших текстовых полей, и люди могут навести на них курсор мыши, чтобы получить подсказку в стиле «Facebook». Этот плагин очень острый, и я очень рекомендую его.

Удачи!

Answer 3

Если это не нарушает ваш дизайн полностью, вы можете заменить кнопку на «span», «p», ... tag на «Мой« полезный »текст здесь».

И меняйте его кнопкой только тогда, когда пользователь делает правильный ход.

Answer 4

Я не проверял, решает ли это проблему с отсутствующим заголовком, но вы также можете отключить кнопку (кнопки), используя jquery на $(document).ready()

С уважением, harpax