Jquery UI has two core CSS files: ui.core.css and ui.theme.css. These two CSS styles run through the jquery UI-based interface and can generate their own styles through jquery UI themeroller.
. UI-helper-hidden: Apply display: none to the element.
. UI-helper-hidden-accessible: sets the absolute position of the element to invisible.
. UI-helper-Clearfix: Applicable to attributes of floating wrap parent Element
. UI-helper-zfix: applicable to fixed IFRAME element overwrite issues
. UI-state-Default: Default style of the element
. UI-state-Hover: Specifies the hover state of the element.
. UI-state-focus: Specifies the style in which the element is in the focus state.
. UI-state-active: the style in which the element is active (usually selected with the mouse)
. UI-state-hightlight: The style to be highlighted
. UI-state-error: the element is in the error state (generally an error message is described ).
. UI-state-error-text: Specifies the style of the error text.
. UI-state-Disabled: Disabled style of the element
. UI-priority-Primary: the button that is applied to the first level. If the button needs to be distinguished. Bold font of the application
. UI-priority-Secondary: the button is applied to the second-level button. It corresponds to the previous scenario and applies the font of General width and is light transparent to the element.
Icon types: css framework provides a set of default icons. These icons are suitable for most scenarios. Generally, you can use "UI-Icon UI-icon-***" to specify the icon
. UI-corner-Tl: corner in the upper left corner, based on css3, not supported by IE
. UI-corner-TR: corner in the upper right corner, based on css3, not supported by IE
. UI-corner-Bl: corner in the lower left corner. It is based on css3 and is not supported by IE.
. UI-corner-Br: corner in the lower right corner, based on css3, not supported by IE
. UI-corner-top: the two corner corners above, based on css3, not supported by IE
. UI-corner-bottom: two bottom corner corners, based on css3, not supported by IE
. UI-corner-Right: Two right corner corners. Based on css3, ie does not support
. UI-corner-left: Two rounded corners on the left. Based on css3, ie does not support
. UI-corner-ALL: All corner corners, based on css3, not supported by IE
. UI-widget-overlay: mask
. UI-widget-Shadow: Shadow
When writing jquery UI widgets, you can use these CSS to make custom UIS compatible with jquery UI theme.
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, so as to maintain consistency on the whole. Article 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 (): Disable and enable widgets. It is actually modifying options. Disabled.
There are two other private methods to override when creating widgets. In the widget, all private methods are prefixed.
_ Create (): This 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 (): This method is not overwritten most of the time. This method is executed after _ create when building widgets.
Query from related documents:
_ Create (): The method is executed when the widget is built, and the _ Init () method is executed when the widget is built and reinitialized. The destroy method is executed when the widget is removed.
_ 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.
The following section Code The differences between the _ create () method and the _ Init () method are described as follows:
Copy code The Code is as follows: $ (function (){
// _ Create () and _ Init () are executed during the first call.
$ ("Div"). mywidget ();
// The widget has been instantiated to the Div. At this time, only the _ Init () method is executed.
$ ("Div"). mywidget ();
// Destroy the widget
$ ("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 encapsulated method _ trigger () as the widget to handle it. The 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 use a simple jquery UI widget code to illustrate how to develop widgets. Copy code The Code is as follows: // This widget modifies textbox. CSS is not available, and the style of jquery UI css framework is used.
(Function ($ ){
// The UI uses the UI prefix of jquery by default, followed by the widget name
$. Widget ("UI. textboxdecorator ",{
// No options in this widget
Options :{
},
_ Init: function (){
// Verify whether the elements need 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 basic style, UI-state-default. Default style; UI-corner-all rounded corner (based on css3, it does not work under IE)
This. element. addclass ("UI-widget UI-state-default UI-corner-all ");
// Add the hover effect and active effect
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 the added style from the widget when the widget is destroyed.
Destroy: function (){
This. element. removeclass ("UI-widget UI-state-default UI-corner-All UI-state-Hover UI-state-active ");
}
})
}) (Jquery)
Two objects
$ ("***"). Textboxdecorator (); is used to call this widget.
