The Boilerplate ?

The Boilerplate ?

starting with an empty boilerplate like this one above, I want to call this plugin on one specific div :
  1. <div id="BoilerplateEntryPoint">BoilerplateEntryPoint</div>
thus that is may code, first the text BoilerplateEntryPoint is set to pink color (OK), then I check that no data exist with "plugin_defaultPluginName" (OK -> alert box tells me "undefined"), then I call the plugin defaultPluginName on that specific div $('#BoilerplateEntryPoint'), and to check that the code is well execute, I start the plugin constructor with $('#BoilerplateEntryPoint').css("color", "red"); (BUT THE COLOR TEXT IS STILL PINK, NOT RED, as if the plugin constructor was not called).
  1. $('#BoilerplateEntryPoint').css("color", "pink");
  2. alert($.data(this, "plugin_defaultPluginName"));
  3. $('#BoilerplateEntryPoint').defaultPluginName({
  4.   propertyName: 'a custom value'
  5. });
  6. alert($.data(this, "plugin_defaultPluginName"));


  1. ;(function ($, window, document, undefined) {
  2.     var pluginName = "defaultPluginName";
  3.     var defaults = {
  4.         propertyName: "value"
  5.     };
  6.     function Plugin(element, options) {
  7.         this.element = element;
  8.         this.options = $.extend({}, defaults, options);
  9.         this._defaults = defaults;
  10.         this._name = pluginName;
  11.         this.init();
  12.     }
  13.     Plugin.prototype = {
  14.         init: function () {
  15.           $(this).css("color", "red");
  16.             // code goes here
  17.         },
  18.         yourOtherFunction: function () {
  19.             // some logic
  20.         }
  21.     };
  22.     $.fn[pluginName] = function (options) {
  23.   $('#BoilerplateEntryPoint').css("color", "red");
  24.             return this.each(function () {
  25.                 if (!$.data(this, "plugin_" + pluginName)) {
  26.                 $.data(this, "plugin_" + pluginName, new Plugin(this, options));
  27.             }
  28.         });
  29.     };
  30. })(jQuery, window, document);