Extending widgets in the Jquery user interface with overriding parent methods

I am trying to expand the user interface dialog according to the documentation (UI version 1.8.16):

(function($) { $.widget('ui.mydialog', $.extend(true, $.ui.dialog.prototype, { _create: function() { return $.Widget.prototype._create.apply(this, arguments); } })); })(jQuery); $(function() { $('div#dialog').mydialog(); }); 

Executing this code causes a JS error: "this.uiDialog - undefined".

And if you try to override the _init () method, there are no errors, but the call to the parent method is not affected.

I am embarrassed. Which method is finished for renewal, for example. put some custom initialization code?

+2
source share
3 answers

I think this post will solve your question: Inherit from the jQuery user interface dialog box and override the invocation method .

In short, if you want to build a widget that inherits the jQuery UI Dialog, you can do this:

 (function($) { $.widget("ui.mydialog", $.ui.dialog, { _create: function() { $.ui.dialog.prototype._create.call(this); } }); })(jQuery); 

See this in action: http://jsfiddle.net/william/RELxP/ .


This tutorial will help you: http://wiki.jqueryui.com/w/page/12138135/Widget%20factory . In short, $.Widget is a basic widget object. Although it has a _create function, it does nothing by default, leaving the initialization code in a subclass. Take a look at this updated example: http://jsfiddle.net/william/RELxP/1 .

+7
source

From jQuery 1.9 and on, if you want to add functionality to the widget and don't want to replace the existing function, after your code calls the parent method. To do this, instead of what William Niu suggests, you can simply do this:

 _create: function() { // Custom code here // Call the _create method of the widget this._super(); } 

This applies to all existing methods. (e.g. _setOption , _trigger , etc.)

+2
source

I posted a simple jQueryUI Dialog extension example using the Widget factory.

http://jsfiddle.net/Artistan/jWUGZ/

This example extends the dialog box to create a simple boot mod.

+1
source

All Articles