您的位置：首页 > Web前端 > JQuery

jQuery插件开发: Watermark Plugin

2008-12-02 14:32 459 查看
最近在研究SunBlog和jQuery的整合,不敢说有很多成就,到此为止算是刚入门吧。jQuery最让我欣喜的是其插件式的开发模式,这一点几乎和

DNN的模块概念同出一辙。我将陆续写些文章阐述DNN和jQuery,比如如何开发插件(jQueryPlugin),如何利用Ajax方式调用Webservice,如何优化UI等等。今天就简单说说如何开发jQuery插件,Google了一把，推荐这篇文章:

原文:APluginDevelopmentPattern

中文翻译版:jQuery插件开发模式

如果有兴趣开发jQuery插件不妨细读一下,其中提到了一些值得推荐的开发模式,在此列举一下:

1.在JQuery命名空间内声明一个特定的命名

2.接收参数来控制插件的行为

3.提供公有方法访问插件的配置项值

4.提供公有方法来访问插件中其他的方法（如果可能的话）

5.保证私有方法是私有的

6.支持元数据插件

Watermark插件就是按照以上推荐模式开发的，其实蛮简单，我在上篇文章(SunBlog更新:整合jQuery)曾提到过,原始需求就是想替换AjaxControlToolkit的TextBoxWatermarkExtender控件,也就是实现Search输入框的水印功能(Watermark)。不过上次的解决方案不是很理想,

一旦回发(postback）就会使得所输入的任何关键字都呈现水印效果,而这不是我们想要的.故此最终决定使用jQuery插件的方式开发类似效果，以便重用.实现代码如下:

/*

*Watermarkplugin(forjQuery)

*Version:1.0

*@requiresjQueryv1.2orlater

*Createdbybaldwinfor"SunBlog"(http://www.dnnsun.com)

*/

(function($){

$.fn.watermark=function(options){

//buildmainoptionsbeforeelementiteration

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


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

}

}


//Bindtherelatedeventhandlers

target.focus(clear);

target.blur(renderDefault);

target.change(renderDefault);


renderDefault();

});

};


//plugindefaultssettings

$.fn.watermark.defaults={

defaultText:'search',

watermarkCss:'watermark'

};

})(jQuery);


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

jQuery(document).ready(function(){

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

});

而对应的HTML标签则是:
<asp:TextBoxID="txtSearch"runat="server"CssClass="SearchEntry">

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航