js tooltip之wz_tooltip使用方法和参数备忘
1、下载库
下载 wz_tooltip.zip(网站http://www.walterzorn.com/) 并解压,按 LGPL 发布。 在梁龙的博客上下载: wz_tooltip.zip
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" οnmοuseοver="Tip('Some text')" οnmοuseοut="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" οnmοuseοver="TagToTip('Span2')" οnmοuseοut="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 字符实体("e;)的形式来写,这是因为双引号已经作为 onmouseover 事件处理程序的定义字符,并且不能被嵌套。撇号(单引号)必须用前斜杠转义,因为撇号已经作为工具提示文字的定义字符。工具提示文字中的 HTML 标签属性定义字符,你可以使用 " 或 \'。比如:
正确:
<a href="index.htm" οnmοuseοver="Tip('Text with <img src=\'pics/image.jpg\' width=\'60\'>image.')" οnmοuseοut="UnTip()"> Homepage </a>
or
<a href="index.htm" οnmοuseοver="Tip('Text with <img src="pics/image.jpg" width="60">image.')" οnmοuseοut="UnTip()"> Homepage </a>
错误:
<a href="index.htm" οnmοuseοver="Tip('Text with <img src="pics/image.jpg" width="60">image.')" οnmοuseοut="UnTip()"> Homepage </a>
6、用 CSS 类格式工具提示
用 CSS 类可以简单地转换 DIV 或 SPAN 元素中的工具提示文字。你可以把标题文字做成一样(关于如何定义工具提示标题,请参见下面的命令参考中 TITLE 命令描述)。示例:
... οnmοuseοver="Tip('<div class="TipCls1">Text of tooltip number one</div>')" ...
... οnmοuseοver="Tip('<span class=\'TipCls2\'>Text of tooltip number two</span>')" ...
... οnmοuseοver="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" οnmοuseοver="Tip(txt1)" οnmοuseοut="UnTip()">Link 1</a>
...
<a href="b.htm" οnmοuseοver="Tip(TooltipTxt('second'))" οnmοuseοut="UnTip()">Link 2</a>
...
<a href="c.htm" οnmοuseοver="Tip(TooltipTxt('third'))" οnmοuseοut="UnTip()">Link 3</a>
...
</body>
</html>
8、用命令单独自定义工具提示
全 局默认配置对所有的工具提示有效,可以在 JavaScript 文件中改变它,位于 GLOBAL TOOLTIP CONFIGURATION 一节。要单独配置工具提示,你可以使用下面列出的命令。这些独立的命令重写 wz_tooltip.js 中的全局配置。它们可以通过 onmouseover 事件处理程序的 Tip() 或 TagToTip() 函数传递。每一个命令必须带有值,用逗号隔开:
οnmοuseοver="Tip('Some text', ABOVE, true)"
或者
οnmοuseοver="TagToTip('SomeID', TITLEFONTCOLOR, '#CCFFCC')"
多个命令构成一个逗号分隔的命令-值对列表。 命令顺序无所谓。示例:
οnmοuseοver="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 元素上显示工具提示,即使是在另一个工具提示中。... οnmοuseοver="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 工具提示的宽度。值:任意数值。
转载于:https://www.cnblogs.com/myphoebe/archive/2012/03/15/2398289.html
js tooltip之wz_tooltip使用方法和参数备忘相关推荐
- js数组获取index_通过事例重温一下 JS 中 常见的15 种数组操作(备忘清单),收藏...
数组是 JS 中广泛使用的数据结构.数组对象提供了大量有用的方法,如array. forEach().array.map()等来操作数组. 在实战中,我经常对数组可能的操作和相应采用哪个更好的方法不知 ...
- ASP.NET MVC中在Action获取提交的表单数据方法总结 (4种方法,转载备忘)
有Index视图如下: 视图代码如下: [html] view plaincopyprint? <%@ Page Language="C#" MasterPageFile=& ...
- Lodop插件中的StartPrint方法的用法,备忘
Lodop中的StartPrint方法详解: 参数: PrintName:打印名称, pageWidth:纸张尺寸宽 pageHeight:纸张尺寸高 StyleContent:模板json字符串 I ...
- MVC 使用 Webuploader 插件 传递额外参数 备忘笔记
// 实例化uploader = WebUploader.create({pick: {id: '#filePicker-2',label: '点击选择图片'},formData: {key: $(& ...
- js map 排序_数组方法写给女友的一系列 JS 数组操作(建议收藏 | 内附思维导图)...
前言 最近和女友,咳咳...(说出来可能会被打s)学习JS数组方法,用几个字形容的话就是听说过,实际使用.遇到的时候就分不清具体方法会得到怎样的结果. 今天我将通过这篇文章好好整理一下关于JS数组的方 ...
- 子页面调用父页面的js方法或参数(iframe.contentWindow)
子页面调用父页面的js方法或参数 子页面调用父页面的参数 父页面调用子页面的参数或方法 相关链接 子页面调用父页面的参数 window.parent.aa();//调取aa函数 window.pare ...
- js快捷获取超链接参数和修改超链接(新增URLSearchParams方法获取参数)
//https://www.baidu.com?sjry=111function GetRequest() {var url = location.search;var theRequest = ne ...
- iOS与JS交互的4种方法
iOS与JS交互的方法: 1.拦截url(适用于UIWebView和WKWebView) 2.JavaScriptCore(只适用于UIWebView,iOS7+) 3.WKScriptMessage ...
- js创建对象的几种方法
工厂模式 工厂模式非常直观,将创建对象的过程抽象为一个函数,用函数封装以特定接口创建对象的细节.如下所示: function createStudent(name,sex,grade){ var o ...
最新文章
- 简述mysql半同步复制—semisync
- python自学步骤-学习Python最正确的步骤(0基础必备)
- 30例 | 一文搞懂python日期时间处理
- VTK:网格之DeformPointSet
- 游戏UI设计干货:怎么让游戏界面更具科技感?
- pythoncsv格式列变换_用Python将csv行转换为列
- 【Kafka】kafka消费报错 no brokers found in zk
- html京东快报,练习3:仿京东快报.html
- FisherYates费雪耶兹随机置乱算法
- 作为Scala语法糖的设计模式
- es6中一些基本的使用方法
- greensock下载_初识GreenSock的“ GSDevTools”
- python源代码程序编译后文件扩展名_Python源代码程序编译后的文件扩展名为_________。...
- php支付宝发卡源码,个人发卡系统支付宝即时到帐大气源码
- 一份完整的数据分析师成长书单
- 安防想要抢食智能家居大蛋糕 应该如何转型?
- 世纪互联评测至强5500 总结云平台经验
- SwiftUI iOS 完整项目之基于CoreData构建购物计划App(教程含源码App Store上线app)
- 阿里资深技术专家带你聊一聊——服务端的接口测试...
- 深度学习基础-经典模型总结
热门文章
- UnityParticle2:5x基础模块
- UnityShader18.1:立方体贴图(下)
- 人群与网络:网络与图论
- bzoj 3781: 小B的询问(莫队)
- bzoj 1635: [Usaco2007 Jan]Tallest Cow 最高的牛
- json标注工具与labelme安装
- 高一计算机word的试题,高一年级信息技术期末考试复习题
- java扫描器创建,java – 如何创建条码扫描器(Android)?
- WebApi系列~HttpClient的性能隐患(转)
- VScode 同时开多个窗口