The two core CSS files in the jquery UI are Ui.core.css and ui.theme.css. These two CSS styles run through the entire jquery UI interface and can generate their own styles through the jquery UI Themeroller.
. Ui-helper-hidden: Apply Display:none to elements
. ui-helper-hidden-accessible: Sets the absolute position of an element to be invisible
. Ui-helper-clearfix: Properties that apply to floating wrapped parent elements
. Ui-helper-zfix: Suitable for repairing the problem of IFRAME element coverage
. Ui-state-default: Default style for elements
. Ui-state-hover: A style with an element of hover state
. Ui-state-focus: The style of the element as the focus state
. ui-state-active: The style of the element for active state (typically mouse selected)
. ui-state-hightlight: Styles that require a highlighted state
. Ui-state-error: element is a style of error state (general description error message)
. Ui-state-error-text: Style that describes the error text
. ui-state-disabled: The style that the element is disabled
. Ui-priority-primary: A button that is applied to the first level, if the button needs to be distinguished from the previous note. Apply Bold font
. Ui-priority-secondary: A button that is applied to the second level, and corresponds to the previous scene, will apply a font of general thickness and is slightly transparent relative to the element
The icon TYPES:CSS Framework provides a set of default icons that apply to most scenarios and are generally used in the form of "Ui-icon ui-icon-****" to specify icon
. UI-CORNER-TL: Rounded corners on the upper left corner, based on Css3,ie not supported
. UI-CORNER-TR: Rounded corners on upper right corner, Css3,ie not supported
. UI-CORNER-BL: Rounded corners in the lower left corner, based on Css3,ie not supported
. UI-CORNER-BR: Rounded corners of the lower right corner, based on Css3,ie not supported
. Ui-corner-top: Top two corner fillet, based on Css3,ie not supported
. Ui-corner-bottom: Bottom two corner fillet, based on Css3,ie not supported
. Ui-corner-right: Right two corner fillet, based on Css3,ie not supported
. Ui-corner-left: Left two corner fillet, based on Css3,ie not supported
. Ui-corner-all: Rounded corners, based on Css3,ie not supported
. Ui-widget-overlay: Masks
. Ui-widget-shadow: Shadows
When writing the jquery UI widget, you can use these CSS to make a custom UI that is compatible with the jquery UI theme.
The JQuery UI provides some basic widgets, but he provides a good mechanism for creating widgets. The jquery CSS framework contains basic CSS styles (visual and sensory such as color, font size, icons, etc.), while in the UI CSS, you need to define the CSS that constructs the widget structure, such as margin,padding,position. It is also important to follow this principle when developing widgets so that you can use the jquery theme roller to apply styles to the overall consistency of the jquery CSS framework, which is simply introduced in the previous article. The following is a brief introduction to the development guidelines for the jquery UI.
This is clearly written in the official jquery document. In general, the jquery UI is inherited from the Jquery.ui.widget.js file. This file provides a factory method to create the Widget object. The method is $.widget (String name, Options prototype). The following is a brief description of the methods and properties provided by this class. This will be overridden when creating widgets.
Destroy (): Removes the widget instance from the DOM object, which is generally necessary when developing widgets. is to remove the style and behavior that you added on the DOM element and the DOM structure
Options: The configuration information for widgets is saved here, and some configuration parameters need to be set when creating widgets.
Element: Is the DOM object that the widget acts on.
Enable () and disable (): The two methods are to disable and enable the widget. is actually modifying options.disabled.
There are two other private methods to rewrite when creating widgets. In the widget, all private methods are prefixed with "_".
_create (): This method is the way to create widgets, and when the page invokes the widget, this method is executed to build the widget. The vast majority of the widget's behavior and structure is created here.
_init (): This method is not rewritten most of the time, and this method is executed after _create when building widgets.
Query from related documents:
_create (): The method executes when the widget is built, while the _init () method executes when it is built and reinitialized. The Destroy method is executed when the widget is removed.
_setoption (): This method provides settings for the properties of the options, and it is not necessary to override this method in general if the parameters in the options do not require special handling (checksum, type conversion, and when setting the property to trigger an action, etc.).
The following code illustrates the difference between the _create () method and the _init () method:
Copy Code code as follows:
$ (function () {
_create () and _init () are executed at the first call
$ ("div"). Mywidget ();
The widget has been instantiated on the Div, only the _init () method is executed at this time
$ ("div"). Mywidget ();
Destroying widgets
$ ("div"). Mywidget ("destroy");
Because the widget has been destroyed, the _create () and _init () methods will be executed
$ ("div"). Mywidget ();
});
Event
If you have a custom event, you can use the widget to _trigger () the method that we encapsulate, the method is This._trigger (type, event, data), the first parameter is the time type, the second parameter is the event object, The third parameter is the argument to be passed by the event.
The next step is to use a simple jquery UI widget code to illustrate how to develop widgets.
Copy Code code as follows:
This widget is decorated with a textbox. There is no CSS for itself, using the jquery UI CSS Framework style
(function ($) {
The UI defaults to the jquery UI prefix, followed by the widget name
$.widget ("Ui.textboxdecorator", {
There is no options in this widget
options:{
},
_init:function () {
Verify that the element that needs to be decorated
if (!) ( This.element.attr ("TagName"). toLowerCase () = = "Input" | | This.element.attr ("TagName"). toLowerCase () = = "textarea") {
Return
}
if (!) ( This.element.attr ("type"). toLowerCase () = = "Text" | | This.element.attr ("type"). toLowerCase () = = "Password") {
if (this.element.attr ("TagName"). toLowerCase () = = "Input")
Return
}
This.element is the element that calls this widget
var e = this.element;
Ui-widget widget basic style, Ui-state-default. The style of the default state; Ui-corner-all fillet (based on Css3,ie does not work)
This.element.addClass ("Ui-widget ui-state-default ui-corner-all");
Add hover effects and active effects
This.element.mouseover (function () {
E.addclass ("Ui-state-hover");
}). mouseout (function () {
E.removeclass ("Ui-state-hover");
}). MouseDown (function () {
E.addclass ("ui-state-active");
}). MouseUp (function () {
E.removeclass ("ui-state-active");
});
},
Remove widget-added style when destroying
Destroy:function () {
This.element.removeClass ("Ui-widget ui-state-default ui-corner-all ui-state-hover ui-state-active");
}
})
}) (JQuery)
When using the widget, you need to refer to Jquery,jquery.ui.core.js, Jquery.ui.widget.js file, CSS file requires jquery.ui.core.css and jquery.ui.theme.css two files
Use $ ("* *") at the time of the call. Textboxdecorator () to invoke this widget.
