Dojo學習3 給客戶一個提示：dijit.Tooltip

時間  2019-11-07
標籤 dojo 學習 客戶 一個 提示 dijit.tooltip dijit tooltip 欄目 Dojo 简体版
原文   原文鏈接

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>
 <script type="text/javascript" src="testBidi.js"></script>
 <script type="text/javascript" src="../js/dojo/dojo.js"
  djConfig="parseOnLoad: true, isDebug: true"></script>
 <script type="text/javascript">
  dojo.require("dijit.Tooltip");
  dojo.require("dojo.parser"); // find widgets
 </script>
 <style type="text/css">
  @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>
<style type="text/css">
 @import "../js/dojo/resources/dojo.css";
 @import "../js/dijit/themes/tundra/tundra.css";
</style>  
<script type="text/javascript"
 djConfig="parseOnLoad: true, isDebug: true"
 src="../js/dojo/dojo.js"></script>
<script type="text/javascript">
 dojo.require("dijit.Tooltip");
function showMessage(){
  dijit.MasterTooltip.show("顯示提示信息", dojo.byId("select1"));
 }
function hideMessage(){
dijit.MasterTooltip.hide();
}
</script>
</head>
<body class="tundra"><br>
 <select id="select1"><option>測試使用</option><option>2</option></select><br><br>
<br>
<button onclick="showMessage()">show</button>&nbsp;
<button onclick="hideMessage()">hide</button>&nbsp;
</body>
</html>javascript

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程