Tip提示效果
来源：互联网 发布：大切诺基轮毂详细数据 编辑：程序博客网 时间：2024/05/09 19:36
<textarea id="code0" rows="10" cols="95"><!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"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>POPHint 弹出提示框</title><style type="text/css"><!--body {margin: 3em; font: 12px "宋体"; background: #EAEAEA}input {font: 12px "宋体"; color: #666666}.case {padding: 2em; border: solid 1px #EAEAEA; background: #FFFFFF; margin-bottom: 3em; line-height: 150%}a {color: #666666; text-decoration: none}a:hover {color: #333333}/* popHint Start */#popHint {position: absolute}#popHint .popLeft, #popHint .popRight, #popHint .popAngle span, #popHintText, #popHint .popIcon {background-image: url(http://i.namipan.com/files/48ee6e2804bb4b1d84ecea96218e4a50081349ba960100008f09/0/PopHint.gif)}#popHint .popHeader {height: 1%; overflow: hidden !important; overflow /**/: visible}#popHint .popLeft {float: left; width: 5px; height: 24px; background-position: 0 0; background-repeat: no-repeat}#popHint .popRight {float: left; width: 5px; height: 24px; background-position: -10px -25px; background-repeat: no-repeat}#popHint .popAngle {clear: both; position: relative; height: 10px}#popHint .popAngle span {position: absolute; top: -3px; left: 15px; width: 7px; height: 13px; background-position: 0 -75px; background-repeat: no-repeat}#popHintText {float: left; color: #975400; height: 19px !important; height /**/: 24px; padding: 5px 0 0 0; white-space: nowrap; background-position: 0 -50px; background-repeat: repeat-x; overflow: hidden}#popHintText .popIcon {float: left; width: 15px; height: 10px; margin: 1px 3px 0 0}#popHint .wrong {background-position: 0 -90px; background-repeat: no-repeat}#popHint .right {background-position: 0 -105px; background-repeat: no-repeat}/* 这里可以自己扩展图标.(15*10) *//* popHint End */--></style><script language="javascript" type="text/javascript"><!--// 这里都是公用函数，挺多的...var// 获取元素$ = function(element) {return (typeof(element) == 'object' ? element : document.getElementById(element));},// 生成元素到refNodeappendElement = function(tagName, Attribute, strHtml, refNode) {var cEle = document.createElement(tagName);// 属性值for (var i in Attribute){cEle.setAttribute(i, Attribute[i]);}cEle.innerHTML = strHtml;refNode.appendChild(cEle);return cEle;},// 获取元素坐标getCoords = function(node){var x = node.offsetLeft;var y = node.offsetTop;var parent = node.offsetParent;while (parent != null){x += parent.offsetLeft;y += parent.offsetTop;parent = parent.offsetParent;}return {x: x, y: y};},// 事件操作(可保留原有事件)eventListeners = [],findEventListener = function(node, event, handler){var i;for (i in eventListeners){if (eventListeners[i].node == node && eventListeners[i].event == event && eventListeners[i].handler == handler){return i;}}return null;},myAddEventListener = function(node, event, handler){if (findEventListener(node, event, handler) != null){return;}if (!node.addEventListener){node.attachEvent('on' + event, handler);}else{node.addEventListener(event, handler, false);}eventListeners.push({node: node, event: event, handler: handler});},removeEventListenerIndex = function(index){var eventListener = eventListeners[index];delete eventListeners[index];if (!eventListener.node.removeEventListener){eventListener.node.detachEvent('on' + eventListener.event,eventListener.handler);}else{eventListener.node.removeEventListener(eventListener.event,eventListener.handler, false);}},myRemoveEventListener = function(node, event, handler){var index = findEventListener(node, event, handler);if (index == null) return;removeEventListenerIndex(index);},cleanupEventListeners = function(){var i;for (i = eventListeners.length; i > 0; i--){if (eventListeners[i] != undefined){removeEventListenerIndex(i);}}};/*********************************************- POPHint 弹出提示框- By Mudoo 2008.5**********************************************/function popHint(obj, msg, initValues) {var_obj = $(obj),_objHint = $("popHint"),_msg = msg,_init = initValues;// 初始化失败...if(_obj==undefined || _msg==undefined || _msg=="") return;// 设置初始值_init = _init==undefined ? {_type : "wrong", _event : "click"} : _init;// obj如果不可见。设置弹出对象为obj父元素if(_obj.style.display=='none' || _obj.style.visibility=='hidden' || _obj.getAttribute('type')=='hidden') _obj = _obj.parentNode;var_type = null,_event = null,_place = getCoords(_obj),_marTop = null,_objText = $("popHintText"),// 初始化init = function() {_hint = _obj.getAttribute("hint");if(_hint=="false") return;// 有的时候initValues不为空.但是只设置一个值...避免发所错误.再次设置初始值..._type = _init._type==undefined ? "wrong" : _init._type;_type = _type.toLowerCase();_event = _init._event==undefined ? "click" : _init._event;_event = _event.toLowerCase();/*******************************************popHtml******************************************<div id="popHint"><div id="popHeader"><div class="popLeft"></div><div id="popHintText"><span class=/"popIcon wrong></span>请输入您的用户名！</div><div class="popRight"></div></div><div class="popAngle"><span></span></div></div>*/// 好了.输出...var _Html = "<div id=/"popHeader/">" +"<div class=/"popLeft/"></div>" +"<div id=/"popHintText/"></div>" +"<div class=/"popRight/"></div>" +"</div>"+"<div class=/"popAngle/"><span></span></div>"if(_objHint==null) {_objHint = appendElement("div", {"id" : "popHint"}, _Html, document.body);_objHint.style.display = "none";_objText = $("popHintText");}show();},// 显示show = function() {_objHint.style.display = "";_marTop = _objHint.offsetHeight;_msg = "<span class=/"popIcon "+ _type +"/"></span>"+ _msg;_objText.innerHTML = _msg;_objHint.style.left = _place.x +"px";_objHint.style.top = (_place.y-_marTop+8) +"px";// 关闭触发事件switch(_event) {case "blur" :myAddEventListener(_obj, 'blur', hide);break;//default :case "click" :myAddEventListener(document, 'mousedown', hide);break;//这里可以自己扩展很多事件...}},// 关闭hide = function() {_objHint.style.display = "none";_objText.innerHTML = "";// 移除关闭触发事件myRemoveEventListener(_obj, 'blur', hide);myRemoveEventListener(document, 'mousedown', hide);};init();}/*********************************************- 这里是测试函数*********************************************/function testPopHint() {if($('Test2').value==''){popHint($('Test2'), 'Test2不能为空...', {_event : 'blur'});$('Test2').focus();return false;}if($('Test3').value==''){popHint($('Test3'), 'Test3也不能为空...', 'blur');$('Test3').focus();return false;}if($('Test4').value==''){popHint($('Test4'), 'Test4虽然看不见,但也不能为空...');$('Test4').value='填一点进去...';return false;}if($('Test5').value==''){popHint($('Test5'), 'Test5也一样...');return false;}}--></script></head><body><div class="case" style="text-align: center; font: 30px bold">首先默哀一分钟！！！</div><div class="case">好了.可以继续了.接下来调用方法.<br />===========================================================<br />popHint(Element, Hint, {Type, Event});<br />===========================================================<br />Element：弹出对象。根据它来定位的。<br />Hint：弹出的信息。<br />Type：弹出类型。其实说类型是不对的。只是定义个图标而已...(可自己在样式里加很多很多"类型")<br />Event：关闭触发事件。(默认click=document.onmousedown,blur=Element.onblur) 一样可以自己定义很多事件.</div><div class="case">测试：<input name="Test1_0" id="Test1_0" type="text" size="20" maxlength="20" onfocus="popHint(this, '失去焦点不会关闭提示.按TAB键看看');" value="" />blur不触发关闭<a href="###"> </a><br />测试blur关闭：<input name="Test1_1" id="Test1_1" type="text" size="20" maxlength="20" onfocus="popHint(this, '文本框失去焦点就关闭.', {_event : 'blur'});" value="" /></div><div class="case"><div>Test2：<input name="Test2" id="Test2" type="text" size="20" maxlength="20" value="" /></div><div>Test3：<input name="Test3" id="Test3" type="text" size="20" maxlength="20" value="" /></div><div>Test4：<input name="Test4" id="Test4" type="hidden" size="20" maxlength="20" value="" /></div><div>Test5：<input name="Test5" id="Test5" type="text" size="20" maxlength="20" value="" style="display:none" /></div><input name="" type="button" onclick="testPopHint();" value="测试" /></div></body></html></textarea>
提示：您可以先修改部分代码再运行
- Tip提示效果
- javascritp + CSS 自动提示效果 Tip
- 自动提示TIP效果，好看的title的效果
- tip提示
- CSS学习之纯CSS打造TIP提示效果，代替传统TITLE提示
- 输入框提示tip
- JCombox Tip提示
- JAVASCRIPT 动态TIP 提示
- Ext.tip.ToolTip 提示
- jquery tip提示框
- winform 提示tip
- 网页内容Tip效果
- js 文本框 内容提示 tip
- 桌面上的最小化提示Tip
- 工具提示（Tool tip）
- 控件上显示提示Tip
- Ext.tip.ToolTip 气泡提示
- 纯JS半透明Tip效果
- WSS 代码执行的权限提升
- 优秀网站源码、编程源码下载网站大集中
- 知识管理之一：目标驱动的知识管理
- Tomcat 集群实验
- Page_PreRender解惑
- Tip提示效果
- SQL Server 的通用分页显示存储过程（三种比较）
- 10个重要的算法C语言实现源代码：拉格朗日，牛顿插值，高斯，龙贝格，牛顿迭代，牛顿-科特斯，雅克比，秦九昭，幂法，高斯塞德尔
- Microsoft Access初级者入门讲座——（4）数据库的种类
- VB DAO 连接EXCEL文件方法（即.xls文件）
- tomcat,jsp,mysql中文乱码解决经验
- 一个求幂算法的研究
- SRM397 div2 500point(use bfs algorithm)
- Oracle 导入数据库备份 dmp 文件
