Question

I am learning JQuery. I have a need to create a custom control. This control is going to basically render some HTML. Sometimes, I want to just get the HTML. My hope is to use the following syntax:

// Put generated html inside of "myElement". "myElement" is a div element.
$("#myElement").myPlugin({ value: 10 });

// Retrieve the html that myPlugin would place of a div element.
// Basically, I want the javascript equivalent of a C# static function here.
// But I think the following approach is wrong:
var html = myPlugin().getHtml(10); 
alert(html); 

In an attempt to accomplish this, I’m using the following:

(function ($) {
  $.fn.myPlugin = function (element, options) {
    var defaults = { theValue: 0 }

    var plugin = this;
    plugin.settings = {};

    var $element = $(element),
    element = element;

    plugin.init = function () {
      plugin.settings = $.extend({}, defaults, options);
      var html = createHtml(defaults.theValue);
      $(element).html(html);      
    }

    plugin.getHtml = function (v) {
      return createHtml(v);
    }

    var createHtml(v) {
      return "<span>" + v + "</span>";
    }
})(jQuery);

I have two problems: 1) I can see that the HTML is being generated, but it does not appear to be added to the DOM. 2) I can’t statically call the function. How can I make my function statically visible?

Thank you!

Answer 1

There are a few tweaks you need to make:

(function($) {
    $.fn.myPlugin = function(options) {
        var defaults = {
            theValue: 0
        },
            settings = $.extend({}, defaults, options);

        this.html($.myPlugin.getHtml(settings.theValue));
    };

    $.myPlugin = {
        getHtml: function(value) {
            return "<span>" + value + "</span>";
        }
    };

})(jQuery);

Usage:

$("#foo").myPlugin({ theValue: 10 });
var html = $.myPlugin.getHtml(10);

• First off, you were never calling the init method, so nothing was going to work. It isn’t going to be called automatically. Perhaps you were thinking of the jQueryUI widget factory?
• Additionally, element doesn’t get passed to the plugin, this refers the the element the plugin was called on. You only get passed options.
• Finally, to create a static jQuery method, just attach it right to $.

Example: http://jsfiddle.net/xF2S6/