Dojo学习3 给客户一个提示：dijit.Tooltip

最新推荐文章于 2024-09-11 15:33:18 发布
最新推荐文章于 2024-09-11 15:33:18 发布
阅读量88 收藏
点赞数
文章标签： javascript ViewUI
原文链接：https://my.oschina.net/ykai/blog/9458
版权

为什么80%的码农都做不了架构师？>>>   hot3.png

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 οnclick="showMessage()">show</button>&nbsp;
<button οnclick="hideMessage()">hide</button>&nbsp;
</body>
</html>

转载于:https://my.oschina.net/ykai/blog/9458

weixin_34294649
关注
dojo发布者订阅者（dojo/topic模块）
小姜哥的技术博客
04-01 4387
dojo/topic为消息订阅者和发布者提供了一个全局消息的集散中心，其与dojo.connect使用同一个集散中心（我的理解是topic可订阅connect发布的信息，反之亦然）。 方法简介： topic.subscribe： 用于订阅消息，接收两个参数，第一参数为要订阅的消息名字（唯一标识），如"socket/msg_arrive"，第二参数为回调函数。 subscribe返回
dijit之Tooltip
qingqingzijinxin的专栏
08-07 421
dijit之Tooltip
dijit.ToolTip
iteye_19449的博客
08-20 123
[color=blue]dijit.ToolTip[/color] dijit.Tooltip 的属性 [color=orange]connectId:[/color] 要挂载 Tooltip 的控件的 Id，可以为用逗号分隔的多个 Id 。 [color=orange]label:[/color] 要显示的提示信息 [color=orange]showDelay:[/color] ...
Dojo 悬停提示 dijit.Tooltip
风中之枫
06-07 2958
Dojo 的提示。赞一个。
dijit之TooltipDialog
qingqingzijinxin的专栏
08-07 1394
dijit之TooltipDialog
dojo精品中文教程(包一)
12-15
Dojo学习笔记--dijit.Tooltip Dojo学习笔记--dijit.Tree Dojo学习笔记--dojo.graphics.color & dojo.uri.Uri Dojo学习笔记--dojo.string & dojo.lang Dojo学习笔记--动态生成widget Dojo学习笔记--开发自己的...
dojo精品中文教程(全)
12-15
分三个包上传时，第三个包好像传不上去，我给整合了一下，打在一个包里上传了！ dojo精品中文教程 Dojo.1.0 Practice Note [1] 什么是dojo 选择dojo的理由 AJAX架构之Dojo篇 Adding Ajax中文版 (DoJo) DOJO...
dojo精品中文教程(包二)
12-15
Dojo学习笔记--dijit.Tooltip Dojo学习笔记--dijit.Tree Dojo学习笔记--dojo.graphics.color & dojo.uri.Uri Dojo学习笔记--dojo.string & dojo.lang Dojo学习笔记--动态生成widget Dojo学习笔记--开发自己的...
dojo精品中文教程(包三)
12-15
Dojo学习笔记--dijit.Tooltip Dojo学习笔记--dijit.Tree Dojo学习笔记--dojo.graphics.color & dojo.uri.Uri Dojo学习笔记--dojo.string & dojo.lang Dojo学习笔记--动态生成widget Dojo学习笔记--开发自己的...
dojo基础知识内容简介
10-18
Dojo是一个强大的JavaScript用户界面开发框架，专为构建富互联网应用程序而设计。它简化了JavaScript编程，使开发者能更高效地创建功能丰富的动态用户界面。Dojo的核心部分是“Dojo Base”，这是一个小而全面的库...
dojo 事件 显示信息
lick4050312的专栏
06-23 736
<br />  <td colspan="4" align="center"><l:button modtype="button"><s:text name="button_save"></s:text><br />            <br />            <script type="dojo/method" event="onClick">   <br />              loxia.showMessage("请稍后...");  <br />                
dojo/topic 笔记
idomyway的博客
12-10 680
前言 &nbsp;&nbsp;&nbsp;&nbsp;dojo / topic提供了一个集中的中心，用于按主题发布和订阅全局消息。可以通过使用订阅主题topic.subscribe()，并且可以使用发布消息topic.publish()。这种机制特别适合异步操作，类似于ES6中的Promise。 &nbsp;&nbsp;&nbsp;&nbsp;由于主题未绑定到特定对象，因此它们对于多个实例或各种不...
js学习——dojo的topic机制
iteye_5031的博客
03-13 311
Topic机制有下列函数  regiesterPublisher(topic,srcObj,srcFunc):将srcObj的srcFunc方法定义成一个主题topic  destroy（topic）：销毁topic对应的主题  subscribe（topic，listenerObj，listenerFunc）：让listenerObj的listenerFunc方法订阅topic   主题  u...
《dojo 边学边用》（04），发布/预订通信 ，dojo内置的观察者模式(dojo.publish 和 dojo.subscribe )...
weixin_30907935的博客
06-13 117
dojo.publish 和 dojo.subscribe //dojo.publish 和 dojo.subscribe ：dojo实现的简便强大的观察者模式 发布/预订通信 虽然dojo.connect提供的直接”连接式“通信能够解决不少问题，但在需要多个部件匿名通信情况下，则更适合使用间接的”广播式“通信。 在这些情况下，可以使用dojo.publish 和 dojo...
Dojo 1.7 Dialog和ToolTip 教程
web开发自学
05-29 192
原文：http://dojotoolkit.org/documentation/tutorials/1.7/dialogs_tooltips/ 原文作者：David Walsh 译者：Elaine Liu Dojo 1.7 难度级别：初级 用户交互是构建富客户端网络应用的第一要素。浏览器提供了alert和对话框作为基本的用户交互方式，但这些基本的交互非常简陋并且不够灵活。因此，Dijit，这个Do...
软件著作权申请教程（超详细）（2024新版）软著申请
m0_75269526的博客
09-09 2683
软件著作权，软著，软著申请，软用户使用手册：提交登记软件的任何一种文档的连续的前30页和连续的后30页，每页不少于30行。如果是多人合作开发著作权人不是一个人的话，还需要准备一份合作开发协议。首先我们需要在官网里面注册一个账号，并且完成实名认证，一般是注册【个人】的身份。合作开发协议书：这个如果是著作权人有多个（多个人一起开发）就需要提供这个材料。在填报完成之后需要打印一个签章页签字（如果不是个人需要盖章）注册完成后点击下面进行登记，如果没有实名需要先实名认证（源代码：源程序前连续的30页和后连续的30页。
js中【Worker】相关知识点详细解读
最新发布
2301_79858914的博客
09-11 582
JavaScript 中的 Worker 是一个可以在后台线程中运行代码的 API，这样可以避免主线程（通常是 UI 线程）被阻塞。使用 Worker 时，JavaScript 可以在多线程环境中工作，解决了单线程的瓶颈问题。通常情况下，JavaScript 是单线程的，也就是所有的代码（包括 DOM 操作和事件处理等）都在同一个线程里执行。如果某段代码需要大量计算，或者运行时间过长，会阻塞整个页面，导致界面卡顿甚至崩溃。Worker提供了一种将复杂或耗时的任务分配到后台线程执行的方法。
echarts.js+china.js实现中国地图各省数据案例
qq_58258855的博客
09-11 398
实现中国地图各省数据案例
JavaScript基础
zhangh040629的博客
09-10 1268
//** 控制浏览器弹出一个警告框* alert()*/alert;/** 让计算机在页面中输出一个内容*/write;/** 向控制台输出一个内容*/log;</</</</
Dojo控件生命周期详解：dijit._Widget与_dijit._Templated的实践
首先，每个dijit组件实例化时会调用create()方法，这是一个默认模板，用于设置组件的基本结构。开发者可以根据需求覆盖此方法，定制组件的行为和特定的生命周期流程。dijit提供的三个核心生命周期扩展点——...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值