Experience in developing Widgets based on jQuery UI CSS Framework

The two core css files in jQuery UI are ui.core.css and ui.theme.css. These two css styles run through the entire jQuery ui-based interface, and you can generate your own styles through jQuery ui ThemeRoller.
.ui-helper-hidden: Apply display:none to the element
.ui-helper-hidden-accessible: Set the absolute position of the element to invisible
.ui-helper-clearfix: Applies to floats Attributes that wrap the parent element
. ui-helper-zfix: Suitable for fixing the problem of iframe element coverage
.ui-state-default: The default style of the element
.ui-state-hover: The element is hover State style
.ui-state-focus: Style when the element is in the focus state
.ui-state-active: Style when the element is in the active state (usually selected by the mouse)
.ui-state-hightlight :Styles that need to highlight the state
.ui-state-error:Styles whose elements are error states (generally describing error information)
.ui-state-error-text:Styles that describe error text
. ui-state-disabled: The style of the element being disabled
.ui-priority-primary: Applied to the first-level button, if the button needs to be distinguished from Zengji. Bold font will be applied
.ui-priority-secondary: is applied to the button with the second level. Corresponding to the previous scenario, a normal thickness font will be applied and is slightly transparent relative to the element
Icon types: css framework provides a set of default icons. These icons are suitable for most scenarios. The generally used method is "ui-icon ui-icon-****" to specify icon
.ui-corner-tl :The upper left corner is rounded, based on css3, IE does not support
.ui-corner-tr: The upper right corner is rounded, based on css3, IE does not support
.ui-corner-bl: The lower left corner is rounded, based on css3 , IE does not support
.ui-corner-br: The lower right corner is rounded, based on CSS3, IE does not support
.ui-corner-top: The top two corners are rounded, based on CSS3, IE does not support
.ui-corner-bottom: The bottom two corners are rounded, based on css3, IE does not support
.ui-corner-right: The two right corners are rounded, based on css3, IE does not support
.ui -corner-left: The two left corners are rounded, based on CSS3, IE does not support
.ui-corner-all: All corners are rounded, based on CSS3, IE does not support
.ui-widget-overlay: Mask
.ui-widget-shadow:Shadow
When writing jQuery ui widget, you can make a custom UI compatible with jQuery ui theme by appropriately using these css.
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 color, font size, icons, etc.), while in the ui css, you need to define the css that builds the widget structure, such as margin, padding, position, etc. When developing widgets, you should also try to follow this principle, so that you can make good use of jquery theme roller to apply styles and maintain consistency overall. In the previous article, we briefly introduced jquery css framework. The following is a brief introduction to the development guidelines of jquery ui.
Jquery’s official documentation writes this very clearly. Generally speaking, jquery ui inherits from the jquery.ui.widget.js file. This file provides a factory method to create widget objects. The method is $.widget(String name, Options prototype). The following is a brief introduction to the methods and properties provided by this class. These will be overridden when the widget is created.
destroy(): Remove the widget instance from the dom object. This method is generally necessary when developing widgets. It is to remove the styles and behaviors and dom structure you added on the dom element
options: What is saved here is the configuration information of the widget. When creating the widget, you need to set some configuration parameters.
element: It is the DOM object that the widget acts on.
enable() and disable(): These two methods are to disable and enable widgets. In fact, it is to modify options.disabled.
There are also two private methods that need to be overridden when creating a widget. In widgets, all private methods will be prefixed with "_".
_create(): This method is the method to create a widget. When the page calls the widget, this method will be executed to build the widget. Most of the Widget's behavior and structure are created here.
_init(): This method will not be overridden most of the time. This method is executed after _create when building the widget.
From the relevant documents:
_create(): The method is executed when the widget is built, and the _init() method is executed when the widget is built and re-initialized. The destroy method is executed when the widget is removed.
_setOption(): This method provides the setting of attributes of options. Generally, if the parameters in options do not require special processing (verification, type conversion, and triggering an operation when setting attributes, etc.) This method needs to be overridden.
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 when called for the first time 
$("div").mywidget(); 
// The widget has been instantiated on 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, both the _create() and _init() methods will be executed at this time 
$("div").mywidget(); 
}); 

Event
If there is a custom event, you can use the method _trigger() encapsulated by the widget for us to handle it. The calling 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 for the event.

Next, I will use a simple jquery ui widget code to illustrate how to develop a widget.

Copy code The code is as follows:

 
//This widget modifies the textbox. It does not have css itself, but uses the style of jquery ui css framework 
(function($){ 
//UI defaults to jquery's ui prefix, followed by the widget name 
$.widget("ui. textboxdecorator", { 
//There are no options in this widget 
options:{ 
}, 
_init: function(){ 
//Verify whether it is an 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 The basic style of the widget, ui-state-default, the default state style; ui-corner-all rounded corners. (Based on css3, does not work under IE) 
this.element.addClass("ui-widget ui-state-default ui-corner-all"); 
//Add 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"); 
}); 
}, 
//When destroyed, remove the style added by the widget 
destroy:function(){ 
this.element .removeClass("ui-widget ui-state-default ui-corner-all ui-state-hover ui-state-active"); 
} 
}) 
})(jQuery) 
 

When using this widget, you need to reference jquery, jquery.ui.core.js, jquery.ui.widget.js files, and css files need jquery.ui.core.css and jquery.ui.theme The two .css files
use $("***"). textboxdecorator(); when calling this widget.

Experience in developing Widgets based on jQuery UI CSS Framework_jquery