Here is a simple widget, which is also annotated in the code.
Code // 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.
