给jquery自定义插件添加功能

Question

I've a custom plugin in 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插件中？

- Kaushik

---

对话框函数必须返回一个代表对话框集合的对象，然后您可以将任何方法附加到该对话框对象的原型上... - Stphane

我该如何在this.each中实现这个？ - Kaushik

dialog.show(); 不起作用。 - Kaushik

一条注释：“但我认为这里不是div，所以$(this).show()无法工作。”是由您使用的选择器导致的结果。 - JF it

Answer 1

我编写了一个对话框工厂的基础，就像你所寻找的那样...

如果您有任何问题，请随时提问。

测试的演示 在这里

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

- Stphane

---

另一个例子：http://stefangabos.ro/jquery/jquery-plugin-boilerplate-revisited/ - Kaushik

是的，尽管它看起来更像一个通用模板，但似乎是这个的一个很好的总结。 - Stphane

Answer 2

你应该在对话框内添加新的方法：

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

您可以这样调用：

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

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

- Mukesh

Answer 3

你忘记了函数的开头和结尾括号。函数应该像这样：$.fn.extend是将对象的内容合并到jQuery原型上，以提供新的jQuery实例方法。

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

jQuery

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

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

Fiddle

（注：此为程序相关内容）

- Sudharsan S

---

大括号丢失是因为我想让函数在插件顶部执行，就像$("#somediv").dialog.showMe();一样，这里的showMe()是自定义函数。 - Kaushik