`
llyzq
  • 浏览: 585475 次
  • 性别: 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_tips,JQ实现的冒泡提示

    《JQuery实现冒泡提示的技巧与应用》 在网页开发中,为了提供更好的用户体验,开发者经常需要在用户与页面元素交互时显示一些提示信息。jQuery的tips功能恰好能满足这一需求,它允许我们轻松地创建出具有冒泡效果的...

    基于jQuery实现文字点击验证代码.zip

    2. **反馈显示**:如果验证成功,可能通过改变文字颜色、显示提示信息等方式给予用户积极反馈;反之,如果验证失败,可能会弹出错误消息或者高亮错误字段。 3. **代码结构**:压缩包中的`132677974348325802.js`很...

    jquery实现Tooltip提示(文字、链接、地图锚点),自带5种不同样式

    通过以上步骤,你可以使用jQuery实现具有文字、链接和地图锚点的Tooltip,并提供多样化的样式选择。这个过程结合了JavaScript编程、DOM操作、事件处理和CSS设计,是提高网页交互性的重要技能。在实际项目中,可以...

    jquery点击搜索框文字向上浮动提示

    当用户点击搜索框时,我们可能希望显示一个提示信息,告知用户如何使用搜索功能或提供搜索建议。这通常涉及CSS样式和HTML结构。我们可以创建一个隐藏的提示元素,然后在点击事件触发时使其可见。例如: ```html 请...

    jquery Tooltip简易文本提示框插件

    这是一个提示信息"&gt;点击我 $(document).ready(function() { $('#tooltipElement').tooltip(); }); ``` 这段代码将在按钮上添加一个默认样式的Tooltip。 四、自定义样式 jQuery Tooltip允许通过CSS进行样式定制...

    jQuery CSS3实现动态提示信息条.zip

    在本项目"jQuery CSS3实现动态提示信息条.zip"中,我们主要探讨如何利用JavaScript库jQuery结合CSS3技术创建一种动态、美观的提示信息条,适用于网页中的表单提交反馈。这种提示信息条的设计旨在提升用户体验,通过...

    Jquery实现鼠标移上弹出提示框、移出消失思路及代码

    在今天的知识分享中,我们将探讨如何利用JQuery实现一个常见的网页交互效果:鼠标移上元素时弹出提示框,鼠标移出时提示框消失。这一交互功能在用户界面设计中非常实用,能够有效地为用户提供额外的信息或说明。 ...

    jQuery鼠标悬停文字提示插件.zip

    在这个“jQuery鼠标悬停文字提示插件.zip”中,我们关注的是一个名为“jquery.mytooltip”的插件,它专门用于实现鼠标悬停时的文字提示功能。 首先,让我们深入理解这个插件的核心功能。jQuery.mytooltip插件允许...

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

    本教程将详细介绍如何利用jQuery实现“鼠标滑过图片提示图片文字信息”的功能,即当用户将鼠标悬停在图片上时,会弹出一个图文并茂的提示框,显示与图片相关的文字信息。 首先,我们需要引入jQuery库。在HTML文件的...

    jquery文字旋转放大特效.zip

    这种特效可以应用于网站标题、按钮、提示信息等多种场景,增加网页的视觉吸引力和用户体验。通过学习和理解这个压缩包中的代码,开发者可以进一步提升自己的前端技能,尤其是对于jQuery动画和CSS3特性的运用。

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

    标题和描述提到的“jquery输入框提示插件input输入框文字下拉提示添加标签代码”是一个关于如何利用 jQuery 和相关技术实现这种功能的方法。 这个插件的主要目的是当用户在输入框中输入文字时,提供实时的下拉提示...

    jQuery实现文本框获得焦点文字消失

    在这些事件处理函数中,我们将实现文字的显示与隐藏。 以下是实现文本框获得焦点时文字消失的jQuery代码: ```javascript $searchInput.focus(function() { if ($(this).val() === '默认文字') { // 检查文本框的...

    jQuery制作图片标注提示信息插件

    首先,从标题“jQuery制作图片标注提示信息插件”来看,我们关注的核心功能是实现图片上的标注和提示信息。这种功能在网页设计中常用于为用户提供更直观的信息,例如在地图应用中标识地点、在产品展示中解释特定细节...

    jQuery实现的用户注册表单上方弹窗提示文字特效源码.zip

    本资源“jQuery实现的用户注册表单上方弹窗提示文字特效源码.zip”提供了一种利用jQuery创建用户注册表单时,用于增强用户体验的动态提示文字效果。这种效果通常用于实时验证用户输入,或者在用户完成特定操作后给予...

    jquery tips提示插件自适应屏幕宽度提示图片信息

    在某些情况下,文字提示可能无法充分传达所需信息,这时可以利用jQuery Tips插件展示图片信息。例如,当用户鼠标悬停在某个图标或按钮上时,可以弹出一个包含相关图片的提示框,以提供更直观的说明。这种功能对于...

    jQuery为图片添加文字提示内容.rar

    这个“jQuery为图片添加文字提示内容.rar”压缩包包含了一个实例,展示了如何利用jQuery来实现一种常见的用户体验增强功能:图片悬停提示。这种功能在网页设计中很常见,它可以向用户提供额外的信息,而无需离开当前...

    jquery警告提示框

    本资源包含两个使用jQuery实现的自定义警告提示框示例,这些示例具有较高的可定制性和灵活性。以下是对这两个示例的详细解读: 1. **ConfirmDemo** `confirmDemo`是一个基于jQuery的确认对话框示例。在传统的...

    jquery气泡弹出提示效果.rar

    本资源“jquery气泡弹出提示效果.rar”似乎包含了一个使用jQuery实现的气泡提示效果,这在网页交互设计中非常常见,用于向用户提供信息或者反馈。在C#开发的Web应用中,前端的这种交互效果可以极大地提升用户体验。 ...

    jQuery段落文字内容高亮显示提示-20130712

    总之,通过jQuery实现段落文字的高亮显示提示是一项实用的功能,它能够帮助用户快速定位到页面中的关键信息,提升阅读效率。结合适当的样式设计和性能优化,这一功能可以在多种场景下发挥作用,包括搜索结果高亮、...

Global site tag (gtag.js) - Google Analytics