Jquery UI widget Development

Jquery UI provides some basic widgets, but it provides a good mechanism to create widgets. The jquery css framework contains basic CSS styles (visual and sensory, such as colors, font sizes, and icons). In the CSS of the UI, you need to define the CSS for building the widget structure, such as margin, padding, and position. We should follow this principle when developing widgets as much as possible so that we can use jquery theme roeller to apply styles well, so as to maintain consistency as a whole, the previous article briefly introduced jquery css framework. The following describes the development guide of jquery UI.

This is clearly written in jquery's official documentation. In general, jquery UI is inherited from the file jquery. UI. widget. js. This file provides a factory method to create a widget object. The method is $. widget (string name, options prototype). The following describes the methods and Attributes provided by this class. These will be overwritten when creating widgets.

Destroy (): removes a widget instance from a DOM object. This method is generally required when developing widgets. Removes the styles, actions, and Dom structures you have added on the DOM element.

Options: the configuration information of the widget is saved here. You need to set some configuration parameters when creating the widget.

Element: the DOM object used by the widget.

Enable () and disable () are used to disable and enable widgets. It is actually modifying options. Disabled.

There are two other private methods to override when creating widgets.

The _ create () method is used to create Widgets. When a widget is called on a page, this method is executed to build widgets. Most of the behaviors and structures of widgets are created here.

_ Init () is not overwritten most of the time. This method is executed after _ create when building widgets. Query from related documents:

The _ create () method is executed during widget build, while the _ Init () method is executed during build and re-initialization. The destroy method is executed when the widget is removed. In the widget, all private methods are prefixed "_".

_ Setoption (): This method provides options attribute settings. Generally, if the parameters in options do not need special processing (verification, type conversion, you do not need to override this method when setting attributes to trigger an operation.

Event

If there is a custom event, you can use the widget as our encapsulated method to process the _ trigger () method. Its call method is this. _ trigger (type, event, data). The first parameter is the time type, the second parameter is the event object, and the third parameter is the parameter to be passed by the event.

Next, we will write a simple jquery UI widget to illustrate how to develop widgets.