`
llyzq
  • 浏览: 577092 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

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输入框提示插件input输入框文字下拉提示添加标签代码

    jquery输入框提示插件input输入框文字下拉提示添加标签代码

    jquery_tips,JQ实现的冒泡提示

    jquery,tips,冒泡,jquery,tips,冒泡

    jquery实现input搜索输入关键词后自动筛选相关信息效果

    jquery实现input搜索输入关键词后自动筛选相关信息效果

    jQuery实现鼠标滑过时冒泡提示

    jQuery qtip提示框插件制作5种常用的页面浮动提示框,通过鼠标滑过或点击触发浮动提示框,类似新浪微波滑过图片异步加载ajax提示框详细信息,等多种文字和图片提示框效果。

    Jquery实现关键字标签生成插件.zip

    Jquery实现关键字标签生成插件功能Enter或Tab或失去焦点确定标签输入完毕,双击文字可以编辑该标签,单击叉叉(×)表示删除该标签 1、一开始初始化标签输入框的数量 2、容器可接受最大的标签数量 3、每个标签...

    jQuery Tooltips悬停文字提示框效果.zip

    实现效果: jQuery Tooltips悬停文字提示框效果,基于jQuery插件,可自定义显示位置,很不错的信息提示插件特效

    jquery鼠标滑过图片提示图片文字信息

    鼠标移动到图片上后,弹出图文并茂提示效果

    多种Jquery页面效果

    jQuery表单输入框标签插件jQuery FormLabels jQuery插件字数统计 jQuery垂直滚动新闻效果插件jQuery jCarouse jQuery可伸缩的反馈表单插件Contactable ...基于jQuery实现的大号的banner图片切换效果

    jQuery实现信息提示框(带有圆角框与动画)效果

    本文实例讲述了jQuery实现信息提示框效果。分享给大家供大家参考。具体如下: 一个jquery提示框特效,黑色风可,...jQuery实现的非常人性化的提示信息框效果&lt;/title&gt; &lt;script type="text/javascript" src="jqu

    JQuery&CSS;&CSS;+DIV实例大全.rar

    4.jQuery实现支付宝隐藏层提示信息内容的功能 5.jquery实现鼠标划过网址名称显示网站截图功能 6.jQuery带Tips动画提示通用表单验证插件下载(jquery validate),动画效果漂亮 7.jQuery鼠标移到下载地址滑出气泡...

    jQuery浮动信息提示框(图片和文字提示)

    摘要:脚本资源,jQuery,浮动框 jQuery实现的适用于图片、链接的浮动提示信息框,鼠标移上去后,会显示一个浮动的层,这个层可用于提示图片和文字信息,比较不错。希望大家喜欢。

    jQuery权威指南-源代码

    其次详细讲解了jQuery的各种选择器、jQuery操作DOM的方法、jQuery中的事件与应用、jQuery中的动画和特效、Ajax在jQuery中的应用,以及各种常用的jQuery插件的使用方法和技巧...

    jQuery带页面跳转的确认提示框.zip

    实现效果: jQuery带页面跳转的确认提示框,点击上面的几个文字标签,从而给出提示信息,非常适用于网站表单的验证,例如登录与注册。php中文网推荐下载!

    用jquery实现输入框获取焦点消失文字

    我们在登录网站的时候,文本框中经常会有提示你输入的信息,当你点击文本框,提示信息自动消失,当文本框什么都没有,而且失去焦点的时候,又有了提示文字。 1.原型开发,先做一个简单的: 我们首先需要一个html文件...

    jquery 提示信息显示后自动消失的具体实现

    让提示信息显示后自动消失的方法有很多,在本文为大家介绍下使用jquery是如何做到的,感兴趣朋友可以参考下

    jquery+ajax+text文本框实现智能提示完整实例

    主要介绍了jquery+ajax+text文本框实现智能提示的方法,涉及jQuery基于ajax交互实现后台数据的动态查询与文本提示信息的显示功能,需要的朋友可以参考下

    jQuery 表单验证插件

    第一种:文字提示(showword模式);第二种:弹出窗口提示(showalert模式) 支持多个校验组。如果一个页面有多个提交按钮,分别做不同得提交,提交前要做不同的校验,所以你得用到校验组的功能。 支持4种状态的信息...

    jquery.notice.js 动态提示信息插件

    摘要:脚本资源,jQuery,动态提示插件 jquery.notice.js 动态提示信息插件,鼠标点击文字,上方会淡出一个提示框效果,很漂亮的提示框,过一会会自动消失,这是使用jquery.notice.js提示框插件实现的效果,本代码可...

Global site tag (gtag.js) - Google Analytics