Jquery plugin development: watermark plugin

I have been studying the integration of sunblog and jquery recently. I dare not say there are many achievements. So far it's just getting started. Jquery's plug-in-type development model almost shares the same concept with dnn modules. I will write moreArticleDescribes dnn and jquery, such as how to develop plug-ins (jquery plugin), how to use ajax to call WebService, and how to optimize the UI. Today, I will briefly talk about how to develop the jquery plug-in, Google, and I recommend this article:
Original article: A plugin Development Pattern
Chinese translation version: jquery plug-in Development Mode
If you are interested in developing the jquery plug-in, you may wish to read it carefully. Some recommended development modes are mentioned here:
1. Declare a specific name in the jquery namespace
2. Receive parameters to control the actions of the plug-in
3. Provide configuration item values for the public method Access Plug-in
4. Provide public methods to access other methods in the plug-in (if possible)
5. Ensure that the private method is private
6. Support for metadata plug-ins

The watermark plug-in was developed in accordance with the above recommendation mode. It is actually quite simple. I mentioned it in my previous article (sunblog update: Integrating jquery, the original requirement is to replace the textboxwatermarkextender control of the Ajax Control Toolkit, that is, to implement the watermark function of the search input box ). However, the last solution was not ideal,
Once a message is sent back, the watermark effect is displayed for any keyword, which is not what we want. therefore, we decided to use the jquery plug-in to develop similar effects for reuse. implementationCodeAs follows:

/*
 

 
* Watermark plugin (for jquery)
 

 
* Version: 1.0
 

* @ Requires jquery v1.2 or later
 

 
* Created by Baldwin for "sunblog" (http://www.dnnsun.com)
 

 
*/
 

(Function($ ){
 

 
$. FN. Watermark =Function(Options ){
 

 
// Build main options before element Iteration
 

VaROpts = $. Extend ({}, $. FN. watermark. defaults, options );
 

 
Return This. Each (Function(){
 

 VaRTarget = $ (This);
 

 
 FunctionClear (){
 

 If(Target. Val () = opts. defaulttext
 

 
& Target. hasclass (OPTs. watermarkcss )){
 

 
Target. Val (""). Removeclass (OPTs. watermarkcss );
 

}
 

 
}
 

 FunctionRenderdefault (){
 

 
 If($. Trim (target. Val () =''){
 

 
Target. Val (OPTs. defaulttext). addclass (OPTs. watermarkcss );
 

}
 

 
}
 

 // Bind the related event handlers
 

 
Target. Focus (clear );
 

 
Target. Blur (renderdefault );
 

Target. Change (renderdefault );
 

 
Renderdefault ();
 

});
 

 
};
 

// Plugin defaults settings
 

 
$. FN. watermark. defaults = {
 

 
Defaulttext:'Search',
 

Watermarkcss:'Watermark'
 

 
};
 

 
}) (Jquery );
 

I wonder if you have noticed it. Currently, the watermark plug-in mainly discloses two attributes: defaulttext and watermarkcss. defaulttext is the prompt text that you want to display in the input box by default, watermarkcss is the watermark effect style class you want to render. therefore, the plug-in is used as follows:

Jquery (document). Ready (Function(){
$ ('. Searchentry'). Watermark ({defaulttext:'Search encode', Watermarkcss:'Searchwatermark'});
});
 

The corresponding HTML Tag is:

<ASP: textbox ID= "Txtsearch" Runat= "Server" Cssclass= "Searchentry">