Comment créer un plugin jQuery avec des méthodes?
J'essaie d'écrire un plugin jQuery qui fournira des fonctions/méthodes supplémentaires à l'objet qui l'appelle. Tous les tutoriels que j'ai lus en ligne (parcourant les 2 dernières heures) incluent, tout au plus, comment ajouter des options, mais pas des fonctions supplémentaires.
Voici ce que je cherche à faire:
// format div est un conteneur de message en appelant le plugin pour cette div
$("#mydiv").messagePlugin();
$("#mydiv").messagePlugin().saySomething("hello");
ou quelque chose du genre ... Voici ce que cela revient à: j'appelle le plugin, puis j'appelle une fonction associée à ce plugin. Je n'arrive pas à trouver un moyen de faire cela, et j'ai déjà vu de nombreux plugins le faire auparavant.
Voici ce que j'ai jusqu'à présent pour le plugin:
jQuery.fn.messagePlugin = function() {
return this.each(function(){
alert(this);
});
//i tried to do this, but it does not seem to work
jQuery.fn.messagePlugin.saySomething = function(message){
$(this).html(message);
}
};
Comment puis-je réaliser quelque chose comme ça?
Je vous remercie!
Mise à jour du 18 novembre 2013: j'ai changé la réponse correcte à celle des commentaires et des votes suivants de Hari.
Selon la page Création de plug-ins jQuery ( http://docs.jquery.com/Plugins/Authoring ), il est préférable de ne pas brouiller les espaces de noms jQuery et jQuery.fn. Ils suggèrent cette méthode:
(function( $ ){
var methods = {
init : function(options) {
},
show : function( ) { },// IS
hide : function( ) { },// GOOD
update : function( content ) { }// !!!
};
$.fn.tooltip = function(methodOrOptions) {
if ( methods[methodOrOptions] ) {
return methods[ methodOrOptions ].apply( this, Array.prototype.slice.call( arguments, 1 ));
} else if ( typeof methodOrOptions === 'object' || ! methodOrOptions ) {
// Default to "init"
return methods.init.apply( this, arguments );
} else {
$.error( 'Method ' + methodOrOptions + ' does not exist on jQuery.tooltip' );
}
};
})( jQuery );
En gros, vous stockez vos fonctions dans un tableau (lié à la fonction d'habillage) et recherchez une entrée si le paramètre transmis est une chaîne, en revenant à une méthode par défaut ("init" ici) si le paramètre est un objet (ou null).
Ensuite, vous pouvez appeler les méthodes comme suit ...
$('div').tooltip(); // calls the init method
$('div').tooltip({ // calls the init method
foo : 'bar'
});
$('div').tooltip('hide'); // calls the hide method
$('div').tooltip('update', 'This is the new tooltip content!'); // calls the update method
La variable "arguments" de Javascripts est un tableau de tous les arguments passés. Elle fonctionne donc avec des longueurs arbitraires de paramètres de fonction.
Voici le modèle que j'ai utilisé pour créer des plugins avec des méthodes supplémentaires. Vous l'utiliseriez comme:
$('selector').myplugin( { key: 'value' } );
ou, pour invoquer directement une méthode,
$('selector').myplugin( 'mymethod1', 'argument' );
Exemple:
;(function($) {
$.fn.extend({
myplugin: function(options,arg) {
if (options && typeof(options) == 'object') {
options = $.extend( {}, $.myplugin.defaults, options );
}
// this creates a plugin for each element in
// the selector or runs the function once per
// selector. To have it do so for just the
// first element (once), return false after
// creating the plugin to stop the each iteration
this.each(function() {
new $.myplugin(this, options, arg );
});
return;
}
});
$.myplugin = function( elem, options, arg ) {
if (options && typeof(options) == 'string') {
if (options == 'mymethod1') {
myplugin_method1( arg );
}
else if (options == 'mymethod2') {
myplugin_method2( arg );
}
return;
}
...normal plugin actions...
function myplugin_method1(arg)
{
...do method1 with this and arg
}
function myplugin_method2(arg)
{
...do method2 with this and arg
}
};
$.myplugin.defaults = {
...
};
})(jQuery);
Qu'en est-il de cette approche:
jQuery.fn.messagePlugin = function(){
var selectedObjects = this;
return {
saySomething : function(message){
$(selectedObjects).each(function(){
$(this).html(message);
});
return selectedObjects; // Preserve the jQuery chainability
},
anotherAction : function(){
//...
return selectedObjects;
}
};
}
// Usage:
$('p').messagePlugin().saySomething('I am a Paragraph').css('color', 'red');
Les objets sélectionnés sont stockés dans la fermeture de messagePlugin. Cette fonction renvoie un objet contenant les fonctions associées au plug-in. Vous pouvez ainsi exécuter les actions souhaitées sur chaque objet.
Vous pouvez tester et jouer avec le code ici .
Edit: Code mis à jour pour préserver la puissance de l'enchaînement de jQuery.
Le problème avec la réponse actuellement sélectionnée est que vous ne créez pas réellement une nouvelle instance du plug-in personnalisé pour chaque élément du sélecteur, comme vous le pensez, vous ne créez en réalité qu'une seule instance et que vous ne le transmettez. le sélecteur lui-même comme la portée.
Voir ce violon pour une explication plus profonde.
Au lieu de cela, vous devrez parcourir le sélecteur en utilisant jQuery.each et instancier une nouvelle instance du plugin personnalisé pour chaque élément du sélecteur.
Voici comment:
(function($) {
var CustomPlugin = function($el, options) {
this._defaults = {
randomizer: Math.random()
};
this._options = $.extend(true, {}, this._defaults, options);
this.options = function(options) {
return (options) ?
$.extend(true, this._options, options) :
this._options;
};
this.move = function() {
$el.css('margin-left', this._options.randomizer * 100);
};
};
$.fn.customPlugin = function(methodOrOptions) {
var method = (typeof methodOrOptions === 'string') ? methodOrOptions : undefined;
if (method) {
var customPlugins = [];
function getCustomPlugin() {
var $el = $(this);
var customPlugin = $el.data('customPlugin');
customPlugins.Push(customPlugin);
}
this.each(getCustomPlugin);
var args = (arguments.length > 1) ? Array.prototype.slice.call(arguments, 1) : undefined;
var results = [];
function applyMethod(index) {
var customPlugin = customPlugins[index];
if (!customPlugin) {
console.warn('$.customPlugin not instantiated yet');
console.info(this);
results.Push(undefined);
return;
}
if (typeof customPlugin[method] === 'function') {
var result = customPlugin[method].apply(customPlugin, args);
results.Push(result);
} else {
console.warn('Method \'' + method + '\' not defined in $.customPlugin');
}
}
this.each(applyMethod);
return (results.length > 1) ? results : results[0];
} else {
var options = (typeof methodOrOptions === 'object') ? methodOrOptions : undefined;
function init() {
var $el = $(this);
var customPlugin = new CustomPlugin($el, options);
$el.data('customPlugin', customPlugin);
}
return this.each(init);
}
};
})(jQuery);
Et un violon de travail .
Vous remarquerez que dans le premier violon, tous les divs sont toujours déplacés vers la droite du même nombre de pixels. En effet, seul l'objet one d'options existe pour tous les éléments du sélecteur.
En utilisant la technique décrite ci-dessus, vous remarquerez que, dans le deuxième violon, chaque div n'est pas alignée et est déplacée de manière aléatoire (à l'exception de la première div, son randomiseur étant toujours défini sur 1 à la ligne 89). En effet, nous instancions correctement une nouvelle instance de plug-in personnalisée pour chaque élément du sélecteur. Chaque élément a son propre objet options et n'est pas enregistré dans le sélecteur, mais dans l'instance du plugin personnalisé lui-même.
Cela signifie que vous pourrez accéder aux méthodes du plug-in personnalisé instancié sur un élément spécifique du DOM à partir de nouveaux sélecteurs jQuery sans être obligé de les mettre en cache, comme vous le feriez dans le premier violon.
Par exemple, ceci renverrait un tableau de tous les objets options en utilisant la technique du deuxième violon. Il reviendrait indéfini dans le premier.
$('div').customPlugin();
$('div').customPlugin('options'); // would return an array of all options objects
Voici comment accéder à l’objet options du premier violon et ne renvoyer qu’un seul objet, et non un tableau:
var divs = $('div').customPlugin();
divs.customPlugin('options'); // would return a single options object
$('div').customPlugin('options');
// would return undefined, since it's not a cached selector
Je suggérerais d'utiliser la technique ci-dessus, pas celle de la réponse actuellement sélectionnée.
jQuery a beaucoup facilité la tâche avec l’introduction du Widget Factory .
Exemple:
$.widget( "myNamespace.myPlugin", {
options: {
// Default options
},
_create: function() {
// Initialization logic here
},
// Create a public method.
myPublicMethod: function( argument ) {
// ...
},
// Create a private method.
_myPrivateMethod: function( argument ) {
// ...
}
});
Initialisation:
$('#my-element').myPlugin();
$('#my-element').myPlugin( {defaultValue:10} );
Méthode d'appel:
$('#my-element').myPlugin('myPublicMethod', 20);
(C’est ainsi que la bibliothèque jQuery UI est construite.)
Une approche plus simple consiste à utiliser des fonctions imbriquées. Ensuite, vous pouvez les chaîner de manière orientée objet. Exemple:
jQuery.fn.MyPlugin = function()
{
var _this = this;
var a = 1;
jQuery.fn.MyPlugin.DoSomething = function()
{
var b = a;
var c = 2;
jQuery.fn.MyPlugin.DoSomething.DoEvenMore = function()
{
var d = a;
var e = c;
var f = 3;
return _this;
};
return _this;
};
return this;
};
Et voici comment l'appeler:
var pluginContainer = $("#divSomeContainer");
pluginContainer.MyPlugin();
pluginContainer.MyPlugin.DoSomething();
pluginContainer.MyPlugin.DoSomething.DoEvenMore();
Attention cependant. Vous ne pouvez pas appeler une fonction imbriquée tant qu'elle n'a pas été créée. Donc vous ne pouvez pas faire ceci:
var pluginContainer = $("#divSomeContainer");
pluginContainer.MyPlugin();
pluginContainer.MyPlugin.DoSomething.DoEvenMore();
pluginContainer.MyPlugin.DoSomething();
La fonction DoEvenMore n'existe même pas car la fonction DoSomething n'a pas encore été exécutée, ce qui est nécessaire pour créer la fonction DoEvenMore. Pour la plupart des plugins jQuery, vous n'allez vraiment avoir qu'un seul niveau de fonctions imbriquées et non deux comme je l'ai montré ici.
Assurez-vous simplement que lorsque vous créez des fonctions imbriquées, vous les définissez au début de leur fonction parent avant que tout autre code de la fonction parent soit exécuté.
Enfin, notez que le membre "this" est stocké dans une variable appelée "_this". Pour les fonctions imbriquées, vous devez renvoyer "_this" si vous avez besoin d'une référence à l'instance dans le client appelant. Vous ne pouvez pas simplement renvoyer "ceci" dans la fonction imbriquée car cela renverra une référence à la fonction et non à l'occurrence jQuery. Le renvoi d'une référence jQuery vous permet de chaîner des méthodes intrinsèques jQuery lors du retour.
Je l'ai eu de plugin jQuery Boilerplate
Également décrit dans jQuery Plugin Boilerplate, reprise
// jQuery Plugin Boilerplate
// A boilerplate for jumpstarting jQuery plugins development
// version 1.1, May 14th, 2011
// by Stefan Gabos
// remember to change every instance of "pluginName" to the name of your plugin!
(function($) {
// here we go!
$.pluginName = function(element, options) {
// plugin's default options
// this is private property and is accessible only from inside the plugin
var defaults = {
foo: 'bar',
// if your plugin is event-driven, you may provide callback capabilities
// for its events. execute these functions before or after events of your
// plugin, so that users may customize those particular events without
// changing the plugin's code
onFoo: function() {}
}
// to avoid confusions, use "plugin" to reference the
// current instance of the object
var plugin = this;
// this will hold the merged default, and user-provided options
// plugin's properties will be available through this object like:
// plugin.settings.propertyName from inside the plugin or
// element.data('pluginName').settings.propertyName from outside the plugin,
// where "element" is the element the plugin is attached to;
plugin.settings = {}
var $element = $(element), // reference to the jQuery version of DOM element
element = element; // reference to the actual DOM element
// the "constructor" method that gets called when the object is created
plugin.init = function() {
// the plugin's final properties are the merged default and
// user-provided options (if any)
plugin.settings = $.extend({}, defaults, options);
// code goes here
}
// public methods
// these methods can be called like:
// plugin.methodName(arg1, arg2, ... argn) from inside the plugin or
// element.data('pluginName').publicMethod(arg1, arg2, ... argn) from outside
// the plugin, where "element" is the element the plugin is attached to;
// a public method. for demonstration purposes only - remove it!
plugin.foo_public_method = function() {
// code goes here
}
// private methods
// these methods can be called only from inside the plugin like:
// methodName(arg1, arg2, ... argn)
// a private method. for demonstration purposes only - remove it!
var foo_private_method = function() {
// code goes here
}
// fire up the plugin!
// call the "constructor" method
plugin.init();
}
// add the plugin to the jQuery.fn object
$.fn.pluginName = function(options) {
// iterate through the DOM elements we are attaching the plugin to
return this.each(function() {
// if plugin has not already been attached to the element
if (undefined == $(this).data('pluginName')) {
// create a new instance of the plugin
// pass the DOM element and the user-provided options as arguments
var plugin = new $.pluginName(this, options);
// in the jQuery version of the element
// store a reference to the plugin object
// you can later access the plugin and its methods and properties like
// element.data('pluginName').publicMethod(arg1, arg2, ... argn) or
// element.data('pluginName').settings.propertyName
$(this).data('pluginName', plugin);
}
});
}
})(jQuery);
Trop tard, mais peut-être que cela peut aider quelqu'un un jour.
J'étais dans la même situation, comme créer un plugin jQuery avec certaines méthodes et après avoir lu des articles et des pneus, je crée un plugin jQuery ( https://github.com/acanimal/jQuery-Plugin-Boilerplate ).
De plus, je développe avec lui un plugin pour gérer les tags ( https://github.com/acanimal/tagger.js ) et ai écrit deux articles de blog expliquant pas à pas la création d’un plugin jQuery ( http://acuriousanimal.com/blog/2013/01/15/things-i-learned-creating-a-jjquery-plugin-part-i/ ).
Tu peux faire:
(function ($) {
var YourPlugin = function (element, option) {
var defaults = {
//default value
}
this.option = $.extend({}, defaults, option);
this.$element = $(element);
this.init();
}
YourPlugin.prototype = {
init: function () {
},
show: function() {
},
//another functions
}
$.fn.yourPlugin = function (option) {
var arg = arguments,
options = typeof option == 'object' && option;;
return this.each(function () {
var $this = $(this),
data = $this.data('yourPlugin');
if (!data) $this.data('yourPlugin', (data = new YourPlugin(this, options)));
if (typeof option === 'string') {
if (arg.length > 1) {
data[option].apply(data, Array.prototype.slice.call(arg, 1));
} else {
data[option]();
}
}
});
};
});
De cette manière, votre objet plugins est stocké en tant que valeur de données dans votre élément.
//Initialization without option
$('#myId').yourPlugin();
//Initialization with option
$('#myId').yourPlugin({
//your option
});
//call show method
$('#myId').yourPlugin('show');
Qu'en est-il des déclencheurs? Est-ce que quelqu'un connaît des inconvénients à les utiliser? L'avantage est que toutes les variables internes sont accessibles via les déclencheurs et que le code est très simple.
Voir sur jsfiddle .
Exemple d'utilisation
<div id="mydiv">This is the message container...</div>
<script>
var mp = $("#mydiv").messagePlugin();
// the plugin returns the element it is called on
mp.trigger("messagePlugin.saySomething", "hello");
// so defining the mp variable is not needed...
$("#mydiv").trigger("messagePlugin.repeatLastMessage");
</script>
Brancher
jQuery.fn.messagePlugin = function() {
return this.each(function() {
var lastmessage,
$this = $(this);
$this.on('messagePlugin.saySomething', function(e, message) {
lastmessage = message;
saySomething(message);
});
$this.on('messagePlugin.repeatLastMessage', function(e) {
repeatLastMessage();
});
function saySomething(message) {
$this.html("<p>" + message + "</p>");
}
function repeatLastMessage() {
$this.append('<p>Last message was: ' + lastmessage + '</p>');
}
});
}
Ici, je veux suggérer des étapes pour créer un plugin simple avec des arguments.
JS
(function($) {
$.fn.myFirstPlugin = function( options ) {
// Default params
var params = $.extend({
text : 'Default Title',
fontsize : 10,
}, options);
return $(this).text(params.text);
}
}(jQuery));
Ici, nous avons ajouté un objet par défaut appelé params et défini les valeurs par défaut des options à l'aide de la fonction extend. Par conséquent, si nous passons un argument vide, les valeurs par défaut seront définies. Sinon, elles seront définies.
HTML
$('.cls-title').myFirstPlugin({ text : 'Argument Title' });
En savoir plus:Comment créer un plugin JQuery
Voici ma version épurée de ceci. Semblable à ceux affichés avant, vous appelleriez comme:
$('#myDiv').MessagePlugin({ yourSettings: 'here' })
.MessagePlugin('saySomething','Hello World!');
-ou accéder directement à l'instance @ plugin_MessagePlugin
$elem = $('#myDiv').MessagePlugin();
var instance = $elem.data('plugin_MessagePlugin');
instance.saySomething('Hello World!');
MessagePlugin.js
;(function($){
function MessagePlugin(element,settings){ // The Plugin
this.$elem = element;
this._settings = settings;
this.settings = $.extend(this._default,settings);
}
MessagePlugin.prototype = { // The Plugin prototype
_default: {
message: 'Generic message'
},
initialize: function(){},
saySomething: function(message){
message = message || this._default.message;
return this.$elem.html(message);
}
};
$.fn.MessagePlugin = function(settings){ // The Plugin call
var instance = this.data('plugin_MessagePlugin'); // Get instance
if(instance===undefined){ // Do instantiate if undefined
settings = settings || {};
this.data('plugin_MessagePlugin',new MessagePlugin(this,settings));
return this;
}
if($.isFunction(MessagePlugin.prototype[settings])){ // Call method if argument is name of method
var args = Array.prototype.slice.call(arguments); // Get the arguments as Array
args.shift(); // Remove first argument (name of method)
return MessagePlugin.prototype[settings].apply(instance, args); // Call the method
}
// Do error handling
return this;
}
})(jQuery);
Essaye celui-là:
$.fn.extend({
"calendar":function(){
console.log(this);
var methods = {
"add":function(){console.log("add"); return this;},
"init":function(){console.log("init"); return this;},
"sample":function(){console.log("sample"); return this;}
};
methods.init(); // you can call any method inside
return methods;
}});
$.fn.calendar() // caller or
$.fn.calendar().sample().add().sample() ......; // call methods
Voici un petit plug-in pour avoir une méthode d'avertissement à des fins de débogage. Conservez ce code dans le fichier jquery.debug.js: JS:
jQuery.fn.warning = function() {
return this.each(function() {
alert('Tag Name:"' + $(this).prop("tagName") + '".');
});
};
HTML:
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src = "jquery.debug.js" type = "text/javascript"></script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$("div").warning();
$("p").warning();
});
</script>
</head>
<body>
<p>This is paragraph</p>
<div>This is division</div>
</body>
</html>
Cela peut réellement être fait pour fonctionner de manière "agréable" en utilisant defineProperty. Où "Nice" signifie sans avoir à utiliser () pour obtenir un espace de noms de plugin, ni à passer le nom de la fonction par chaîne.
Compatibilité nit:defineProperty ne fonctionne pas dans les anciens navigateurs tels que IE8 et les versions antérieures .Avertissement:$.fn.color.blue.apply(foo, args) ne fonctionnera pas, vous devez utiliser foo.color.blue.apply(foo, args).
function $_color(color)
{
return this.css('color', color);
}
function $_color_blue()
{
return this.css('color', 'blue');
}
Object.defineProperty($.fn, 'color',
{
enumerable: true,
get: function()
{
var self = this;
var ret = function() { return $_color.apply(self, arguments); }
ret.blue = function() { return $_color_blue.apply(self, arguments); }
return ret;
}
});
$('#foo').color('#f00');
$('#bar').color.blue();
La structure de plug-in suivante utilise la méthode jQuery -data()- pour fournir une interface publique aux méthodes/paramètres de plugin internes (tout en préservant la chaîne-chaîne jQuery):
(function($, window, undefined) {
$.fn.myPlugin = function(options) {
// settings, e.g.:
var settings = $.extend({
elementId: null,
shape: "square",
color: "aqua",
borderWidth: "10px",
borderColor: "DarkGray"
}, options);
// private methods, e.g.:
var setBorder = function(color, width) {
settings.borderColor = color;
settings.borderWidth = width;
drawShape();
};
var drawShape = function() {
$('#' + settings.elementId).attr('class', settings.shape + " " + "center");
$('#' + settings.elementId).css({
'background-color': settings.color,
'border': settings.borderWidth + ' solid ' + settings.borderColor
});
$('#' + settings.elementId).html(settings.color + " " + settings.shape);
};
return this.each(function() { // jQuery chainability
// set stuff on ini, e.g.:
settings.elementId = $(this).attr('id');
drawShape();
// PUBLIC INTERFACE
// gives us stuff like:
//
// $("#...").data('myPlugin').myPublicPluginMethod();
//
var myPlugin = {
element: $(this),
// access private plugin methods, e.g.:
setBorder: function(color, width) {
setBorder(color, width);
return this.element; // To ensure jQuery chainability
},
// access plugin settings, e.g.:
color: function() {
return settings.color;
},
// access setting "shape"
shape: function() {
return settings.shape;
},
// inspect settings
inspectSettings: function() {
msg = "inspecting settings for element '" + settings.elementId + "':";
msg += "\n--- shape: '" + settings.shape + "'";
msg += "\n--- color: '" + settings.color + "'";
msg += "\n--- border: '" + settings.borderWidth + ' solid ' + settings.borderColor + "'";
return msg;
},
// do stuff on element, e.g.:
change: function(shape, color) {
settings.shape = shape;
settings.color = color;
drawShape();
return this.element; // To ensure jQuery chainability
}
};
$(this).data("myPlugin", myPlugin);
}); // return this.each
}; // myPlugin
}(jQuery));
Maintenant, vous pouvez appeler des méthodes internes de plug-in pour accéder à ou modifier les données de plug-in ou l'élément correspondant en utilisant cette syntaxe:
$("#...").data('myPlugin').myPublicPluginMethod();
Tant que vous renvoyez l'élément actuel (this) depuis votre implémentation de myPublicPluginMethod() jQuery-chainability Sera préservé - les travaux suivants sont donc conservés:
$("#...").data('myPlugin').myPublicPluginMethod().css("color", "red").html("....");
Voici quelques exemples (pour les détails, consultez ceci VIOLON):
// initialize plugin on elements, e.g.:
$("#shape1").myPlugin({shape: 'square', color: 'blue', borderColor: 'SteelBlue'});
$("#shape2").myPlugin({shape: 'rectangle', color: 'red', borderColor: '#ff4d4d'});
$("#shape3").myPlugin({shape: 'circle', color: 'green', borderColor: 'LimeGreen'});
// calling plugin methods to read element specific plugin settings:
console.log($("#shape1").data('myPlugin').inspectSettings());
console.log($("#shape2").data('myPlugin').inspectSettings());
console.log($("#shape3").data('myPlugin').inspectSettings());
// calling plugin methods to modify elements, e.g.:
// (OMG! And they are chainable too!)
$("#shape1").data('myPlugin').change("circle", "green").fadeOut(2000).fadeIn(2000);
$("#shape1").data('myPlugin').setBorder('LimeGreen', '30px');
$("#shape2").data('myPlugin').change("rectangle", "red");
$("#shape2").data('myPlugin').setBorder('#ff4d4d', '40px').css({
'width': '350px',
'font-size': '2em'
}).slideUp(2000).slideDown(2000);
$("#shape3").data('myPlugin').change("square", "blue").fadeOut(2000).fadeIn(2000);
$("#shape3").data('myPlugin').setBorder('SteelBlue', '30px');
// etc. ...
Selon le standard jQuery, vous pouvez créer un plugin comme suit:
(function($) {
//methods starts here....
var methods = {
init : function(method,options) {
this.loadKeywords.settings = $.extend({}, this.loadKeywords.defaults, options);
methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
$loadkeywordbase=$(this);
},
show : function() {
//your code here.................
},
getData : function() {
//your code here.................
}
} // do not put semi colon here otherwise it will not work in ie7
//end of methods
//main plugin function starts here...
$.fn.loadKeywords = function(options,method) {
if (methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(
arguments, 1));
} else if (typeof method === 'object' || !method) {
return methods.init.apply(this, arguments);
} else {
$.error('Method ' + method + ' does not ecw-Keywords');
}
};
$.fn.loadKeywords.defaults = {
keyName: 'Messages',
Options: '1',
callback: '',
};
$.fn.loadKeywords.settings = {};
//end of plugin keyword function.
})(jQuery);
Comment appeler ce plugin?
1.$('your element').loadKeywords('show',{'callback':callbackdata,'keyName':'myKey'}); // show() will be called
Référence: link
Je pense que cela pourrait vous aider ...
(function ( $ ) {
$.fn.highlight = function( options ) {
// This is the easiest way to have default options.
var settings = $.extend({
// These are the defaults.
color: "#000",
backgroundColor: "yellow"
}, options );
// Highlight the collection based on the settings variable.
return this.css({
color: settings.color,
backgroundColor: settings.backgroundColor
});
};
}( jQuery ));Dans l'exemple ci-dessus, j'avais créé un simple jquery surbrillance plugin.J'ai partagé un article dans lequel j'avais discuté de Comment créer votre propre plugin jQuery de Basic à Advance .Je pense que vous devriez y jeter un coup d'œil ... http://mycodingtricks.com/jquery/how-to-create-your-own-jquery-plugin/
Voici comment je le fais:
(function ( $ ) {
$.fn.gridview = function( options ) {
..........
..........
var factory = new htmlFactory();
factory.header(...);
........
};
}( jQuery ));
var htmlFactory = function(){
//header
this.header = function(object){
console.log(object);
}
}