wake-up-neo.com

Wie erstelle ich ein jQuery-Plugin mit Methoden?

Ich versuche, ein jQuery-Plugin zu schreiben, das dem Objekt, das es aufruft, zusätzliche Funktionen/Methoden zur Verfügung stellt. Alle Tutorials, die ich online gelesen habe (die letzten 2 Stunden durchsucht wurden), enthalten höchstens das Hinzufügen von Optionen, jedoch keine zusätzlichen Funktionen.

Hier ist was ich suche:

// formatiere div als Nachrichtencontainer, indem das Plugin für das div aufgerufen wird

$("#mydiv").messagePlugin();
$("#mydiv").messagePlugin().saySomething("hello");

oder etwas in dieser Richtung ..__ Hier kommt es darauf an: Ich rufe das Plugin auf, dann rufe ich eine mit diesem Plugin verknüpfte Funktion auf. Ich kann scheinbar keinen Weg finden, dies zu tun, und ich habe schon viele Plugins gesehen, die dies bereits tun.

Folgendes habe ich bisher für das 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);
  }
};

Wie kann ich so etwas erreichen?

Vielen Dank!


Update 18. November 2013: Ich habe die richtige Antwort auf die folgenden Kommentare und Upgrades von Hari geändert.

182
Yuval Karmi

Laut der jQuery-Plugin-Authoring-Seite ( http://docs.jquery.com/Plugins/Authoring ) ist es am besten, die Namespaces jQuery und jQuery.fn nicht zu betrügen. Sie schlagen diese Methode vor:

(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 );

Grundsätzlich speichern Sie Ihre Funktionen in einem Array (im Bereich der Wrapping-Funktion) und suchen nach einem Eintrag, wenn der übergebene Parameter eine Zeichenfolge ist, und kehren Sie zu einer Standardmethode (hier "init") zurück, wenn der Parameter ein Objekt (oder Null) ist.

Dann kannst du die Methoden gerne so aufrufen ...

$('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

Die "Argumente" -Variable von Javascripts ist ein Array aller übergebenen Argumente, sodass sie mit beliebigen Längen von Funktionsparametern funktioniert.

301

Hier ist das Muster, mit dem ich Plugins mit zusätzlichen Methoden erstellt habe. Sie würden es gerne verwenden:

$('selector').myplugin( { key: 'value' } );

oder, um eine Methode direkt aufzurufen,

$('selector').myplugin( 'mymethod1', 'argument' );

Beispiel:

;(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);
53
tvanfosson

Was ist mit diesem Ansatz:

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');

Die ausgewählten Objekte werden im messagePlugin-Abschluss gespeichert. Diese Funktion gibt ein Objekt zurück, das die mit dem Plugin verknüpften Funktionen enthält. In jeder Funktion können Sie die gewünschten Aktionen für die aktuell ausgewählten Objekte ausführen.

Sie können den Code hier testen und damit spielen.

Edit: Aktualisierter Code, um die Leistungsfähigkeit der jQuery-Kettenfähigkeit zu erhalten.

35
CMS

Das Problem mit der aktuell ausgewählten Antwort ist, dass Sie nicht wirklich eine neue Instanz des benutzerdefinierten Plugins für jedes Element in der Auswahl erstellen, wie Sie denken, dass Sie dies tun ... Sie erstellen tatsächlich nur eine einzelne Instanz und übergeben sie der Selektor selbst als Umfang.

Ansicht diese Geige für eine tiefere Erklärung.

Stattdessen müssen Sie den Selector mit jQuery.each durchlaufen und eine neue Instanz des benutzerdefinierten Plugins für jedes Element im Selector instanziieren.

Hier ist wie:

(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);

Und eine arbeitende Geige .

Sie werden feststellen, dass in der ersten Geige alle Divs immer um dieselbe Pixelanzahl nach rechts verschoben werden. Das liegt daran, dass nur das Optionsobjekt one für alle Elemente im Selektor vorhanden ist.

Bei Verwendung der oben beschriebenen Technik werden Sie feststellen, dass in der zweiten Geige jedes div nicht ausgerichtet und zufällig verschoben wird (mit Ausnahme des ersten div, da der Randomizer in Zeile 89 immer auf 1 gesetzt ist). Das liegt daran, dass wir jetzt für jedes Element im Selector eine neue Instanz eines benutzerdefinierten Plugins ordnungsgemäß instanziieren. Jedes Element hat ein eigenes Optionsobjekt und wird nicht im Selektor gespeichert, sondern in der Instanz des benutzerdefinierten Plugins.

Dies bedeutet, dass Sie auf die Methoden des benutzerdefinierten Plugins zugreifen können, das für ein bestimmtes Element im DOM von neuen jQuery-Selektoren instanziiert wurde, und nicht gezwungen sind, sie zwischenspeichern, wie Sie es von Anfang an tun würden.

Dies würde beispielsweise ein Array aller Optionsobjekte mit der Technik in der zweiten Geige zurückgeben. Es würde im ersten undefiniert zurückkehren.

$('div').customPlugin();
$('div').customPlugin('options'); // would return an array of all options objects

Auf diese Weise müssten Sie in der ersten Geige auf das Optionsobjekt zugreifen und würden nur ein einzelnes Objekt zurückgeben, kein Array davon:

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

Ich würde vorschlagen, die obige Technik zu verwenden, nicht die der aktuell ausgewählten Antwort.

16
Kevin Jurkowski

jQuery hat dies mit der Einführung der Widget Factory wesentlich vereinfacht.

Beispiel:

$.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 ) {
        // ...
    }

});

