Я написал следующий плагин с использованием JQuery, но не могу запустить общедоступный метод. Вместо этого я получаю сообщение в консоли:
«TypeError: $(...).panIt.doSomething не является функцией».
Мой код плагина выглядит следующим образом:
;(function() {
// custom panel class
$.fn.panIt = function(options) {
var def = $.Deferred();
var pan;
var defaults = {
container: '<div class="panel_plugin"></div>',
url: '../../../js/plugins/myPanel/plugin.php',
padding: true,
header: {
isHeadline: false,
title: null,
subTitle: null,
minPanel: {
isAJAX: false,
content: ''
}
},
footer: false,
body: {
isAJAX: false,
content: ''
},
allowScrolling: true,
button: {
toggle: true,
remove: true
},
index: null,
panelSize: 'small',
parent: null,
domID: null,
buttons: {
close: true,
sizeUp: true
},
onLoaded: $.noop
};
var settings = $.extend(true, defaults, options); // extend (i.e. merge) defaults with options passed across when plugin is invoked
var deferredList = [];
this.doSomething= function() { alert("coey"); };
//Apply to each instance of the plugin
this.each(function() {
var innerDef = $.Deferred();
addContainer(this);
updateSettings(this);
pan = $(this).find("div.panel_plugin"); // reference for this plugin
$.when ( loadPluginContent() ).done(function(result) {
if(result === "success") {
applySettings();
setupPanEvents();
console.log("Plugin html successfully loaded for index " + settings.index); // get count of stats plugins loaded on the page
innerDef.resolve();
} else {
alert ("There was an error loading the plugin content for " + settings.index);
}
});
deferredList.push(innerDef.promise());
});
$.when.apply($, deferredList).done(function() {
def.resolve("All of my inner defs have been resolved");
});
return def.promise();
};
}) (jQuery);
И когда я вызываю свой плагин, я использую это:
$('#total_membership').panIt({
header: {
title: 'Total Membership',
minPanel: {
isAJAX: false,
content: '<div class="panel-subtitle"> 12800</p>'
}
},
body: {
isAJAX: true,
content: 'membership_total.php'
}
});
А затем, чуть позже, я использую этот код, чтобы попытаться вызвать общедоступный метод:
$('#total_membership').panIt.doSomething();
Плагин отлично работает, если я опускаю эту последнюю строку кода (но, очевидно, тогда я не могу использовать свой общедоступный метод).
Я новичок в плагинах JQuery, и я понимаю, что существует много разных шаблонов, но кто-нибудь может посоветовать мне, где я ошибаюсь? Многое оценил.
customStorage
должен выполнять любое хранилище объектов и проверять, был ли плагин инициализирован для данного элемента. Это может быть что угодно, любое значение (хранилище данных, класс) или что-то еще, что сообщит выполнению функции, что плагин был инициализирован для элемента. И нет, вы не сможете позвонитьplugin.method()
. Метод должен выполняться в области действия элемента, поэтому вам нужно указать плагину, для какого элемента вы хотите выполнить метод. Вот почему его нужно вызывать внутри элемента:$('myelement').plugin('method');
для примененияmethod
кmyelement
. 15.06.2018