`
accpxudajian
  • 浏览: 458699 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

EasyTip 简单Tip提示窗口

 
阅读更多 

<script src="JSLogger.js" debug="true"></script>

<script>
/*组件说明：
	当前适用于给文本框添加注释说明，主要用在表单验证的时候提示错误信息
	思路简介：	1 给文本框添加click事件监听。
				2 当文本框click的时候，根据当前文本框的坐标信息打印 tip窗口
				3 给tip窗口添加mouseout方法，当光标移出tip窗口的时候，销毁tip窗体
*/
	function test(){
		var txt1 = document.getElementById("mytxt1");
		EasyTip.bindDom(txt1,"第一个文本框提示");
		var txt2 = document.getElementById("mytxt2");
		EasyTip.bindDom(txt2,"第二个文本框提示",300,"150px");/*宽度和高度  输入数字或者字符px都可以 */
	}
	
	var EasyTip={
			/*
				初始化窗口组件
				@param msg 显示的信息
				@param x,y  X坐标和Y坐标
				@param 当光标移动出道窗口意外后，窗口销毁。
			*/
			init:function(msg,x,y,w,h){
				JSLogger.log("init");
				if(typeof(x)=="undefined"){
					var e = window.event;
					x = e.clientX;
					y = e.clientY;
				}
				
				if(typeof(w)=="undefined"){w=200;}
				//统一添加px元素
				
				x = (x+"").split("px")[0]+"px";
				y = (y+"").split("px")[0]+"px";
				w = (w+"").split("px")[0]+"px";
				var tipDiv = document.createElement("div");
				
				tipDiv.setAttribute("id","Easy_Tip_Div");
				tipDiv.style.width=w;
				
				tipDiv.style.zIndex="100";

				if(typeof(h)!="undefined"){
					h = (""+h).split("px")[0]+"px";
					tipDiv.style.height=h;
				}
				tipDiv.style.border="1px solid gray";
				tipDiv.style.position="absolute";
				tipDiv.style.background="white";/*背景色 */
				tipDiv.style.margin="4 0 0 0";
				tipDiv.style.left=x;
				tipDiv.style.top=y;
				var html ="<div style='background:gray;text-align:right;padding-right:4px;font-family:arial;cursor:move;'>";
					html+='<span style="cursor:pointer;" onclick=\'EasyTip.remove()\'>X</span></div>';
					html+=("<div id='Easy_Tip_Con'>"+msg+"</div>");
				tipDiv.innerHTML=html;
				
				document.body.appendChild(tipDiv);
				EasyTip.addLisener(tipDiv,"mouseout",EasyTip.removeAction);
			},
			getTipDiv : function(){
				var tipDiv = document.getElementById("Easy_Tip_Div");
				return tipDiv;
			},
			remove : function(){
				var tipDiv = EasyTip.getTipDiv();
				if(tipDiv==null){return;}
				document.body.removeChild(tipDiv);
			},
			removeAction : function(){/*窗口销毁方法*/
					JSLogger.log("remove action")
					var e = window.event;
					var ex = e.clientX;
					var ey = e.clientY;
					var tipDiv = EasyTip.getTipDiv();
					if(tipDiv==null){return;}
					var x = tipDiv.offsetLeft;
					var y = tipDiv.offsetTop;
					var w = tipDiv.clientWidth;
					var h = tipDiv.clientHeight;
					
					//JSLogger.log("tipdiv .x=="+x+",y="+y+",w="+w+",h="+h);
					//通过坐标值进行判断是否隐藏
					if(ex<x || ex>x+w || ey<y || ey>y+h){
						EasyTip.remove();
					}
			},
			/*
				绑定表单元素的方法
				@param domObj 表单元素对象
				@param msg tip窗口显示的信息
				@param w 宽度 可省略 则等于当前元素宽度
				@param h  高度 可省略 
			*/
			bindDom : function(domObj,msg,w,h){
				var x = domObj.offsetLeft;
				var y = domObj.offsetTop+domObj.clientHeight;
				if(typeof(w)=="undefined"){w=domObj.clientWidth+"px";}
				//JSLogger.log("bindDom>> x="+x+",y="+y+",msg="+msg+",w="+w+",h="+h);
				EasyTip.addLisener(domObj,"click",function(){EasyTip.init(msg,x,y,w,h);});//
				
			},
			addLisener : function(domObj,action,fun){
				JSLogger.log("addLisener> action="+action);
				if(domObj.addEventListener){
					JSLogger.log("not IE,action=="+action);
					domObj.addEventListener (action,fun);
				}else{
					action = "on"+action;
					JSLogger.log("IE"+",action="+action);
					domObj.attachEvent (action,fun);
				}
			}
	}
	
</script>
<body><br/>
1、点击注册按钮<br/>
2、点击文本框<br/><br/><br/>
	<input type="button" value="注册TipDiv" onclick="test()"> <br/><br/>
	
	<input id="mytxt1" value="请点击我1"/>
	<textarea id="mytxt2" value="请点击我2"></textarea><br/><br/>
<input type="button" value="检测TipDiv是否存在" onclick="alert( EasyTip.getTipDiv())"> <br/>
</body>
 
  • 大小: 79.4 KB
分享到：
| css小结
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    非常实用的弹出tip提示窗口实例

    在IT领域，弹出提示窗口（Tip提示窗口）是一种常见的用户界面设计元素，它用于向用户提供即时信息或反馈。在本实例中，我们将深入探讨如何创建一个实用且高效的弹出tip提示窗口，以及相关的编程技术和设计原则。 ...

    MFC控件添加tip提示

    在MFC中，控件的“tip提示”是一种小型文本气泡，它会在鼠标悬停在控件上时短暂显示，为用户提供额外的信息。本文将深入探讨如何在MFC应用中为不同类型的控件添加tip提示，包括按钮、复选框、下拉框、单选框和输入框...

    js中的tip提示信息

    根据给定的信息，本文将详细解析“JS中的Tip提示信息”的相关知识点，包括Tip提示信息在JavaScript中的实现原理、常用库和技术方案等。 ### 一、什么是Tip提示信息？ 在Web开发中，提示信息（Tips）是一种常见的...

    Delphi右下角消息提示窗口.rar

    "Delphi右下角消息提示窗口.rar" 文件提供了一种实现方式，它能够创建类似QQ迷你提示窗口的效果，这种窗口会出现在屏幕的右下角，既美观又实用。这个功能的实现主要依赖于两种方法：Tiptimer方法和Tip循环方法。尽管...

    TIP提示的C++实现

    TIP提示的C++实现，方便个性化的应用

    tip提示插件

    标题中的“tip提示插件”指的是网页开发中用于增强用户体验的一种功能组件，它通常以小型气泡或提示框的形式出现，向用户显示额外的信息或帮助。这种插件可以帮助用户更好地理解页面元素的功能，或者在他们与页面...

    WPF制作不规则窗口 Tip消息提示框_可拖动_有关闭按钮.rar

    在本文中，我们将深入探讨如何在Windows Presentation Foundation (WPF) 中创建一个不规则形状的窗口，同时包含可拖动功能以及带有关闭按钮的Tip消息提示框。WPF是.NET Framework的一部分，它提供了一个强大的图形子...

    动感的Tip提示效果，基于jquery的代码实现

    本篇文章将详细讲解如何利用jQuery实现动感的Tip提示效果。 首先，Tip提示效果通常用于在用户操作时提供即时反馈或显示额外信息。这种效果能够增强用户体验，使用户界面更加友好和互动。在基于jQuery实现动态Tip...

    tip标签提示框/类bootstrap

    在IT行业中，前端开发是至关重要的一环，而创建交互式的用户体验是前端开发的核心任务之一。...在提供的压缩包文件`tip(未封装版up-and-down)`中，应该包含了实现这一功能的具体代码，可以进一步研究和扩展。

    JavaScript实现简单Tip提示框效果

    在介绍如何利用JavaScript实现简单Tip提示框效果之前，首先要明确什么是Tip提示框。Tip提示框是一种常见的用户界面元素，当用户将鼠标悬停在某个链接或者图标上时，它会显示一些额外的信息，以帮助用户理解该链接或...

    jquery title提示效果,jquery tip提示效果

    本教程将详细讲解如何利用jQuery实现title提示效果，即当鼠标悬停在某个元素上时，显示一个带有提示信息的小窗口。 首先，`title`属性是HTML中用于提供额外信息的特性，通常会在鼠标悬停时显示。在默认情况下，这些...

    IOS应用源码——tip弹出提示选项窗口demo.rar

    这个"IOS应用源码——tip弹出提示选项窗口demo"应该包含了一个实现此类功能的示例项目，我们可以从中学到如何在iOS应用中创建和使用这类提示窗口。 首先，这种提示窗口通常基于`UIAlertController`类，它是苹果iOS ...

    Tip.rar_delphi 消息提示_tip

    这个"Tip.rar_delphi 消息提示_tip"压缩包很可能是包含了一个使用Delphi编写的示例程序，用于展示如何创建这样的消息提示窗口。让我们深入探讨一下Delphi中的消息提示实现以及相关技术。 首先，Delphi是基于Object ...

    像QQ消息一样简单的Tip

    【QQ Tip】是一种类似QQ消息通知的技术实现，它模拟了QQ聊天软件中消息提示的方式，让用户在使用其他应用时能够接收到即时的信息提醒。这种Tip通常具有轻量级、易于吸引用户注意力的特点，并且可以设置自定义的停留...

    IOS应用源码——tip弹出提示选项窗口demo.zip

    4. **手势识别**: 为了响应用户的触摸事件，源码可能包含了手势识别器（如UITapGestureRecognizer或UIPanGestureRecognizer），这些手势可以触发提示窗口的显示和消失。 5. **Auto Layout**: 自动布局是iOS中用来...

    VC 为ListBox文字超出时自动添加Tip提示.rar

    VC 为ListBox文字超出时自动添加Tip提示，当列表某一行的内容超出规定范围时，列表一般会将其隐藏，用户无法看到，此时智能提示功能会开启，鼠标放在此行上面，会显示出隐藏掉的内容，完整显示ListBox中的图像，拉回...

    JavaScript做的tip提示

    "jQuery qTip"是一个基于jQuery的插件，专门用于创建样式丰富的提示框（Tip提示）。它提供了高度自定义的功能，使得开发者可以轻松地为网页元素添加具有吸引力和实用性的提示信息。 jQuery是一个轻量级、高性能的...

    jQuery tip提示插件（实例分享）

    在本文中，我们将深入探讨jQuery Tip提示插件的实现，这是一种...这种插件的灵活性使得它适用于各种场景，如表单验证提示、帮助文本或者简单的信息提示。理解其工作原理和实现方式对于优化前端交互设计是非常有益的。

Magicbox
Global site tag (gtag.js) - Google Analytics