Initialisierung:

$('#my-element').myPlugin();
$('#my-element').myPlugin( {defaultValue:10} );

Methode aufrufen:

$('#my-element').myPlugin('myPublicMethod', 20);

(So ​​wird die jQuery UI library erstellt.)

15
Yarin

Ein einfacherer Ansatz ist die Verwendung geschachtelter Funktionen. Dann können Sie sie objektorientiert verketten. Beispiel:

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;
};

Und so nennt man es:

var pluginContainer = $("#divSomeContainer");
pluginContainer.MyPlugin();
pluginContainer.MyPlugin.DoSomething();
pluginContainer.MyPlugin.DoSomething.DoEvenMore();

Sei aber vorsichtig. Sie können eine verschachtelte Funktion erst aufrufen, wenn sie erstellt wurde. Also kannst du das nicht machen:

var pluginContainer = $("#divSomeContainer");
pluginContainer.MyPlugin();
pluginContainer.MyPlugin.DoSomething.DoEvenMore();
pluginContainer.MyPlugin.DoSomething();

Die DoEvenMore-Funktion existiert nicht einmal, da die DoSomething-Funktion noch nicht ausgeführt wurde. Dies ist zum Erstellen der DoEvenMore-Funktion erforderlich. Für die meisten jQuery-Plugins haben Sie wirklich nur eine Ebene geschachtelter Funktionen und nicht zwei, wie ich hier gezeigt habe.
Stellen Sie sicher, dass Sie beim Erstellen verschachtelter Funktionen diese Funktionen am Anfang ihrer übergeordneten Funktion definieren, bevor ein anderer Code in der übergeordneten Funktion ausgeführt wird.

Beachten Sie schließlich, dass der Member "this" in einer Variablen namens "_this" gespeichert wird. Für geschachtelte Funktionen sollten Sie "_this" zurückgeben, wenn Sie einen Verweis auf die Instanz im aufrufenden Client benötigen. Sie können "this" in der verschachtelten Funktion nicht einfach zurückgeben, da dies einen Verweis auf die Funktion und nicht auf die jQuery-Instanz zurückgibt. Durch die Rückgabe einer jQuery-Referenz können Sie bei Rückgabe intrinsische jQuery-Methoden verketten.

13
Polaris431

Ich habe es von jQuery Plugin Boilerplate

Auch beschrieben in 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);
8
Salim

Zu spät, aber vielleicht kann es eines Tages jemandem helfen.

Ich befand mich in der gleichen Situation wie beim Erstellen eines jQuery-Plugins mit einigen Methoden. Nachdem ich einige Artikel und Reifen gelesen hatte, erstelle ich eine jQuery-Plugin-Boilerplate ( https://github.com/acanimal/jQuery-Plugin-Boilerplate . ).

Außerdem entwickle ich damit ein Plugin zur Verwaltung von Tags ( https://github.com/acanimal/tagger.js ) und schrieb zwei Blogbeiträge, in denen die Erstellung eines jQuery-Plugins Schritt für Schritt erklärt wird ( http://acuriousanimal.com/blog/2013/01/15/things-i-learned-creating-a-jquery-plugin-part-i/ ).

5
EricSonaron

Du kannst tun:

(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]();
            }
        }
    });
}; 
  });

