I am trying to create a simple plugin , and I've faced with problem on how plugin's state should be managed.
(function ($) { // Static things for plugin goes here var uiHtml = "<div class='gaw-box'>" + "</div>"; var methods = { init: function (options) { return this.each(function () { // Create UI $(this).html(uiHtml); if (options) { var defaults = { name:"N/A" }; var opt = $.extend(defaults, options); $(this).find(".gaw-name").html(opt.name); } // Visual Events attach var uiobj = $(this).find(".gaw-box"); $(uiobj).mouseenter(function () { if (!this.isSelected) { $(this).css('border', '1px solid red'); } }); $(uiobj).mouseleave(function () { if (!this.isSelected) { $(this).css('border', '1px solid black'); } }); $(uiobj).click(function () { this.isSelected = !this.isSelected; if (this.isSelected) { $(this).css('border', '3px solid red'); } else { $(this).css('border', '1px solid black'); } }); }); }, getIsSelected: function (options) { return this.isSelected; // ALWAYS FALSE }, destroy: function () { } }; $.fn.gateaway = function (method) { var plugin = this; plugin.isSelected = false; if (methods[method]) { return methods[method].apply(plugin, Array.prototype.slice.call(arguments, 1)); } else if (typeof method === 'object' || !method) { return methods.init.apply(plugin, arguments); } else { $.error('Method ' + method + ' does not exist on jQuery.pluginName'); } }; })(jQuery); What I am trying to achieve is to save state of the plugin (object) , if it's selected for example or not. I am calling my plugin like
$("#gate").gateaway('getIsSelected') the result is always , false ... I know that the problem is with "this" scope , the problem that this is first time I am developing on client , and the second i need to finish it today :-) , so if it's possible to point me where or how can i organise the plugin to be able save state of each plugin it will save me :-)
