Экземпляр плагина доступа с использованием идентификатора элемента DOM

76
10

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

$.fn.PluginForm = function (Options) {
var o = jQuery.extend({
SomeOption: 1
}, Options);

var Validate = function(){
if(o.SomeOption == 1) return true;
else return false;
};

$(this).on('submit', function(e) {
e.preventDefault();
//some code here
});
};

Форма на самом деле не имеет кнопки в моем случае сообщение запускается из другого элемента управления. Это из-за структуры приложения, которое я хочу построить. Плагин кнопки:

$.fn.PluginButton = function (Options) {
var o = jQuery.extend({
Actions: [],
FormID: ''
}, Options);

$(this).click(function(){
var Form = $('#' + o.FormID);
if(Form.length > 0 && Form.PluginForm.Validate()) {
Form.submit();
//do something
}
else{
//do something else
}
});
};

Я хочу преуспеть в том, чтобы вызвать функцию проверки в элементе Form, но я не хочу вызывать другой экземпляр PluginForm. Что-то вроде $('#' + o.FormID).PluginForm.Validate()

Все это должно быть как плагин, потому что на одной странице и множестве кнопок будет много форм. Также будет много кнопок, которые могут вызывать отправку в той же форме, но с различными параметрами. То почему я хочу вызвать экземпляр формы один раз. Также элементы управления, которые будут проверяться, будут переданы в качестве параметра в параметрах PluginForm. Что-то вроде этого $('#' + o.FormID).PluginForm({ Action: 'Validate })) не является опцией, потому что потеряет исходные параметры PluginForm.

спросил(а) 2021-01-28T00:50:57+03:00 3 месяца, 1 неделя назад
1
Решение
77

Вы можете сохранить экземпляр плагина в структуре.data() элемента, а затем вызвать его обратно. Большинство плагинов используют его таким образом.

/*!
* jQuery lightweight plugin boilerplate
* Original author: @ajpiano
* Further changes, comments: @addyosmani
* Licensed under the MIT license
*/

// the semi-colon before the function invocation is a safety
// net against concatenated scripts and/or other plugins
// that are not closed properly.
;(function ( $, window, document, undefined ) {

// undefined is used here as the undefined global
// variable in ECMAScript 3 and is mutable (i.e. it can
// be changed by someone else). undefined isn't really
// being passed in so we can ensure that its value is
// truly undefined. In ES5, undefined can no longer be
// modified.

// window and document are passed through as local
// variables rather than as globals, because this (slightly)
// quickens the resolution process and can be more
// efficiently minified (especially when both are
// regularly referenced in your plugin).

// Create the defaults once
var pluginName = "defaultPluginName",
defaults = {
propertyName: "value"
};

// The actual plugin constructor
function Plugin( element, options ) {
this.element = element;

// jQuery has an extend method that merges the
// contents of two or more objects, storing the
// result in the first object. The first object
// is generally empty because we don't want to alter
// the default options for future instances of the plugin
this.options = $.extend( {}, defaults, options) ;

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

this.init();
}

Plugin.prototype = {

init: function() {
// Place initialization logic here
// You already have access to the DOM element and
// the options via the instance, e.g. this.element
// and this.options
// you can add more functions like the one below and
// call them like so: this.yourOtherFunction(this.element, this.options).
},

yourOtherFunction: function(el, options) {
// some logic
}
};

// A really lightweight plugin wrapper around the constructor,
// preventing against multiple instantiations
$.fn[pluginName] = function ( options ) {
return this.each(function () {
if (!$.data(this, "plugin_" + pluginName)) {
$.data(this, "plugin_" + pluginName,
new Plugin( this, options ));
}
});
};

})( jQuery, window, document );

взято из: https://github.com/jquery-boilerplate/jquery-patterns/blob/master/patterns/jquery.basic.plugin-boilerplate.js

также есть больше шаблонов дизайна плагина jquery, которые могут поместиться больше для вашего плагина на http://jqueryboilerplate.com/.

ответил(а) 2021-01-28T00:50:57+03:00 3 месяца, 1 неделя назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема