Adding functions to jquery custom plugin

Question

I've a custom plugin in jQuery,

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

Now I want to add a function such that it can be called like this:-

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

I tried doing this:-

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

But I think here this is not the div, so $(this).show() is not working.

How can I achieve this? Are there any better ways of adding functions to jQuery plugins?

dialog function has to return an object representing your dialog(s) collection then, you could append any methods to this dialog object's prototype ... — Stphane
– Stphane, Commented Apr 9, 2014 at 12:13
a comment: "But I think here this is not the div, so $(this).show() is not working." is the result of the selector your using — JF it
– JF it, Commented Apr 9, 2014 at 12:32

Stphane · Accepted Answer · 2015-10-26 14:38:10Z

1

I coded a dialog factory base like what you are looking for ...

Feel free to ask if you have any question.

Test's fiddle 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);

edited Oct 26, 2015 at 14:38

answered Apr 9, 2014 at 15:00

Stphane

3,4765 gold badges36 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Kaushik Over a year ago

Another example stefangabos.ro/jquery/jquery-plugin-boilerplate-revisited

Stphane Over a year ago

Yep nevertheless it looks more like a generic template but seams to be a good summary of this

Mukesh · Accepted Answer · 2014-04-09 12:50:01Z

1

You should add new method inside dialog:

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

You can call this like:

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

Or you can extend the current dialog and add method and use in same way above.

answered Apr 9, 2014 at 12:50

Mukesh

8581 gold badge10 silver badges21 bronze badges

Comments

Rajaprabhu Aravindasamy · Accepted Answer · 2014-04-26 18:02:16Z

0

you missed the open and close the brace for the function . the function come like this $.fn.extend is Merge the contents of an object onto the jQuery prototype to provide new jQuery instance methods.

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

jquery

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

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

Fiddle

edited Apr 26, 2014 at 18:02

Rajaprabhu Aravindasamy

67.2k17 gold badges107 silver badges133 bronze badges

answered Apr 9, 2014 at 12:34

Sudharsan S

15.4k4 gold badges34 silver badges51 bronze badges

1 Comment

Kaushik Over a year ago

The brace is missing because, I want function to be executed on top of the plugin like $("#somediv").dialog.showMe();, here showMe() is custom function.

Collectives™ on Stack Overflow

Adding functions to jquery custom plugin

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related