wz_tooltip使用备忘

bsr1983

浏览: 1117302 次
性别:
来自: 北京

最近访客更多访客>>

zxpang

dyh_it

learning_han

lobskiwi

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javascript

JavaScript CSS HTML IE 脚本

如何使用这个脚本

1、下载库

下载 wz_tooltip.zip(网站http://www.walterzorn.com/) 并解压，按 LGPL 发布。

2、将 wz_tooltip.js 连接到 HTML 文件中

复制下面的行到 BODY 节中，最好是紧跟在开标签 <body> 后面。

<script type="text/javascript" src="wz_tooltip.js"></script>
如果必要，修改路径 src="wz_tooltip.js" 为 JavaScript 文件。注意：使用下载的文件，不要强行链接我站（指 walterzorn 网站）的 wz_tooltip.js 文件。

3、在 onmouseover 事件处理程序中标明工具提示文字

每一个显示工具提示的 html 标签需要 onmouseover 和 onmouseout 属性，如下：

<a href="index.htm" onmouseover="Tip('Some text')" onmouseout="UnTip()">Homepage </a>
就这样，没有 title 属性，没有包含 DIV。你可以看到，显示的文字必须用单引号引起来，然后传递给 Tip() 函数。注意：工具提示文字中的每个单引号（撇号）必须用反斜杠转义。比如：

Tip('This text won\'t trigger a JavaScript error.');
在 onmouseout 事件处理程序中调用 UnTip() 来再次隐藏工具提示。

当然你也可以为 Tip() 和/或 UnTip() 使用不同的事件处理程序。

扩展配置

4、选择：将 HTML 元素转换到工具提示中

为了代替直接在工具提示中使用文字，你可以标识特定的 HTML 元素以将其转换到工具提示中。在某些方面这是有益的。

•你可以在工具条中拥有十分重要的东西，而一个页面的 HTML 内容（不是 JavaScript 内容）对网络搜索引擎是有益的。
•
如果在网页中放置恰当，对于禁用了 JavaScript 的用户来说，这些内容仍然是可见的。
•同样，HTML 元素也可以一直显示；比如，如果你想在不同的地方的工具提示中显示它的内容。
•这样可以轻松地定义 HTML 元素然后直接转换成工具提示中复杂的 HTML，比 JavaScript 字符串轻松多了。
要定义用 HTML 创建的工具提示，只需要通过 TipToTip() 函数把想要的 HTML 标签的 ID 传过去。示例：

<a href="index.htm" onmouseover="TagToTip('Span2')" onmouseout="UnTip()">Home page </a>
...
<span id="Span2">This is some comment<br>about my home page</span>
...
在这个示例中，链接上的工具提示将显示从 <span> 元素抓取的内容。注意只是包括换行标签的内部内容会被拷贝，而 SPAN 标签本身和任何它上面的版式不会被拷贝。

当页面正在读取时，Tooltip Library 自动隐藏转换为工具提示的 HTML 元素（比如：上面示例中的 <span> 元素）。要隐藏自动隐藏我，在 wz_tooltip.js 的全局工具提示配置文件中设置 TagsToTip 变量为 false（预设默认值：true）。如果喜欢，你也可以通过设置它们的 CSS 'display' 属性为 'none' 来自行隐藏这些 HTML 元素。

另一方面的提示：特别是在 IE 中，关闭自动隐藏特性会获得更好的页面读取展现效果。

5、工具提示中的 HTML

在工具提示中使用图像，必须在 <img> 标签中标明 width 和 height 属性。以便让脚本准确测量工具提示的大小。

工具提示文字中的双引号必须以 HTML 字符实体（&quote;）的形式来写，这是因为双引号已经作为 onmouseover 事件处理程序的定义字符，并且不能被嵌套。撇号（单引号）必须用前斜杠转义，因为撇号已经作为工具提示文字的定义字符。工具提示文字中的 HTML 标签属性定义字符，你可以使用 " 或 \'。比如：

正确：
<a href="index.htm" onmouseover="Tip('Text with <img src=\'pics/image.jpg\' width=\'60\'>image.')" onmouseout="UnTip()"> Homepage </a>
or
<a href="index.htm" onmouseover="Tip('Text with <img src="pics/image.jpg" width="60">image.')" onmouseout="UnTip()"> Homepage </a>

错误：
<a href="index.htm" onmouseover="Tip('Text with <img src="pics/image.jpg" width="60">image.')" onmouseout="UnTip()"> Homepage </a>
6、用 CSS 类格式工具提示

用 CSS 类可以简单地转换 DIV 或 SPAN 元素中的工具提示文字。你可以把标题文字做成一样（关于如何定义工具提示标题，请参见下面的命令参考中 TITLE 命令描述）。示例：

... onmouseover="Tip('<div class="TipCls1">Text of tooltip number one</div>')" ...
... onmouseover="Tip('<span class=\'TipCls2\'>Text of tooltip number two</span>')" ...
... onmouseover="Tip('Tooltip number 3', TITLE, '<div class=\'TitleCls\'>Some Title</div>')" ...
7、通过变量或函数调用获得工具提示内容

为了代替用单引号结束字符串，Tip() 很好地接受其它地方定义的变量或调用一个函数，比如 <script> 块中或单独的 JS 文件。这与通过 Tip() 或 TagToTip() 命令是相同的（请见下面列出的命令）。因为，每次将要显示工具提示时，它的内容或格式可以动态建立。

示例：

<html>
<head>
...
<script type="text/javascript">
var txt1 = "This is the text of the first tooltip";
function TooltipTxt(n)
{
    return "This is the text of the " + n + " tooltip";
}
</script>
</head>
<body>
<script type="text/javascript" src="wz_tooltip.js"></script>
...
<a href="a.htm" onmouseover="Tip(txt1)" onmouseout="UnTip()">Link 1</a>
...
<a href="b.htm" onmouseover="Tip(TooltipTxt('second'))" onmouseout="UnTip()">Link 2</a>
...
<a href="c.htm" onmouseover="Tip(TooltipTxt('third'))" onmouseout="UnTip()">Link 3</a>
...
</body>
</html>
8、用命令单独自定义工具提示

全局默认配置对所有的工具提示有效，可以在 JavaScript 文件中改变它，位于 GLOBAL TOOLTIP CONFIGURATION 一节。要单独配置工具提示，你可以使用下面列出的命令。这些独立的命令重写 wz_tooltip.js 中的全局配置。它们可以通过 onmouseover 事件处理程序的 Tip() 或 TagToTip() 函数传递。每一个命令必须带有值，用逗号隔开：

onmouseover="Tip('Some text', ABOVE, true)"
或者
onmouseover="TagToTip('SomeID', TITLEFONTCOLOR, '#CCFFCC')"
多个命令构成一个逗号分隔的命令－值对列表。命令顺序无所谓。示例：

onmouseover="Tip('Some tooltip text', SHADOW, true, TITLE, 'Some Title', PADDING, 9)"
•ABOVE 工具提示在鼠标指针的下边。值：true 或 false。
•BGCOLOR 工具提示背景颜色。值：HTML 颜色，用单引号，比如 '#D3E3F6' 或 'DarkCyan'，或空字符串 '' 作为无背景。
•BGIMG 背景图片。
•BORDERCOLOR 边框颜色。值：HTML 颜色。
•BORDERSTYLE 边框样式。值：CSS 边框样式。
•BORDERWIDTH 工具提示边框粗细。值：数值 >= 0，默认 1。
•CENTERMOUSE 鼠标位于工具提示的中间。
•CLICKCLOSE 用户在工具提示或文档中单击鼠标时关闭工具提示。值：true 或 false。
•CLICKSTICKY 用户点击触发工具提示的元素时仍然显示工具提示。
•CLOSEBTN 在标题栏中显示关闭按钮。值：true 或 false。
•CLOSEBTNCOLORS 关闭按钮的颜色。数组，分别为：背景色、文字色、鼠标移上时高亮背景色、鼠标移上时高亮文字颜色。如：['', '#66ff66', 'white', '#00cc00']。
•CLOSEBTNTEXT 关闭按钮文字。比如 'Click Me'。
•COPYCONTENT 只对 TagToTip() 有效，表示是否把 HTML 元素复制到工具提示，若为 false，表示移动到。如果是复制到，其中 input 的 value 都将得到保持。
•DELAY 延迟多少显示工具提示。毫秒。值：数值 >= 0。
•DURATION 延迟多少的时间工具提示隐藏。毫秒。
•EXCLUSIVE 只有当前工具提示隐藏后才显示其它工具提示。值：true 或 false。
•FADEIN 渐显，某些浏览器不支持。值：数值 >= 0。
•FADEOUT 渐隐，某些浏览器不支持。值：数值 >= 0。
•Fix（模式 1）在修定的 [x,y] 坐标显示工具提示，如：[230, 874]。
•Fix（模式 2）在任何 HTML 元素上显示工具提示，即使是在另一个工具提示中。... onmouseover="Tip('Some text', FIX, ['PurpleSpan', 0, 5])" ... <span id="PurpleSpan">HTML element to show the tooltip on</span>
•FOLLOWMOUSE 鼠标跟随。值：true 或 false。
•FONTCOLOR 字体颜色。
•FONTFACE 字体名称。
•FONTSIZE 字体大小。值：带单位的大小。
•FONTWEIGHT 字体加重。值：'normal' or 'bold'。
•HEIGHT 工具提示的高度。值：任意数值。
•JUMPHORZ 如果为 true，工具提示碰触到窗口边缘时，跳转到水平方向的另一边。
•JUMPVERT 如果为 true，工具提示碰触到窗口边缘时，跳转到竖直方向的另一边。
•LEFT 工具提示在鼠标指针的左边。值：true 或 false。
•OFFSETX 在鼠标指针上的水平偏移。
•OFFSETY 在鼠标指针上的竖直偏移。
•OPACITY 透明度。值：0-100，0 完全透明。
•PADDING 工具提示的内边距。值：数值 >= 0。
•SHADOW 是否显示阴影。
•SHADOWCOLOR 阴影颜色。
•SHADOWWIDTH 阴影大小。值：数值 >= 0。
•STICKY 工具提示一直停在其初始位置，直到另一个工具提示触发。值：true 或 false。
•TEXTALIGN 文字排列方式。
•TITLE 显示标题栏。值：标题文字。
•TITLEALIGN 标题文字排列方式。
•TITLEBGCOLOR 标题背景颜色。
•TITLEFONTCOLOR 标题字体颜色。
•TITLEFONTFACE 标题字体名称。
•TITLEFONTSIZE 标题字体大小。值：带单位的大小。
•TLEPADDING 标题的内边距。值：数值 >= 0。
•WIDTH 工具提示的宽度。值：任意数值。

给弹出的tooltip添加拖拽事件
function addDragEvent()
{
//tooltip的标题
var WzTiTlI=document.getElementById('WzTiTlI');
//tooltip的DIV
var WzTtDiV=document.getElementById('WzTtDiV');
WzTiTlI.onmousedown=function(){
var s = WzTtDiV.style;
var b = document.body;
var x = event.clientX + b.scrollLeft - s.pixelLeft;
var y = event.clientY + b.scrollTop - s.pixelTop;
var m = function(){
   if(event.button == 1){
    s.pixelLeft = event.clientX + b.scrollLeft - x;
    s.pixelTop = event.clientY + b.scrollTop - y;
   }else {
    document.detachEvent("onmousemove", m);
   }
}
document.attachEvent("onmousemove", m)
if(!this.z)
   this.z = 999;
s.zIndex = ++this.z;
event.cancelBubble = true;
};
}

分享到：

Formatter学习备忘 | 折翅的蝴蝶

2010-01-22 14:23
浏览 2474
评论(0)
分类:Web前端
查看更多

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论