jQuery插件开发: Watermark Plugin

最近在研究SunBlog和jQuery的整合, 不敢说有很多成就, 到此为止算是刚入门吧。jQuery最让我欣喜的是其插件式的开发模式, 这一点几乎和 DNN的模块概念同出一辙。我将陆续写些文章阐述DNN和jQuery, 比如如何开发插件(jQuery Plugin), 如何利用Ajax方式调用Webservice,如何优化UI等等。今天就简单说说如何开发jQuery插件,Google了一把，推荐这篇文章:
原文: A Plugin Development Pattern
中文翻译版: jQuery插件开发模式
如果有兴趣开发jQuery插件不妨细读一下,其中提到了一些值得推荐的开发模式, 在此列举一下:
1.在JQuery命名空间内声明一个特定的命名
2.接收参数来控制插件的行为
3.提供公有方法访问插件的配置项值
4.提供公有方法来访问插件中其他的方法（如果可能的话）
5.保证私有方法是私有的
6.支持元数据插件

Watermark插件就是按照以上推荐模式开发的，其实蛮简单，我在上篇文章(SunBlog更新:整合jQuery)曾提到过, 原始需求就是想替换Ajax Control Toolkit的TextBoxWatermarkExtender控件,也就是实现Search输入框的水印功能(Watermark)。不过上次的解决方案不是很理想,
一旦回发(postback）就会使得所输入的任何关键字都呈现水印效果,而这不是我们想要的.故此最终决定使用jQuery插件的方式开发类似效果，以便重用. 实现代码如下:

/*

* 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

var opts = $.extend({}, $.fn.watermark.defaults, options);

return this.each(function() {

 var target = $(this);

 function clear() {

 if (target.val() == opts.defaultText 

                    && target.hasClass(opts.watermarkCss)) {

                    target.val("").removeClass(opts.watermarkCss);

                }

            }

 function renderDefault() {

 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);

不 知道你是否注意到没，目前Watermark插件主要公开了两个属性defaultText和watermarkCss，defaultText就是你想 默认显示在输入框里的提示文字信息, watermarkCss则是你想要呈现的水印效果样式类.故该插件的用法如下:

jQuery(document).ready(function() {

$('.SearchEntry').watermark({defaultText:'Search Entrys',watermarkCss:'SearchWatermark'});

});

而对应的HTML标签则是:

<asp:TextBox ID="txtSearch" runat="server" CssClass="SearchEntry">