- 浏览: 171360 次
- 性别:
- 来自: 福州
文章分类
最新评论
-
mncc:
太好了!!!Mark一下!不过貌似那个冒泡的还少个右下角吧? ...
Google Maps 图标地址收藏 -
ivorytower:
去年5月捡了命回来,现在不评论那些豆腐渣工程……
汶川地震留给我们什么?单单建什么地震纪念馆是没有用的 -
lgx2351:
wtusmchen 写道blog写的不错啊,以后多过来学习:) ...
js学习笔记2-函数 -
wtusmchen:
blog写的不错啊,以后多过来学习:)
js学习笔记2-函数
在应用开中很常用的功能是tip,比如鼠标放在某个需要说明的元素时,tip出元素的一些属性,或者是在一个主表的grid里当鼠标移到某一行,tip出这一行的所关联的子表的grid,使得用户一目了然。tip的功能这么常用,我们可以用一些已有的js库来实现,比如 wz_tooltip.js,它可以实现较为强大的tip功能。关于wz_tooltip.js的知识就不说了,参考它的官方网站所有的api都说得很详细了。
当然,如果我想自己写一个较为简单的tip也是可以的。自己实现的话,对于css的知识,鼠标事件等知识会理解得更加深刻,比如对鼠标事件的定位等。下面,我们来说说怎么实现自己下定义的tip。
function Tooltip() { this.tooltip = document.createElement("div"); this.tooltip.style.position = "absolute"; this.tooltip.style.visibility = "hidden"; this.tooltip.className = "tooltipShadow"; this.content = document.createElement("div"); this.content.style.position = "relative"; this.content.className = "tooltipContent"; this.tooltip.appendChild(this.content); } Tooltip.prototype.show = function(text, x, y) { this.content.innerHTML = text; this.tooltip.style.left = x + "px"; this.tooltip.style.top = y + "px"; this.tooltip.style.visibility = "visible"; if (this.tooltip.parentNode != document.body) document.body.appendChild(this.tooltip); }; Tooltip.prototype.hide = function() { this.tooltip.style.visibility = "hidden"; };
以上代码分析如下:
1、 Tooltip()构造函数的主要作用是里去create两个div,设置完两个div的className和position后,把第二个存放内容的 div append到第一个阴影div里。注意的是阴影div的定位设置为绝对定位(absolute),而内容div的定位设置为相对定位(relative),内容div是相对于阴影div来定位的,只要设置好了阴影div的位置,则内容div的位置也可以定下来了。关于位置的不同的值的知识见后面的相关知识点。
2、Tooltip()构造函数做了挺多工作,而之前一般我的代码里构造函数一般只进行类实例变量的赋值,很少有做较多的事情。学习这种写法。
3、 show()方法在div已创建的基础上,主要是设置div的位置,内容,并append到document.body上去。注意条件语句:this.tooltip.parentNode != document.body,通过这句话来得到是否把tooltip这个div创建到body上去了,如果没才去append。
4、其中的className的css代码如下:
.tooltipShadow { background: url(shadow.png); } .tooltipContent { left: -4px; top: -4px; background-color: #ff0; border: solid black 1px; padding: 5px; font: bold 10pt sans-serif; }
上面已经实现了tip的显示与隐藏,接下来把鼠标事件考虑进去:
Tooltip.X_OFFSET = 25; Tooltip.Y_OFFSET = 15; Tooltip.DELAY = 500; Tooltip.prototype.schedule = function(target, e) { var text = target.getAttribute("tooltip"); if (!text) return; var x = e.clientX + Geometry.getHorizontalScroll( ); var y = e.clientY + Geometry.getVerticalScroll( ); x += Tooltip.X_OFFSET; y += Tooltip.Y_OFFSET; var self = this; var timer = window.setTimeout(function( ) { self.show(text, x, y); },Tooltip.DELAY); if (target.addEventListener) target.addEventListener("mouseout", mouseout,false); else if (target.attachEvent) target.attachEvent("onmouseout", mouseout); else target.onmouseout = mouseout; function mouseout( ) { self.hide( ); window.clearTimeout(timer); if (target.removeEventListener) target.removeEventListener("mouseout", mouseout, false); else if (target.detachEvent) target.detachEvent("onmouseout",mouseout); else target.onmouseout = null; } }
以上代码分析:
1、通过getAttribute()方法来得到标签的属性值。
2、当值为空是return,不执行tip事件
3、Geometry.getHorizontalScroll()方法见Geometry类,其它博客有专门的说明。
4、setTimeout()来过段时间执行tip,但当onmouseout时,把这个timout要clear掉。
5、注意代码attachEvent()、detachEvent()的浏览器兼容性的写法。
其它,顺便总结一个定位的几种值的含义:
1、 static:
静态定位。它是默认值
,根据文档内容的正常流动来定位元素。
使用静态定位的元素不是DHMTL元素
,不能用top、left等属性,也就是说,如果你要定位一个元素,必须设置为除static外的值,一般我们用absolute来定位,这也是程序中所有涉及到需要位置的元素时都要设置position值的原因。
2、absolute:
绝对定位。设置元素的相对于它的包含元素的位置。
绝对定位的元素独立于其它元素来定位,即绝对定位对于其它元素无关,它也不属于静态定位的元素流。
绝对定位的元素可以相对于文档的<body>标记来定位。
如果它嵌套在另一个绝对定位的元素中(这另一个元素也要绝对定位),则相对于它个元素来定位。
它是DHMTL里最常用
的定位方式。
3、fixed:
4、relative:
当元素的position为relativ时,它首先根据常规文档流来布局元素,然后相对常规流中的位置进行调整。
在常规文档流中分配给它的空间仍然分配给它,它两边的元素也不会向它靠近来填充它的空间,但它们也不会从元素的新位置被挤走。
发表评论
-
在一个定时器里频繁发ajax请求
2011-04-11 10:07 1730在一个定时器里频繁发ajax请求,最好设置一个全局变量,当请求 ... -
前台开发总结
2011-01-12 10:35 7691、如果在频繁地发送ajax请求,最好在前面的请求发送完成返回 ... -
TD中长串英文字母不能自动换行而汉字却可以自动换行
2010-12-23 10:06 1911例如:aaaaaaaaaaaaaaaaaaaaaaaaaaaa ... -
Google Maps 图标地址收藏
2010-11-27 10:46 2774Google Maps 图标 - ... -
js乱码
2010-05-30 16:08 01)在同一个工程下没有问题,可是如果跨工程的话,且引入的js有 ... -
ajax请求提供接口的讨论
2009-12-26 15:33 1027要提供一个查询某点周边的最近设施的功能给同事,在gis端的实现 ... -
ie8与ie6取form的讨论
2009-12-16 10:49 1367多frames下,在ie6下通过frames[i]为取得某个f ... -
把一个jsp分为两个div布局记录
2009-12-15 16:41 5584一个jsp页面想分成左右两块分开显示两块内容。这种效果很不错, ... -
js取整数四舍五入
2009-11-21 22:08 3383http://blog.csdn.net/Feiin/arch ... -
读“javascript权威指南”笔记(更新中。。。)
2009-11-14 13:00 0第一章: 第二章: 第三章: 第四章: 第五章: 第 ... -
grid拖动列头改变列宽
2009-10-21 17:19 1561grid中,当某一单元格的内容很多时,要能够拖动grid标题行 ... -
js常用功能-drag功能总结
2009-09-18 13:50 1192在做web开发中,拖动一个元素是很常见的功能,特别是对于浮动层 ... -
js学习笔记4-事件和事件处理
2009-09-16 22:18 9831. 总述: 本章将讲三种完全不同的不兼容的事件处理模型 ... -
构造结果集实现类似grid显示
2009-09-16 20:24 866在做应用开发中,最经常的操作是到后台数据库去获取数据,在前台用 ... -
grid里用右键来实现功能菜单
2009-09-15 20:22 1175在自定义grid中,如果一个grid的列很多,窗口无法显示这么 ... -
js学习笔记3-构造函数、类和原型
2009-09-06 16:18 26543. 构造函数、类和原型总述:对象是我们很熟悉的,常在程序中用 ... -
gird分页时form与url参数的探讨
2009-09-05 22:35 1139大家可能很常用一个查 ... -
js学习笔记2-函数
2009-09-02 23:01 13762. 函数 2.1函数直接量函数直接量是用作表达式,而不是用作 ... -
下拉提示文本框
2009-08-24 18:46 1676文本框在当用户输入时,常常需要把相近的信息提示给用户,以方便用 ... -
js学习笔记1-对象和数组
2009-08-19 23:03 8411. 对象和数组 总述对象 ...
相关推荐
Optimal Tip-To-Tip Efficiency(弟高值d2f算法).pdf Optimal Tip-To-Tip Efficiency(弟高值d2f算法).pdf Optimal Tip-To-Tip Efficiency(弟高值d2f算法).pdf Optimal Tip-To-Tip Efficiency(弟高值d2f算法).pdf ...
前端项目-d3-tip,Tooltips for d3 svg visualizations
前言d3.v6 引入了一些更改,其中一些与 d3-tip 相关。 那些是: 全局 d3.event 已被删除从现在开始,每个事件处理程序都将接收事件作为第一个参数位于此存储库下的 d3-tip 版本已适应此更改。 它还修复了一个恼人的...
向用户解释一些功能是有用的。 安装 要安装最新版本的react-native-tip您只需要运行: npm install --save react-native-tip 要么 yarn add react-native-tip 试试看 你可以在上找到上面的。 基本用法 导入 ...
SelfDM-TIP-main.zip
Oracle-for-Tiptop-系统培训教程-PPT课件.ppt
技轉課程-TIPTOP GP單檔作業.ppt
鼎新-ERP(-TIPTOP-60-)教育训练-会计总帐.pptx
TIPTOP GP 教育訓練PPT - TIPTOP GP Debugger
link rel =" stylesheet " href =" ./node_modules/markdown-tip/dist/markdown-tip.css " />vuejs组件 npm i markdown-tip-vue import { MarkdownTip } from "markdown-tip-vue"app . component ( 'markdown-...
一种关于裂纹尖端应力奇异性及其消除的新视角,申振,刘卫群,应力奇异性,即当无穷远处承受非常小的载荷时,裂纹尖端处的应力具有无限大的数学解。本文根据Westergaard函数和Williams特征函数推导�
pandoc-latex-tip是一个过滤器,用于使用流行的图标集合在边距中添加图标工具提示。 它使用icon_font_to_png包来生成即时图像。 文献资料 请参阅。 用法 要应用过滤器,请对pandoc使用以下选项: --filter pandoc-...
ERP企业资源规划概述,在企业中的重要性等等。
drm-tip:DRM当前的发展和夜间树木
react-native-tip React Native Tip 是一个受 MaterialUI-Tooltip 启发的简单包,可帮助您向用户显示快速提示并突出显示应用程序中的一些重要项目。 向用户解释一些功能是有用的。 安装 要安装最新版本的 react-...
00524 用友erp操作流程培训资料-TIPTOP GP 教育训练应收管理系统(AXR)(PPT 31页).ppt
The air cavity is fabricated at the fiber-tip by splicing a single-mode fiber and a hollow-core photonic crystal fiber (HC-PCF), with un-collapsed section of the HC-PCF being cleaved. Application of ...
编译JDK时,需要用到的测试工具,用来验证JDK代码是否正确
android-tip-calculator