Auf diese Weise wird Ihr Plugins-Objekt als Datenwert in Ihrem Element gespeichert.

 //Initialization without option
 $('#myId').yourPlugin();

 //Initialization with option
 $('#myId').yourPlugin({
        //your option
 });

//call show method
$('#myId').yourPlugin('show');
4
Mazaher Bazari

Was ist mit Triggern? Kennt jemand einen Nachteil bei der Verwendung? Der Vorteil ist, dass alle internen Variablen über die Auslöser zugänglich sind und der Code sehr einfach ist.

Siehe unter jsfiddle .

Verwendungsbeispiel

<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>

Plugin

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>');
        }

    });

}

Hier möchte ich Schritte vorschlagen, um ein einfaches Plugin mit Argumenten zu erstellen.

JS

(function($) {
    $.fn.myFirstPlugin = function( options ) {

        // Default params
        var params = $.extend({
            text     : 'Default Title',
            fontsize : 10,
        }, options);
        return $(this).text(params.text);

    }
}(jQuery));

Hier haben wir das Standardobjekt params hinzugefügt und mit der Funktion extend Standardwerte für Optionen festgelegt. Wenn Sie also ein leeres Argument übergeben, werden stattdessen Standardwerte festgelegt. Andernfalls werden sie gesetzt.

HTML

$('.cls-title').myFirstPlugin({ text : 'Argument Title' });

Lesen Sie mehr:So erstellen Sie ein JQuery-Plugin

2
Gopal Joshi

Hier ist meine nackte Version davon. Ähnlich wie zuvor, würden Sie wie folgt anrufen:

$('#myDiv').MessagePlugin({ yourSettings: 'here' })
           .MessagePlugin('saySomething','Hello World!');

-oder direkt auf die Instanz zugreifen @ 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);
1
jtrumbull

Probier diese:

$.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
1
Serkan KONAKCI

Im Folgenden finden Sie ein kleines Plug-In, das eine Warnmethode für das Debuggen enthält. Behalten Sie diesen Code in der Datei 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>
0
jayaweb

Dies kann mit defineProperty tatsächlich "schön" funktionieren. Wobei "Nizza" bedeutet, ohne () verwenden zu müssen, um den Namespace des Plugins abzurufen oder den Funktionsnamen per String zu übergeben.

Kompatibilität nit:defineProperty funktioniert nicht in alten Browsern wie IE8 und darunter Caveat:$.fn.color.blue.apply(foo, args) funktioniert nicht, Sie müssen foo.color.blue.apply(foo, args) verwenden.

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();

JSFiddle-Link

0
kralyk

Die folgende Plugin-Struktur verwendet die jQuery -data()- Methode, um eine öffentliche Schnittstelle für interne Plugin-Methoden/-settings bereitzustellen (wobei die jQuery-Kettenfähigkeit beibehalten wird): 

(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));

Jetzt können Sie interne Plugin-Methoden aufrufen, um auf Plugin-Daten oder das entsprechende Element mit dieser Syntax zuzugreifen oder diese zu ändern:

$("#...").data('myPlugin').myPublicPluginMethod(); 

Solange Sie das aktuelle Element (this) aus Ihrer Implementierung von myPublicPluginMethod() jQuery-chainability Zurückgeben, wird es beibehalten - also funktioniert Folgendes: 

$("#...").data('myPlugin').myPublicPluginMethod().css("color", "red").html("...."); 

Hier sind einige Beispiele (für Details checkout GEIGE):

// 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. ...     
0
Mayinx

Je nach jquery-Standard können Sie das Plugin wie folgt erstellen:

(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);

Wie rufe ich dieses Plugin auf?

1.$('your element').loadKeywords('show',{'callback':callbackdata,'keyName':'myKey'}); // show() will be called

Referenz: link

0
Mahesh

Ich denke, das könnte dir helfen ...

(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 ));

Im obigen Beispiel hatte ich ein einfaches jquery highlight plugin erstellt. Ich hatte einen Artikel veröffentlicht, in dem ich über Wie man ein eigenes jQuery Plugin erstellt, von Basic bis Advance. Ich denke, Sie sollte es ausprobieren ... http://mycodingtricks.com/jquery/how-to-create-your-own-jquery-plugin/

0
Shubham Kumar

So mache ich es: 

(function ( $ ) {

$.fn.gridview = function( options ) {

    ..........
    ..........


    var factory = new htmlFactory();
    factory.header(...);

    ........

};

}( jQuery ));


var htmlFactory = function(){

    //header
     this.header = function(object){
       console.log(object);
  }
 }
0
Mina Gabriel