jQuery плъгин - актуализиране на настройките след инициализация

Имам плъгин jQuery и искам да мога да променям опциите в движение, като този пример: $('.element').pwstabs('options','effect',scale) или нещо подобно на него. Опитах да добавя update: function, опитах да добавя Plugin.prototype.update, но все още не мога да разбера как да го направя :)

Ето структурата на плъгина:

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

  var pluginName = "pwstabs",
    defaults = {
      effect: 'scaleout',
      defaultTab: 1,                
      containerWidth: '100%',       
      tabsPosition: 'horizontal',   
      horizontalPosition: 'top',    
      verticalPosition: 'left',     
      responsive: false,            
      theme: '',                    
      rtl: false,                   
      controlls: false,
      next: '',
      prev: '',
      first: '',
      last: '',
      auto: false,
      play: '',
      pause: ''
    };


  function Plugin(element, options) {
    this.element = $(element);
    this.$elem = $(this.element);
    this.settings = $.extend({}, defaults, options);
    this._defaults = defaults;
    this._name = pluginName;
    this.init();
  }

  Plugin.prototype = {

    init: function(){

      // Here's the code for the plugin

    }

  };

  $.fn[pluginName] = function ( options ) {
    return this.each(function () {
      new Plugin( this, options );
    });
  };

})(jQuery, window, document);

Така че сега използвам приставката като:

$('.element').pwstabs({
  effect: 'scalein',
  defaultTab: 2
});

И когато щракна върху бутон, искам да променя ефекта на да кажем scaleout. С код като:

$('.button').click(function(){
  $('.element').pwstabs('options','effect','scalein');
});

И така, как да внедря това в приставката?


person Alex Chizhov    schedule 08.02.2015    source източник
comment
@guest271314, което може да работи на теория, но ще инициализира повторно плъгина, което не е нещо, което той иска :)   -  person Faris Zacina    schedule 08.02.2015
comment
@guest271314, вече е пробван, инициализира повторно плъгина   -  person Alex Chizhov    schedule 08.02.2015
comment
Добавете флагова променлива към init, ако приставката вече е стартирана, приемете промените в опциите, без да извиквате init отново? Добавяне на .data("init", true) към елемент, ако плъгинът вече е иницииран в елемент, приемане на промените в опциите без повторно извикване на init?   -  person guest271314    schedule 08.02.2015
comment
Това може да проработи и аз също се замислих за този подход. Въпреки това, OP питаше за конкретен модел на извикване, така че го внедрих в моя отговор.   -  person Faris Zacina    schedule 08.02.2015


Отговори (2)


Понастоящем единственият поддържан модел за извикване в този плъгин е изпращането на обектен литерал, съдържащ настройките за презаписване на настройките по подразбиране. напр.:

$('.element').pwstabs({
  effect: 'scalein',
  defaultTab: 2
});

Този модел на извикване е дефиниран в следния метод:

$.fn[pluginName] = function ( options ) {
    return this.each(function () {
        new Plugin( this, options );
    });
};

Както виждате, речник от опции се изпраща като единствен параметър към функцията на конструктора Plugin() за изграждане на приставката и инициализиране.

За да поддържате необходимия шаблон за извикване, ще трябва да модифицирате този метод, за да поддържа и двата модела за извикване (инициализиране с обектен литерал, но също така извикване на всеки метод с повече параметри, като вашия метод за настройка на опциите).

Ето една подобрена функция, която ще обработва и двата модела за извикване. В допълнение, той също така ще съхранява екземпляра на плъгин на елемент, така че да имате достъп до съществуващите настройки и т.н. при последващи извиквания (напр. промени в настройките) на същия елемент.

$.fn[pluginName] = function (options) {

    // get the arguments 
    var args = $.makeArray(arguments),
        after = args.slice(1);

    return this.each(function () {

        // check if there is an existing instance related to element
        var instance = $.data(this, pluginName);

        if (instance) {
            if (instance[options]) {
                instance[options].apply(instance, after);
            } else {
                $.error('Method ' + options + ' does not exist on Plugin');
            }
        } else {
            // create the plugin
            var plugin = new Plugin(this, options);

            // Store the plugin instance on the element
            $.data(this, pluginName, plugin);
            return plugin;
        }
    });
}

Това ще ви позволи да извикате приставката, както е поискано:

