Initializing a jQuery UI Plugin with Default Options - J Query

Problem
You want to start using a jQuery UI plugin as quickly and easily as possible, accepting the built-in default options.

Solution

All jQuery UI plugins are called like traditional jQuery plugins, so after you get a matched set of elements, simply call the plugin name as a function on the jQuery object:

Discussion

Because JavaScript is case sensitive, care is taken in the naming of jQuery UI plugins.All jQuery UI plugins start lowercase, and, like the jQuery API, most are only one word.If more than one word is needed, any after the first will start uppercase. There are n’t currently any jQuery UI plugins with more than one word, so here’s a made-up example:

The initialized element gets a class of ui-pluginname. For example, here’s the before and after HTML if you call $('div').draggable();:

There are some exceptions to this. The element on which you call .dialog() gets the class of ui-dialog-content and is wrapped in a generated element with a class of ui-dialog. Another exception is if you call .datepicker() on a text input. The input will not get the ui-datepicker, but the <div>that appears when the input is focused has the ui-datepicker class.
Here are a few points to keep in mind when initializing a jQuery UI plugin:

  • If you call a jQuery UI plugin init method on a set containing more than one element, it will be called as a separate in it on each element individually. So, the following:

  • Each DOM Element can be initialized by each jQuery UI plugin only once. Any future in it calls, whether with options specified or not, will be ignored.

  • All options are optional. You can always safely initialize a jQuery UI plugin by simply calling the plugin name method. Not only is it safe, but it should be supremely useful. Each has been designed to have the most common options as


All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

J Query Topics