Dojo 悬停提示 dijit.Tooltip

最新推荐文章于 2017-01-29 19:13:53 发布

原创最新推荐文章于 2017-01-29 19:13:53 发布 · 3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#dojo #import #input #function #class #html

Javascript 同时被 2 个专栏收录

24 篇文章

订阅专栏

Dojo

14 篇文章

订阅专栏

本文介绍了 Dojo 框架中的 Tooltip 控件，详细解释了如何使用该控件为 Web 应用程序中的元素添加美观且实用的提示信息。文章通过示例展示了 Tooltip 的基本用法，并介绍了 MasterTooltip 的高级功能。

图：

代码：

参考地址：

http://bugs.dojotoolkit.org/browser/dijit/trunk/tests/test_Tooltip.html?rev=10974

3. 给客户一个提示：dijit.Tooltip
在大多数业务系统中，有很多表单的填写都很复杂，有些文本框的含义比较难理解。为了给使用者一个提示，html默认有一个title属性，比如<div title=’haha’>test</div>，如果设置了这个属性，浏览器会在你鼠标停留在这个元素上的时候，给出你一个提示。
后来微软为了解决<select>控件的一个bug，又提供了window.createPopup()方法，这个方法可以定制一个popup窗口。也可以很好的显示提示信息。
现在dojo为我们提供了一个更美观，更实用，更方便的控件。Dijit.Tooltip控件的外观可以方便的定制，而且使用起来非常方便。
当然它也有它的不足之处，比如，当一个页面有两个控件想共用一个tooltip的话，就会失效。下面给出一个最简单的例子：
<html> <head> <title>Dojo Tooltip Widget Test</title> <mce:script type="text/javascript" src="testBidi.js" mce_src="testBidi.js"></mce:script> <mce:script type="text/javascript" src="../js/dojo/dojo.js" mce_src="js/dojo/dojo.js" djConfig="parseOnLoad: true, isDebug: true"></mce:script> <mce:script type="text/javascript"></mce:script> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1"> @import "../js/dojo/resources/dojo.css"; @import "../js/dijit/themes/tundra/tundra.css"; @import "css/dijitTests.css"; </style> </head> <body class="tundra"> <form> <input type="input" name="id1" value="#1"><br> <input type="input" name="id2" value="#2"><br> </form> <span dojoType="dijit.Tooltip" connectId="id1">tooltip for id1这个怎么样</span> <div title="haha">tesdfdfdfdfdft</div> </body> </html>

dijit/tooltip.js还提供了另一个有用的工具dijit.MasterTooltip 这个工具使用起来非常方便，只要dojo.require(“dijit.Tooltip”)就可以使用了，不需要用html标签定义，是编程来显示和隐藏的。主要就两个方法：第一：show；第二hide。例子：
<html> <head> <title>tooltip</title> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1"> @import "../js/dojo/resources/dojo.css"; @import "../js/dijit/themes/tundra/tundra.css";</style> <mce:script type="text/javascript" djConfig="parseOnLoad: true, isDebug: true" src="../js/dojo/dojo.js" mce_src="js/dojo/dojo.js"></mce:script> <mce:script type="text/javascript"></mce:script> </head> <body class="tundra"><br> <select id="select1"><option>测试使用</option><option>2</option></select><br><br> <br> <button onclick="showMessage()">show</button> <button onclick="hideMessage()">hide</button> </body> </html>