最近在研究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">
Enjoy jQuery & SunBlog!