Вывод переменной в плагин jQuery / Javascript - PullRequest
Новая
       40

Вывод переменной в плагин jQuery / Javascript

2 голосов
/ 22 декабря 2011

Я хочу создать плагин jQuery, который можно прикрепить к текстовому полю, и после того, как пользователь введет определенную комбинацию клавиш, можно вызвать функцию обратного вызова с переменной, которая устанавливается на основе введенной комбинации клавиш. Я пришел из Ruby, и я не уверен, возможно ли это даже в Javascript / jQuery. Вот пример: 

$('textbox').attach_my_plugin(function(){|key_combo_var|
  // do something with key_combo_var...
});

Как бы я этого достиг? План Б - воткнуть key_combo_var в .data() элемента. Будет ли лучший способ, чем этот?

1 Ответ

2 голосов
/ 22 декабря 2011

Это вполне возможно. Хотя вы не даете много подробностей (какие конкретные действия?).

Хорошее начало - это шаблон jQuery-плагина

Сайт предоставляет возможность начать создание собственного плагина. Это хорошо документировано, поэтому, если вы можете читать код javascript / jquery, это не должно быть слишком сложно.

Если вы предоставите немного больше информации о том, что вы хотели бы сделать, я могу помочь вам в дальнейшей реализации, но сейчас это слишком размыто.

Как пример

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

Он в основном выполняет обратный вызов при нажатии ctrl-shift-a.

Вы можете проверить его вживую на jsfiddle . 

;(function ( $, window, document, undefined ) {

    var pluginName = 'callbackOnKey',
        defaults = {
            // define a default empty callback as default
            callback: function() {}
        };

    function Plugin( element, options ) {
        this.element = element;
        this.options = $.extend( {}, defaults, options) ;

        this._defaults = defaults;
        this._name = pluginName;

        this.init();
    }

    Plugin.prototype.init = function () {

        var $this = $(this.element),
            keydownHandler = function(e) {

                // in here, 'this' is the plugin instance thanks to $.proxy
                // so i can access the options property (this.options.callback)

                // if key combination is CTRL-SHIFT-a
                if (e.ctrlKey && e.shiftKey && e.which === 65 && this.options.callback) {

                    // execute the callback
                    this.options.callback.apply(this);

                }

            };

        // bind the handler on keydown
        // i use $.proxy to change the context the handler will be executed
        // with (what will be 'this' in the handler). by default it would
        // have been the input element, now it will be the plugin instance
        $this.bind('keydown', $.proxy(keydownHandler, this));

    };

    $.fn[pluginName] = function ( options ) {
        return this.each(function () {
            if (!$.data(this, 'plugin_' + pluginName)) {
                $.data(this, 'plugin_' + pluginName, new Plugin( this, options ));
            }
        });
    }

})(jQuery, window, document);

// use the plugin and pass a callback function
$('#myinput').callbackOnKey({
    callback: function() { alert("It's working :o)"); }
});
...