Question

我在jQuery中有一个自定义插件，

jQuery.fn.dialog = function() {
    return this.each(function() {
        // Create dialog
    });
};

现在我想添加一个函数，可以像这样调用它： -

$("#somediv").dialog.showMe();

我试过这样做： -

jQuery.fn.dialog.showMe = function() {
    $(this).show();
    // some code
};

但我认为此处this不是div，因此$(this).show()无效。

我怎样才能做到这一点？有没有更好的方法向jQuery插件添加函数？

Answer 1

您应该在对话框中添加新方法：

jQuery.fn.dialog = function() {
    this.showMe: function(){
        $(this).show();
    }
};

你可以这样称呼：

var myDiv = $('#myDiv').dialog();
myDiv.showMe();

或者您可以扩展当前对话框并添加方法并以相同的方式使用。

Answer 2

我编写了一个对话工厂库，就像你要找的那样......

如果您有任何疑问，请随时询问。

测试的小提琴here

// Dialog box factory base
(function ($) {

    // kind of private vars
    var dialog = function (opt, html) {
        this.domElt = $('<div />', {
            class: 'dialog-container'
        }).append(html);
        return this.init(opt);
    },dialogsStack = [];


    dialog.prototype = {
        init: function (options) {
            dialogsStack.push(this);
            this.params = $.extend(this.params, options, {
                dialogsIndex: (dialogsStack.length - 1)
            });
            console.log(this.params);
        },
        remove: function (all) {
            var dis = this;
            this.domElt.remove();
            if (dialogsStack.length)
                if (all) {
                    $.each(dialogsStack, function (i, el) {
                        el.domElt.remove();
                        // delete el;
                    });
                    dialogsStack = [];
                } else {
                    this.domElt.remove();
                    console.log('rm: ' + this.params.dialogsIndex);
                    dialogsStack.splice(this.params.dialogsIndex, 1);
                }
        },
        showMe: function () {
            this.domElt.appendTo('body');
        }
    };
    $.fn.dialog = function (options) {
        var t = this.eq(0);
        return new dialog(options, $('<div />').append(t).html());
    };
})(jQuery);

Answer 3

你错过了打开并关闭了该功能的支撑。函数就像$ .fn.extend将对象的内容合并到jQuery原型上以提供新的jQuery实例方法。

<div id="someDiv"></div>

jquery的

jQuery.fn.dialog = (function() {
    alert("a");
});

$("#someDiv").dialog();

Fiddle

将函数添加到jquery自定义插件

3 个答案: