CODEWITHSUNDEEP
jqueryjquery-uijquery-plugins
C.J.
C.J.

Reputation: 6869

Extending jQueryUI widgets without conflicts

I'm interested in extending the behavior of jqueryUI's dialog widget. In the past I've overridden functions like this:

//Custom dragging
$.ui.dialog.prototype._makeDraggable = function () {}

But I think I should change to using the widget factory to create a new widget instead that inherits from dialog.

I believe the code should look like this:

(function($, undefined) {
  $.widget('cs.dialog', $.ui.dialog, {
    // definition of the widget goes here
  });
}(jQuery));

My question is will this cause a conflict even though my dialog widget is in the cs namespace and jquery's is in the ui namespace? I believe jquery attaches the widget method to $.fn so I think it would.

If so, what's the purpose of the namespace if you still get conflicts? DO I need to name my widget "cs.csDialog" to keep it unique? I feel like there's something missing in my understanding of this.

Thanks for any help or clarification.

Upvotes: 2

Views: 1400

Answers (1)

Frédéric Hamidi
Frédéric Hamidi

Reputation: 262919

$.widget() calls $.widget.bridge() internally to add the widget method to the $ object:

$.widget.bridge(name, $[namespace][name]);

As you can see, it only passes the widget's name and the creation function. The namespace is only used to access the creation function and is not made part of the method's name.

So, in your case, calling your widget dialog will indeed replace $.dialog(). The original $.dialog() method will, however, remain available as $.ui.dialog() and, in the same way, yours will always be available as $.cs.dialog().

Upvotes: 2

Related Questions