Wednesday, January 8, 2014

Default Widget Options

Each jQuery UI widget comes with a set of default options. These options also come with default values. If they didn't, you would have to specify a value for every available option each time you create a widget, since the widget relies on options being populated. But the default set of options that a given widget uses may not suit a particular application well. Signs of this being the case are lot's of the same option values being used all over the place. This is easy to fix by creating a custom widget that extends the options object with the defaults you would like to use, while leaving the other default option values intact.

Here's an example that creates a new error widget. It's just a dialog widget, and we're not actually introducing any new behavior. All that's happening here is that we're providing the dialog with a specific set of default option values. For example, we always want this dialog to be a modal positioned in the top center of the window. Along with some others as well.

You'll note also that we're not extending the dialog widget itself — we're calling the widget error, not dialog. This is on purpose, because if we had decided to override the dialog options, there's no easy way to get the default values back. That would be like removing the "restore default settings" button from your phone.

When it comes time to use the widget, we just have to call the constructor, without passing it the same options object over and over. It's already taken care of.