jQuery实现文字提示信息



(function($){
	
	$.fn.extend({
		plugins_tip:function(){
			return this.each(function(){
				var self = this;
				//获取个性化的位置、宽度
				var options={_tip_left:$(self).attr("tipLeft"),_tip_top:$(self).attr("tipTop"),_tip_width:$(self).attr("tipWidth")};
				var settings = {_tip_left:10,_tip_top:10,_tip_width:200};//默认值
				$.extend(settings, options);
				$(self).css("cursor","default");
				var _s={
						_init:function(){
							this._event();
						},
						_g:{_wrap:$()},
						_html:function(){
							var html = [
									"<div class='plugins_tip_wrap'>"
										,"<div class='plugins_tip_arrow'></div>"
										,"<div class='plugins_tip_content'></div>"
									,"</div>"
									].join("");
							$("body").append(html);
							_s._g._wrap=$(".plugins_tip_wrap");
							$(".plugins_tip_content",_s._g._wrap).html($(self).attr("otitle"));
							if(_s._g._wrap.width()>settings._tip_width){_s._g._wrap.width(settings._tip_width)};
						},
						_event:function(){
							$(self).hover(function(event){
								_s._html();
								_s._fn._set_position(event);
								_s._g._wrap.show();
							},function(){
								_s._g._wrap.hide();	
								_s._g._wrap.remove();
							});
							$(self).mousemove(function(event){
								_s._fn._set_position(event);
							})
						},
						_fn:{
							_set_position:function(e){
								var _x = e.pageX+parseInt(settings._tip_left); 
								var _y = e.pageY+parseInt(settings._tip_top); 
								_s._g._wrap.css( {left : _x  , top : _y } ); 
							}	
						}
					}
				_s._init();
			})
		}
	})
	
	$(function(){
		function tipbind(){
			//防止重复绑定
			if(window.plugins_tip) return;	
			$("a[otitle]").plugins_tip();
			window.plugins_tip={};
		};
		tipbind();
	})	
})(jQuery)

/*
.plugins_tip_wrap{ position:absolute; display:none; font-size:12px; line-height:18px; color:#18508e;opacity:0.7;filter:alpha(opacity=70);border-right:2px solid #ccc; border-bottom:2px solid #ccc}
.plugins_tip_arrow{ position:absolute; top:0px; left:0px; width:0px; height:30px;}
.plugins_tip_content{ padding:4px 6px; background:#dce8f2;}
*/

你可能感兴趣的:(jquery)