`
lucane
  • 浏览: 121740 次
  • 性别: Icon_minigender_1
  • 来自: 江湖
社区版块
存档分类
最新评论

Tip Box,自定义html标签属性

阅读更多
<input type="text" name="usr005" desc="必须输入中文!不多于10个中文字符!" />

// 修改文本框的属性
	(function() {
		var _inputList = document.getElementsByTagName("INPUT");
		var _selectList = document.getElementsByTagName("SELECT");
		var _areaList = document.getElementsByTagName("TEXTAREA");
		
		for (var i = 0; i < _inputList.length; i++) {
			var obj = _inputList[i];
			// onfocus在firefox的text失效bug
			obj.onmouseover = function(e) {
				var _obj = this;
				var desc = _obj["desc"] || _obj.getAttribute("desc");
				e = e || window.event;

				if(desc == undefined) {
					return;
				}
				
				var _div_id = "altas_" + _obj["name"];
				
				var desc_div = document.getElementById(_div_id);
			
				if(!desc_div) {
					desc_div = document.createElement("DIV");
					desc_div.id = _div_id;
				}
				
				desc_div.style.top = e.clientY + "px";
				desc_div.style.left = e.clientX + "px";				
				desc_div.setAttribute("class", "promote");  
				desc_div.innerHTML = desc;	

				desc_div.style.display = "block";	
				document.body.appendChild(desc_div);
			};
			
			obj.onmouseout = function() {
				var _obj = this;
				var _id = "altas_" + _obj["name"];
				var _tip = document.getElementById(_id);
				// 如果该text有tipbox,则隐藏该tipbox
				_tip && (_tip.style.display = "none");
			};
		}
	})();


这样做产生了很多问题,页面会有n多div,有没有名字污染的可能?

多个同名的text会有相同id的div提示框

事件绑定需要改进,需要支持一个事件上绑定多个函数



分享到:
评论

相关推荐

    Qt实现的自定义tip

    本篇文章将详细探讨如何在Qt中实现一个自定义的提示框(Tip),即“自定义tip”。 首先,我们要理解“tooltip”在UI设计中的作用。Tooltip是当鼠标悬停在某个控件上时,会短暂显示的一段文字信息,用于提供关于该控件...

    winfrom自定义鼠标tip窗体,自定义winfrom 窗体

    本教程将围绕“自定义WinFroms窗体”和“自定义Tip窗体”这两个核心概念展开,通过一个名为`ToolTipExDemo`的示例项目,详细介绍如何创建和使用自定义的鼠标提示窗体。 1. 自定义WinForms窗体: 在WinForms中,...

    C#的自定义Tip窗体

    C#的自定义Tip窗体

    不规则窗口示例, 自定义tip控件

    不规则窗口和自定义tip控件是提高用户体验和界面独特性的关键技术。以下是对这两个概念的详细解释以及如何实现它们。 不规则窗口,也称为形状窗口或自由形状窗口,是指那些形状不局限于矩形或圆形的传统窗口,可以...

    Tip类demo Tip类demo

    这可以通过设置`android:clickable="true"`和`android:focusable="true"`属性,以及在自定义类中处理触摸事件来实现。 8. **生命周期管理**: 如果Tip是基于`Fragment`或`DialogFragment`创建的,需要注意其生命...

    D3 Tip 获取 X,Y

    5. **自定义样式**:D3 Tip允许你自定义提示框的CSS类,以便调整其外观,如颜色、字体大小等。 6. **动态更新内容**:如果图形元素的X和Y坐标是动态更新的,那么提示框的内容也需要随之更新。你可以根据数据的变化...

    div+tip(title)

    4. **自定义标题**:`data-title` 属性可能被用作提示框的标题来源,可以通过JavaScript读取并显示在 `tip-content` 中。例如: ```javascript var title = $(this).closest('.tip-container').attr('data-title');...

    tip标签提示框/类bootstrap

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

    QT自定义dialog提示窗

    在QT编程中,自定义对话框(Dialog)是一种常见的需求,它允许用户与应用程序进行交互,展示特定的信息或接收用户的输入。本项目“QT自定义dialog提示窗”着重于通过纯代码方式创建对话框,无需使用UI文件。下面将...

    Jquery Tip 插件使用

    默认的CSS样式可能无法满足所有设计需求,开发者可以通过修改`jquery.tip.css`或在项目中创建新的CSS类来实现自定义样式。例如,改变提示框的背景颜色: ```css .jquery-tip { background-color: #ff6600; /* ...

    自定义文件夹栏目 自定义搜索管理器 信息条提示(Infotip) 得到BMP文件大小 DLL,EXE文件的文件导入表IAT 其他类型的外壳扩展

    本文将深入探讨几个关键知识点,包括自定义文件夹栏目、自定义搜索管理器、信息条提示(Infotips)、获取BMP文件大小、DLL与EXE文件的导入表IAT,以及外壳扩展Shell Extension插件编程。 首先,自定义文件夹栏目是...

    TIP.html

    tip.html 请划过或点击下面带框的文本

    tiptop中如何使用TextEdit来显示html网页

    4. 编写代码:最后一步是编写代码,虽然这部分内容没有被完全揭露,但我们可以推断需要在tiptop的某个可执行脚本或程序中调用TextEdit组件,并通过它来加载显示之前上传的HTML文件。这可能涉及到调用tiptop的相关API...

    VC++ 自定义浮动的 鼠标提示功能 InfoTip

    VC++ 自定义浮动的 鼠标提示功能 InfoTip VC++浮动的鼠标提示功能,自定义的,从外观就可以看出来,不过美工水平有限,让大家风笑了,不过程序提供了一种实现浮动提示的思路,美工好的朋友完全可以制作出更加符合你...

    jquery.tip 点击加分效果,漂亮的tip

    2. **自定义内容**:允许开发者根据需要填充提示框的内容,可以是文本、图片、HTML结构等。 3. **位置控制**:tip可以被设置在触发元素的上方、下方、左侧或右侧,以适应不同的布局需求。 4. **动画效果**:平滑的...

    jQuery EasyUI 扩展(tip和form)

    在实际开发中,你可以根据项目需求对 Tip 和 Form 功能进行扩展,例如创建自定义插件,增强表单的验证能力,或者调整 Tip 的动画效果。通过熟练掌握这些扩展技巧,你的网页应用将拥有更佳的用户体验和更高的开发效率...

    tiptop知识文件

    【标签】"tiptop"再次强调了主题,表明所有内容都与这个关键词紧密相关。 【压缩包子文件的文件名称列表】中的"T03-└│½µ½ⁿ╛╔├■"和"T02-恨瞶ゅン摸"看起来像是经过编码或特殊格式化的文件名。在IT领域,...

    Tiptop&Easyflow集成说明_新单据集成样例.pdf

    4. **设置单据性质**:设定单据的签核属性,选择需要进行签核操作的单据类型。 5. **维护抛转信息**:配置单据及栏位的抛转信息,生成抛转作业源文件。 6. **修改抛转作业源文件**:根据集成需求调整生成的文件...

    完全CSS写的鼠标悬停tip效果

    总结起来,这个完全CSS写的鼠标悬停tip效果通过利用CSS的伪类选择器和定位属性,实现了当鼠标悬停在链接上时,一个带有自定义样式的提示信息框出现的效果。这种方法在现代网页设计中很常见,因为它可以为用户提供...

    前端项目-d3-tip.zip

    d3-tip库主要解决的问题是在D3.js图表中添加自定义的提示信息,这些提示通常在鼠标悬停在特定数据点上时出现,提供额外的数据细节。通过d3-tip,开发者可以轻松创建出具有专业外观和丰富信息的提示框,使得图表更具...

Global site tag (gtag.js) - Google Analytics