$('.element').pwstabs('options','effect','slidedown');

Това обаче означава, че имате метод „опции“ в прототипа на приставката, така че не забравяйте да добавите такъв:

Plugin.prototype = {

    options: function (option, val) {
        this.settings[option] = val;
    },

    // Constructing Tabs Plugin
    init: function () {
        // omitted code for brevity
    }
}

Както виждате настройките на опциите просто задават новата опция на съществуващия екземпляр. Много просто и ефективно. Новата настройка ще бъде взета от манипулатора на метода на кликване и готово!

Ето jsFiddle с примерен код, в случай че имате проблеми с прилагането на това, което описвах досега:

http://jsfiddle.net/7whs3u1n/6/

Актуализация: Подобрих много отговора си, за да се отърва от ненужните неща, да включа повече подробности и пълно изпълнение, което работи (проверете цигулката по-горе) ;) Надявам се, че това отговаря на въпроса ви!

Добавянето на състояние на приставката към вашия плъгин не беше трудно, но когато имате свободно време, проверете и алтернативния механизъм за писане на приставки за състояние на jQuery, наречен jQuery widget factory:

http://learn.jquery.com/plugins/stateful-plugins-with-widget-factory/

В бъдеще можете да обмислите пренаписване на вашия плъгин, за да използвате фабриката за джаджи. Това със сигурност ще направи кода ви по-прост;)

person Faris Zacina    schedule 08.02.2015
comment
Това е просто страхотно, благодаря ви за доброто обяснение и помощта! :) BTW как да се справя с това нещо в този метод "опции"? ^^ - person Alex Chizhov; 08.02.2015
comment
@TheZenCoder Публикува алтернативен шаблон за подход, специфичен за модела на извикване на прилагане на низови или обектни аргументи; въпреки че не адресира вътрешна init функция. Вашето парче вероятно е това, което OP търси; притежава много повече детайли и адресира init функцията. наздраве :) - person guest271314; 08.02.2015
comment
@guest271314 вашето внедряване също работи. Подобрих отговора си, за да подкрепя произволен брой аргументи и т.н., както във вашия отговор;) - person Faris Zacina; 08.02.2015
comment
@AlexChizhov, моля, проверете актуализациите. Трябва да си щастлив ;) и приеми отговора, ако си! - person Faris Zacina; 08.02.2015
comment
@TheZenCoder това е прекрасно! Благодаря ви много ;) С ваша помощ следващата версия на плъгина ще бъде много по-функционална :) - person Alex Chizhov; 08.02.2015
comment
@AlexChizhov Радвам се, че си щастлив и мога да помогна ;) - person Faris Zacina; 08.02.2015

Опитайте този модел

(function ($) {
    var defaults = {
        "text": "abcdefg",
    }
    , options = $.extend({}, defaults, options);
    $.fn.plugin = function (options) {
        var options = (function (opts, def) {
            var _opts = {};
            if (typeof opts[0] !== "object") {
                _opts[opts[0]] = opts[1];
            };
            return opts.length === 0 
                   ? def 
                   : typeof opts[0] === "object" 
                     ? opts[0] : _opts
        }([].slice.call(arguments), defaults));
        return $(this).text(options.text)
    }
}(jQuery));

$(".results:eq(0)").plugin(); // return `defaults`
$(".results:eq(1)").plugin({"text":"gfedcba"}); // return `options`
$(".results:eq(2)").plugin("text", 123); // return `arguments` as `options`

    (function ($) {
        var defaults = {
            "text": "abcdefg",
        }
        , options = $.extend({}, defaults, options);
        $.fn.plugin = function (options) {
            var options = (function (opts, def) {
                var _opts = {};
                if (typeof opts[0] !== "object") {
                    _opts[opts[0]] = opts[1];
                };
                return opts.length === 0 
                       ? def 
                       : typeof opts[0] === "object" 
                         ? opts[0] : _opts
            }([].slice.call(arguments), defaults));
            return $(this).text(options.text)
        }
    }(jQuery));
    
    $(".results:eq(0)").plugin(); // return `defaults`
    $(".results:eq(1)").plugin({"text":"gfedcba"}); // return `options`
    $(".results:eq(2)").plugin("text", 123); // return `arguments` as `options`
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="results"></div><br />
<div class="results"></div><br />
<div class="results"></div>

person guest271314    schedule 08.02.2015