Jquery插件:autoTip 作者:飞飞 版本:v1.0 QQ群:72840059 下载地址:http://www.ffasp.com/content.asp?newsid=1655飞飞Asp,技术乐园 功能说明: 本插件是为输入用户名的提示信息而写的。功能虽然简单但对于做开发的人来说每次写这几行代码也实属繁琐,所以我就把这几行代码写成了jquery的插件以求以后用起来更加便捷。 简单说明: 1.可以自动默认提示信息,若不设置则默认值为:用户名/邮箱 2.当input获得焦点时,input的值会被自动清除;当input失去焦点时,会判断输入值与默认值是否一致,如果一致(或空)则再次显示默认提示信息,若不一致(已输入信息)则input值为所输入值 3.此插件是jquery插件,调用方式为 * $("#xxx").autoTip(); 并可以指定input获得焦点和失去焦点的CSS样式。以下为参数说明 +------------------------------------------------------------------------------ * 参数 * @input 入参 * json对象 * @ dvalue input表单提示默认值 * @ tip 默认提示信息样式名class * @ tipnone 在指定的input执行click时替换的样式名class +------------------------------------------------------------------------------ *使用方法: * $("#xxx").autotip(); * @ #xxx 为需要提示的input的id 在线演示: http://www.ffasp.com/plugs/autotip/飞飞As~p技术乐园
插件源码
$.fn.autoTip = function(G){ /** +------------------------------------------------------------------------------ * input用户名自动提示插件 +------------------------------------------------------------------------------ * @author 飞飞 * @version 1.0 * @QQ 276230416 +------------------------------------------------------------------------------ * 参数 * @input 入参 * json对象 * @ dvalue input表单提示默认值 * @ tip 默认提示信息样式名class * @ tipnone 在指定的input执行click时替换的样式名class +------------------------------------------------------------------------------ *使用方法: * $("#xxx").autotip(); * @ #xxx 为需要提示的input的id */ var D; D = { dvalue:"用户名/电子邮箱",//表单默认值 tip:"tip", //默认提示信息样式名class tipnone:"tipnone" //在指定的input执行click时替换的样式名class }; $.extend(D,G); if ($(this).val()==""){ $(this).val(D.dvalue) .addClass(D.tip) .click(function(){ if($(this).val()==D.dvalue){ $(this).val(""); $(this).removeClass(D.tip); $(this).addClass(D.tipnone); } }) .blur(function(){ if($(this).val()==""){ $(this).removeClass(D.tipnone); $(this).addClass(D.tip); $(this).val(D.dvalue); } }); }; }
|