6

我正在尝试创建一个简单的插件，并且遇到了如何管理插件状态的问题。

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

我想要实现的是保存插件（对象）的状态，如果它被选中的话。我正在调用我的插件

$("#gate").gateaway('getIsSelected')

结果总是错误的......我知道问题出在“这个”范围内，这是我第一次在客户端上开发的问题，第二次我今天需要完成它:-)，所以如果是可以指出我在哪里或如何组织插件以能够保存每个插件的状态，它将拯救我:-)

4

2 回答 2

4

官方的 jQuery 建议是使用jQuery UI Widget Factory，因为它为您提供了许多用于存储状态（以及其他东西）的好选择，但使用 data 函数在 jQuery 元素上存储状态并不难，如下所示：

$.fn.myplugin = function (options) {

    var create = function (el, options) {
        // Find existing state if we're running this again on same element
        var state = el.data("myplugin") || {};

        makeActualPlugin(el, state);

        state.something = "Store me for later";
        el.data("myplugin", state);
        return el;
    };

    this.each(function () {
        create($(this), options);
    });
};
于 2018-02-02T17:02:26.303 回答
-2

查看有关在插件中存储状态的官方 jQuery 文档：http: //docs.jquery.com/Plugins/Authoring#Data

于 2013-03-11T12:07:43.810 回答