先看下效果:
html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="./js/tip.jquery.js"></script>
<title>jquery tip提示</title>
</head>
<body>
<input type="text" id="username" placeholder="请输入邮箱或手机号" />
</body>
</html>
js调用:
<script type="text/javascript">
<!--
$('#username').blur(function() {
/*$(this).tip({
message:'请输入邮箱或手机号', //需要显示的内容
position:'bottom center', //提示框显示位置和箭头位置
//left:提示框位于触发元素的位置 默认bottom (值有4个,left,top,bottom,right)
//center:箭头位于提示框的位置 默认center 其他值 为具体像素 (如 10px px为必须)
color:'#999', //提示文字的颜色 默认#999
bgColor:'#fffce7', //提示框背景颜色 默认#fffce7
bdColor:'#f8cc7e', //提示框边框颜色 默认#f8cc7e
hideEvent:'click focus', //提示框消失事件 默认click focus (多个事件空格分开,支持的事件参考jQuery bind函数)
fontSize:'12px', //提示文字大小 默认12px
hideTime:0, //提示框消失过度时间 默认0
top:0, //提示框位置top偏移量 默认0
left:0 //提示框位置left偏移量 默认0
});*/
//简洁的调用方式
$(this).tip('请输入邮箱或手机号');
});
//-->
</script>
tip.jquery.js
(function($) {
$.fn.tip=(function(options) {
var _this = $(this);
var _param = {message:'',position:'bottom center',color:'#999',bgColor:'#fffce7',bdColor:'#f8cc7e',hideEvent:'focus',fontSize:'12px',hideTime:0,top:0,left:0};
$.extend(_param,options);
if(typeof(options) != 'object') _param.message = options;
if(!_param.message) return false;
var _box = $('<div></div>').css({'color':_param.color,'background':_param.bgColor,border:'1px solid '+_param.bdColor,'position':'absolute','padding':'5px 10px','font-size':_param.fontSize}).html('<div id="tip_message">'+_param.message+'</div>').appendTo($('body'));
var _point = $('<div>◆</div>').css({width:16,height:16,'position':'absolute','color':_param.bdColor,'font-size':'14px','line-height':'14px'}).appendTo(_box);
var _point_shade = _point.clone().css('color',_param.bgColor).appendTo(_box);
var _position = _param.position.split(' ');
_position[1] = _position[1] ? _position[1] : 'center';
var _top,_left;
switch (_position[0]) {
case 'bottom':
_top = -7;
_left = (_position[1]=='center') ? (_box.outerWidth()-16)/2 : _position[1];
_point.css({top:_top,left:_left}); _point_shade.css({top:_top+1,left:_left});
_box.css({top:_this.offset().top+_this.outerHeight()+8+_param.top,left:_this.offset().left+_param.left});
break;
case 'top':
_top = _box.outerHeight()-7;
_left = (_position[1]=='center') ? (_box.outerWidth()-16)/2 : _position[1];
_point.css({top:_top,left:_left}); _point_shade.css({top:_top-1,left:_left});
_box.css({top:_this.offset().top-_box.outerHeight()-8+_param.top,left:_this.offset().left+_param.left});
break;
case 'left':
_top = (_position[1]=='center') ? (_box.outerHeight()-16)/2 : _position[1];
_left = _box.outerWidth()-8;
_point.css({top:_top,left:_left}); _point_shade.css({top:_top,left:_left-1});
_box.css({top:_this.offset().top,left:_this.offset().left-_box.outerWidth()-8});
break;
case 'right':
_top = (_position[1]=='center') ? (_box.outerHeight()-16)/2 : _position[1];
_left = -7;
_point.css({top:_top,left:_left}); _point_shade.css({top:_top,left:_left+1});
_box.css({top:_this.offset().top,left:_this.offset().left+_this.outerWidth()+8});
break;
default:
_top = -7;
_left = (_position[1]=='center') ? (_box.outerWidth()-16)/2 : _position[1];
_point.css({top:_top,left:_left}); _point_shade.css({top:_top+1,left:_left});
_box.css({top:_this.offset().top+_this.outerHeight()+8+_param.top,left:_this.offset().left+_param.left});
break;
}
_this.bind(_param.hideEvent,function(){_box.hide(_param.hideTime,function(){$(this).remove();});});
});
})(jQuery);
需要先加载jquery库
随便写的,代码不怎么严谨,本来想着写个加载css的函数,可以自定义样式,没时间,就这样了!^_^