Лучший ненавязчивый способ добавить подтверждение JQuery к произвольному элементу - PullRequest
1 голос
/ 11 ноября 2011

Я новичок в jquery и ищу хороший ненавязчивый способ добавить замену jquery для javascript «подтверждения» к элементам HTML.В частности, я хочу иметь возможность использовать его для кнопок ASP.NET, LinkButtons, ImageButtons, HyperLink и т. Д., Что на стороне клиента означает любое из:

<input type="submit"... />
<a href="javascript:__doPostBack... />
<input type="image"... />
... etc ...

Решение, которое я придумала, заключается в добавлениипользовательский атрибут для серверного элемента управления ASP.NET (и, следовательно, для элемента клиента), например:

<asp:ImageButton ... data-confirmPrompt="OK to delete customer 123?" ... />

, который отображается как:

<input type="image" data-confirmPrompt="OK to delete customer 123?" ... />

Затем мне просто нужно добавитьщелкните обработчик для элементов, которые имеют этот пользовательский атрибут.В следующем примере используется jquery-impromptu , но тот же принцип работает с любой из реализаций модального диалогового окна jquery:

$(document).ready(function () {
    $("[data-confirmPrompt]").click(function (event) {
        var confirmPrompt = event.currentTarget.attributes['data-confirmPrompt'].value;
        event.preventDefault();
        $.prompt(confirmPrompt, {
            buttons: { Yes: true, No: false },
            callback: function (v, m, f) {
                if (v) {
                    // User clicked Yes.  Unbind handler to avoid
                    // recursion, then click the target element again
                    $(event.currentTarget).unbind('click');
                    event.currentTarget.click();
                }
            }
        });
    });
});

Кажется, что все это прекрасно работает в IE8 с XHTML 1.0 Strict.Итак, мои вопросы:

  1. Будут ли все современные браузеры принимать пользовательские атрибуты, подобные этому?

  2. Я понимаю, что это не является строго стандартным стандартом.Кто-нибудь может предложить совместимую со стандартами альтернативу, которая хотя бы столь же ненавязчива и проста в использовании?

UPDATE добавлен data- префикс к пользовательскому атрибуту, который я понимаюпо крайней мере, делает его совместимым с HTML5.

ОБНОВЛЕНИЕ 2 См. этот дополнительный вопрос для улучшенного решения.

Ответы [ 3 ]

2 голосов
/ 11 ноября 2011

Используйте атрибут data-, см. здесь

<a href='#' data-confirm="Are you sure?">Some Link</a>
2 голосов
/ 11 ноября 2011

Ответ на 1 : Да, они будут.

Ответ на 2 : Вы можете добавить класс CSS с именем require-Подтвердить и добавить атрибут data-description или data-meta с дополнительным текстом, который вы ' буду использовать в вашем обработчике.

Почему оба?

В случае, если у вас есть несколько функций, встроенных в вашу страницу. Класс CSS сообщает, какие функции следует добавить, а атрибут data- содержит метаданные для использования.

Если вы будете использовать только одну единственную функциональность, вы можете легко опустить ссылку CSS и просто использовать атрибут data-.

0 голосов
/ 11 ноября 2011

лично я использую определенный класс для подобных вещей.

Основная причина в том, что их легко выбрать с помощью чего-то вроде $('.confirm').each() или лучше $('.confirm').youConfirmPlugin(). Кроме того, CSS легко добавляется в файл CSS (где он принадлежит).

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

...