Dojo 悬停提示 dijit.Tooltip

发布时间：2020-12-16 21:49:19 所属栏目：百科来源：网络整理

导读：图：代码： script type="text/javascript" dojo.require("dijit.Tooltip"); /scriptdiv dojoType="dijit.Tooltip" connectId="InsertOrderEntry_button" position="above" 添加“订货明细”/div 参考地址： http://bugs.dojotoolkit.org/browser/dijit/tru

图：

代码：

参考地址：

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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!