Определить, был ли выбран селектор

Question

Я разрабатываю свой первый плагин jQuery, но хочу, чтобы он работал немного иначе, чем обычно. Я начну с объяснения его цели:

Очень простые, поля с указанным атрибутом заголовка заполнят поле ввода значением в атрибуте, фокусировка на поле ввода удалит это значение и позволит пользователю ввести текст в поле.

Я знаю, что это не новость, и, вероятно, уже 100 раз, но это скорее кривая обучения, чем окончательный результат.

Итак, я до сих пор работал двумя способами, первый метод - это код, вызываемый для определенного элемента:

$('input').fillForm();

Другой метод предполагает использование селектора в плагине (указан как опция), который найдет все элементы на странице с определенным классом и запустит функцию:

$().fillForm(); // Called from the document load

$('.fillForm').each(function () {... // Within the plugin

У меня вопрос, есть ли способ определить, является ли пользователь указанным селектором: $ ( 'input' ). FillForm (); Бит выделен жирным шрифтом.

Таким образом, если нет, тогда я могу сказать ему использовать селектор css по умолчанию.

Вот скрипка моего кода: http://jsfiddle.net/chricholson/HwkRw/

Там есть две версии, поменяйте местами комментарии, чтобы попробовать другой метод.

Answer 1

Я не уверен, точно что вы ищете, но вы можете получить доступ к свойству селектора свойство построенного объекта jQuery, как это:

console.log($("input").selector); // "input"

Из вашего плагина вы можете сделать:

$.fn.myPlugin = function() {
    console.log(this.selector);
}

$("p").myPlugin(); // "p"

Answer 2

Создайте метод для корневого объекта jQuery (вместо пространства имен fn), который можно вызывать без селектора.

(function($) {
    var defaultSelector = '.fillForm';

    // Use fillForm with your own selector.
    $.fn.fillForm = function() {
        // Blah blah blah.
    };

    // Use fillForm with the default selector.
    $.fillForm = function() {
        $(defaultSelector).fillForm();
    };
})(jQuery);

Теперь вы можете вызывать свой плагин с помощью $.fillForm()что является более распространенным паттерном.

Answer 3

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

(function ($) {
    $.fillForm = function (args) {

        var options = {
            selector : '.fillForm'
        }

        $.extend(options, args);

        alert(options.selector);

        $(options.selector).each(function () {
            var input = $(this);

            input.val(input.attr('title'));

            input.focus(function () {
                if (input.val() == input.attr('title')) {
                    input.val('');
                } else {
                    setTimeout(function () { input.select(); }, 10);
                }
            });

            input.blur(function () {
                if (input.val() == "") {
                    input.val(input.attr('title'));
                }
            });
        });

    };
})(jQuery);

$(document).ready(function () {

    $.fillForm({'selector' : '.foo'});

});

Рабочий пример здесь: http://jsfiddle.net/82t3K/

Answer 4

Почему бы не использовать стандартный атрибут "placeholder" и написать запасной вариант, который его использует? Или, что еще лучше, используйте один из множества уже написанных откатов? Каждый ответ, опубликованный до сих пор, содержал очень плохие советы различной степени.

Для вашей задачи я рекомендую использовать запасной заполнитель HTML, написанный Майком Тейлором (из Opera): jQuery-html5-placeholder . Или, по крайней мере, используйте его работу, чтобы вдохновить свою собственную.

Answer 5

Объект jQuery имеет свойство .selector, которое вы можете использовать.Вот пример, http://jsfiddle.net/Akkuma/CGFpC/

Если вы создадите пустой объект jQuery, $().selector; будет равна пустой строке.Если вы решили превратить это в виджет пользовательского интерфейса jQuery, вы не сможете получить к нему доступ просто из this.element.selector.