Dojo学习笔记（十六）：应用程序部件dijit/Tooltip、dijit/Dialog
2014-11-04 19:35
375 查看
1、dijit/Tooltip
提示条（Tooltip）是为页面上的空间提供辅助信息的常用手段，其样式定义在单独的样式文件中，开发人员可以自己修改。同时也提供了一些强大的功能，比如可以显示图片、图表和从服务器请求得到的数据等，可以控制显示的时间和出现持续的时间。
dijit/Tooltip 的属性
--声明方式样例：
2、dijit/Dialog
Extends: dijit/layout/ContentPane, dijit/_TemplatedMixin, dijit/form/_FormMixin, dijit/_DialogMixin, dijit/_CssStateMixin。
Dialog非常适合临时阻止用户对页面控件的操作，或者强制用户确认或对告警给出响应。对话框包括两种，一种是普通的对话框，一种是提示窗口的对话框。Dialog中可以包含任何DOM内容，无论是简单的HTML片段，还是复杂的布局部件，甚至自定义部件。
--普通对话框：
--利用dijitDialogPaneContentArea和dijitDialogPaneActionBar自定义对话框：
--动态设置对话框中的内容：
--更改衬底颜色：
备注：衬底颜色是通过样式表ID属性来确定，若dijit/Dialog属性的ID为dialogColor，则衬底样式表为：#dialogColor_underlay。即Dialog+_underlay。
--具有表单对话框：
--条款和条件对话框：
--HREF调用和设置.dijitDialogPaneContent属性修改对话框尺寸 ：
3、dijit/TooltipDialog
Extends: dijit/layout/ContentPane, dijit/_TemplatedMixin, dijit/form/_FormMixin, dijit/_DialogMixin。
TooltipDialog类似Dialog，但当鼠标点击屏幕任何位置时，TooltipDialog都可以关闭。
--声明方式创建：
--鼠标移动样例
本文出自 “IT技术学习与交流” 博客，谢绝转载！
提示条（Tooltip）是为页面上的空间提供辅助信息的常用手段，其样式定义在单独的样式文件中，开发人员可以自己修改。同时也提供了一些强大的功能，比如可以显示图片、图表和从服务器请求得到的数据等，可以控制显示的时间和出现持续的时间。
dijit/Tooltip 的属性
| 属性 | 属性类别 | 描述 |
| connectId | String | 要挂载 Tooltip 的控件的 Id，可以为用逗号分隔的多个 Id |
| label | String | 要显示的提示信息 |
| showDelay | Integer 400 | Tooltip 显示之前等待的时间，毫秒级 |
| position | String[] | 显示提示条的位置，字符串数组，可取值before，after，above，below |
<!DOCTYPE HTML> <html lang="en"> <head> <meta charset="utf-8"> <title>Demo: Tooltip</title> <link rel="stylesheet" href="dijit/themes/claro/claro.css"> <script src="dojo/dojo.js" data-dojo-config="async: true, parseOnLoad: true"></script> <script> require(["dojo/parser", "dijit/Tooltip", "dijit/form/Button"]); </script> </head> <body class="claro"> <button id="button1" data-dojo-type="dijit/form/Button">Tooltip above</button> <button id="button2" data-dojo-type="dijit/form/Button">Tooltip below</button> <div data-dojo-type="dijit/Tooltip" data-dojo-props="connectId:'button1',position:['above']"> 在按钮上方显示提示信息 </div> <div data-dojo-type="dijit/Tooltip" data-dojo-props="connectId:'button2',position:['below']"> 在按钮下方显示提示信息 </div> </body> </html>--编程方式样例：
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Demo: Tooltip</title>
<link rel="stylesheet" href="dijit/themes/claro/claro.css">
<script src="dojo/dojo.js" data-dojo-config="async: true, parseOnLoad: true"></script>
<script>
require(["dijit/Tooltip", "dojo/domReady!"], function(Tooltip){
new Tooltip({
connectId: ["exampleNode"],
label: "提示条显示内容",
position:["above","below"]
});
});
</script>
</head>
<body class="claro">
<span id="exampleNode">测试提示条</span>
</body>
</html>--使用selector和getContent()绑定多个节点：<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Demo: Tooltip</title>
<link rel="stylesheet" href="dijit/themes/claro/claro.css">
<script src="dojo/dojo.js" data-dojo-config="async: true, parseOnLoad: true"></script>
<script>
require(["dijit/Tooltip", "dojo/query!css2", "dojo/domReady!"], function(Tooltip){
new Tooltip({
connectId: "myTable",
selector: "tr",
getContent: function(matchedNode){
return matchedNode.getAttribute("tooltipText");
}
});
});
</script>
</head>
<body class="claro">
<table id="myTable">
<tr tooltipText="tooltip for row 1"><td>row 1</td></tr>
<tr tooltipText="tooltip for row 2"><td>row 2</td></tr>
<tr tooltipText="tooltip for row 3"><td>row 3</td></tr>
</table>
</body>
</html>2、dijit/Dialog
Extends: dijit/layout/ContentPane, dijit/_TemplatedMixin, dijit/form/_FormMixin, dijit/_DialogMixin, dijit/_CssStateMixin。
Dialog非常适合临时阻止用户对页面控件的操作，或者强制用户确认或对告警给出响应。对话框包括两种，一种是普通的对话框，一种是提示窗口的对话框。Dialog中可以包含任何DOM内容，无论是简单的HTML片段，还是复杂的布局部件，甚至自定义部件。
--普通对话框：
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Demo: Dialog</title>
<link rel="stylesheet" href="dijit/themes/claro/claro.css">
<script src="dojo/dojo.js" data-dojo-config="async: true, parseOnLoad: true"></script>
<script>
require(["dijit/Dialog", "dojo/domReady!"], function(Dialog){
myDialog = new Dialog({
title: "My Dialog",
content: "Test content.",
style: "width: 300px"
});
});
</script>
</head>
<body class="claro">
<button onclick="myDialog.show();">show</button>
</body>
</html>输出：--利用dijitDialogPaneContentArea和dijitDialogPaneActionBar自定义对话框：
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Demo: Dialog</title>
<link rel="stylesheet" href="dijit/themes/claro/claro.css">
<script src="dojo/dojo.js" data-dojo-config="async: true, parseOnLoad: true"></script>
<script>
require(["dijit/Dialog", "dijit/form/TextBox", "dijit/form/Button"]);
</script>
</head>
<body class="claro">
<div data-dojo-type="dijit/Dialog" data-dojo-id="myDialog" title="Name and Address">
<table class="dijitDialogPaneContentArea">
<tr>
<td><label for="name">Name:</label></td>
<td><input data-dojo-type="dijit/form/TextBox" name="name" id="name"></td>
</tr>
<tr>
<td><label for="address">Address:</label></td>
<td><input data-dojo-type="dijit/form/TextBox" name="address" id="address"></td>
</tr>
</table>
<div class="dijitDialogPaneActionBar">
<button data-dojo-type="dijit/form/Button" type="submit" id="ok">OK</button>
<button data-dojo-type="dijit/form/Button" type="button" data-dojo-props="onClick:function(){myDialog.hide();}"
id="cancel">Cancel</button>
</div>
</div>
<button data-dojo-type="dijit/form/Button" type="button" onClick="myDialog.show();">
Show me!
</button>
</body>
</html>输出：--动态设置对话框中的内容：
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Demo: Dialog</title>
<link rel="stylesheet" href="dijit/themes/claro/claro.css">
<script src="dojo/dojo.js" data-dojo-config="async: true, parseOnLoad: true"></script>
<script>
require(["dijit/Dialog", "dijit/form/Button", "dojo/domReady!"], function(Dialog, Button){
var myDialog = new Dialog({
title: "Programmatic Dialog Creation",
style: "width: 300px"
});
var myButton = new Button({
label: "Show me!",
onClick: function(){
myDialog.set("content", "Hey, I wasn't there before, I was added at " + new Date() + "!");
myDialog.show();
}
}, "progbutton");
});
</script>
</head>
<body class="claro">
<p>注意：时间在变化。</p>
<button id="progbutton" type="button">Show me!</button>
</body>
</html>输出：--更改衬底颜色：
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Demo: Dialog</title>
<link rel="stylesheet" href="dijit/themes/claro/claro.css">
<style type="text/css">
#dialogColor_underlay {
background-color:green;
}
</style>
<script src="dojo/dojo.js" data-dojo-config="async: true, parseOnLoad: true"></script>
<script>
require(["dojo/parser", "dijit/Dialog", "dijit/form/Button"]);
</script>
</head>
<body class="claro">
<div id="dialogColor" title="Colorful" data-dojo-type="dijit/Dialog">
My background color is Green
</div>
<button id="button4" data-dojo-type="dijit/form/Button" type="button">Show me!
<script type="dojo/method" data-dojo-event="onClick" data-dojo-args="evt">
require(["dijit/registry"], function(registry){
registry.byId("dialogColor").show();
});
</script>
</button>
</body>
</html>输出：备注：衬底颜色是通过样式表ID属性来确定，若dijit/Dialog属性的ID为dialogColor，则衬底样式表为：#dialogColor_underlay。即Dialog+_underlay。
--具有表单对话框：
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Demo: Dialog</title>
<link rel="stylesheet" href="dijit/themes/claro/claro.css">
<script src="dojo/dojo.js" data-dojo-config="async: true, parseOnLoad: true"></script>
<script>
require(["dojo/parser", "dijit/Dialog", "dijit/form/Button", "dijit/form/TextBox", "dijit/form/DateTextBox", "dijit/form/TimeTextBox"]);
</script>
</head>
<body class="claro">
<div data-dojo-type="dijit/Dialog" data-dojo-id="myFormDialog" title="Form Dialog"
execute="alert('submitted args:\n' + dojo.toJson(arguments[0], true));">
<div class="dijitDialogPaneContentArea">
<table>
<tr>
<td><label for="name">Name: </label></td>
<td><input data-dojo-type="dijit/form/TextBox" type="text" name="name" id="name"></td>
</tr>
<tr>
<td><label for="loc">Location: </label></td>
<td><input data-dojo-type="dijit/form/TextBox" type="text" name="loc" id="loc"></td>
</tr>
<tr>
<td><label for="sdate">Start date: </label></td>
<td><input data-dojo-type="dijit/form/DateTextBox" data-dojo-id="myStartDate" onChange="myEndDate.constraints.min = arguments[0];" type="text" name="sdate" id="sdate"></td>
</tr>
<tr>
<td><label for="edate">End date: </label></td>
<td><input data-dojo-type="dijit/form/DateTextBox" data-dojo-id="myEndDate" onChange="myStartDate.constraints.max = arguments[0];" type="text" name="edate" id="edate"></td>
</tr>
<tr>
<td><label for="time">Time: </label></td>
<td><input data-dojo-type="dijit/form/TimeTextBox" type="text" name="time" id="time"></td>
</tr>
<tr>
<td><label for="desc">Description: </label></td>
<td><input data-dojo-type="dijit/form/TextBox" type="text" name="desc" id="desc"></td>
</tr>
</table>
</div>
<div class="dijitDialogPaneActionBar">
<button data-dojo-type="dijit/form/Button" type="submit" onClick="return myFormDialog.isValid();">
OK
</button>
<button data-dojo-type="dijit/form/Button" type="button" onClick="myFormDialog.hide()">
Cancel
</button>
</div>
</div>
<button id="buttonThree" data-dojo-type="dijit/form/Button" type="button" onClick="myFormDialog.show();">
Show me!
</button>
</body>
</html>输出：<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Demo: Dialog</title>
<link rel="stylesheet" href="dijit/themes/claro/claro.css">
<script src="dojo/dojo.js" data-dojo-config="async: true, parseOnLoad: true"></script>
<script>
require(["dojo/parser", "dijit/Dialog", "dijit/form/Form", "dijit/form/Button", "dijit/form/ValidationTextBox"]);
</script>
</head>
<body class="claro">
<div data-dojo-type="dijit/Dialog" data-dojo-id="myFormDialog" title="Form Dialog" style="display: none">
<form data-dojo-type="dijit/form/Form" data-dojo-id="myForm">
<script type="dojo/on" data-dojo-event="submit" data-dojo-args="e">
e.preventDefault(); // prevent the default submit
if(!myForm.isValid()){ alert('Please fix fields'); return; }
window.alert("Would submit here via dojo/xhr");
// xhr.post( {
// url: 'foo.com/handler',
// content: { field: 'go here' },
// handleAs: 'json'
// load: function(data){ .. },
// error: function(data){ .. }
// });
</script>
<div class="dijitDialogPaneContentArea">
<label>Foo:</label><div data-dojo-type="dijit/form/ValidationTextBox" data-dojo-props="required:true"></div>
</div>
<div class="dijitDialogPaneActionBar">
<button data-dojo-type="dijit/form/Button" type="submit">OK</button>
<button data-dojo-type="dijit/form/Button" type="button"
data-dojo-props="onClick:function(){myFormDialog.hide();}">Cancel</button>
</div>
</form>
</div>
<button id="buttonThree" data-dojo-type="dijit/form/Button" type="button">Show me!
<script type="dojo/method" data-dojo-event="onClick" data-dojo-args="evt">
myFormDialog.show();
</script>
</button>
</body>
</html>输出：--条款和条件对话框：
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Demo: Dialog</title>
<link rel="stylesheet" href="dijit/themes/claro/claro.css">
<script src="dojo/dojo.js" data-dojo-config="async: true, parseOnLoad: true"></script>
<script>
require(["dijit/Dialog", "dijit/form/Button", "dijit/form/RadioButton", "dojo/dom", "dojo/dom-style"],
function(Dialog, Button, RadioButton, dom, domStyle){
accept = function(){
dom.byId("decision").innerHTML = "接受条款和条件！";
domStyle.set("decision", "color", "#00CC00");
myFormDialog.hide();
};
decline = function(){
dom.byId("decision").innerHTML = "不接受条款和条件！";
domStyle.set("decision", "color", "#FF0000");
myFormDialog.hide();
}
});
</script>
</head>
<body class="claro">
<div data-dojo-type="dijit/Dialog" data-dojo-id="myFormDialog" title="接受或拒绝条款">
<h1>条款</h1>
<div style="width:400px; border:1px solid #b7b7b7; background:#fff; padding:8px; margin:0 auto; height:150px; overflow:auto;">
这里是条款内容......
</div>
<br />
<table>
<input type="radio" data-dojo-type="dijit/form/RadioButton" name="agreement" id="radioOne" value="accept" data-dojo-props="onClick:accept" />
<label for="radioOne">
接受条款
</label>
</td>
</tr>
<tr>
<td>
<input type="radio" data-dojo-type="dijit/form/RadioButton" name="agreement" id="radioTwo" value="decline" data-dojo-props="onClick:decline" />
<label for="radioTwo">
拒绝条款
</label>
</td>
</tr>
</table>
</div>
</div>
<label id="decision" style="color:#FF0000;">
接受或拒绝条款结果展示
</label>
<button id="termsButton" data-dojo-type="dijit/form/Button" type="button" onClick="myFormDialog.show();">
View terms and conditions to accept
</button>
</body>
</html>输出结果：--HREF调用和设置.dijitDialogPaneContent属性修改对话框尺寸 ：
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Demo: Dialog</title>
<link rel="stylesheet" href="dijit/themes/claro/claro.css">
<style type="text/css">
.dijitDialogPaneContent {
width: 600px !important;
height: auto !important;
}
</style>
<script src="dojo/dojo.js" data-dojo-config="async: true, parseOnLoad: true"></script>
<script>
require(["dojo/parser", "dijit/form/Button", "dijit/Dialog"]);
</script>
</head>
<body class="claro">
<div data-dojo-id="myExternalDialog" data-dojo-type="dijit/Dialog" title="My external dialog"
href="dojo/resources/LICENSE">
</div>
<p>XHR调用</p>
<button data-dojo-type="dijit/form/Button" onClick="myExternalDialog.show();" type="button">Show me!</button>
</body>
</html>输出：3、dijit/TooltipDialog
Extends: dijit/layout/ContentPane, dijit/_TemplatedMixin, dijit/form/_FormMixin, dijit/_DialogMixin。
TooltipDialog类似Dialog，但当鼠标点击屏幕任何位置时，TooltipDialog都可以关闭。
--声明方式创建：
<!DOCTYPE HTML> <html lang="en"> <head> <meta charset="utf-8"> <title>Demo: Dialog</title> <link rel="stylesheet" href="dijit/themes/claro/claro.css"> <script src="dojo/dojo.js" data-dojo-config="async: true, parseOnLoad: true"></script> <script> require(["dojo/parser", "dijit/TooltipDialog", "dijit/form/DropDownButton", "dijit/form/TextBox", "dijit/form/Button"]); </script> </head> <body class="claro"> <div data-dojo-type="dijit/form/DropDownButton"> <span>Register</span> <div data-dojo-type="dijit/TooltipDialog"> <label for="name2">Name:</label> <input data-dojo-type="dijit/form/TextBox" id="name2" name="name2" /><br /> <label for="hobby2">Hobby:</label> <input data-dojo-type="dijit/form/TextBox" id="hobby2" name="hobby2" /><br /> <button data-dojo-type="dijit/form/Button" type="submit">Save</button> </div> </div> </body> </html>--编程方式创建：
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Demo: Dialog</title>
<link rel="stylesheet" href="dijit/themes/claro/claro.css">
<script src="dojo/dojo.js" data-dojo-config="async: true, parseOnLoad: true"></script>
<script>
require([
"dijit/TooltipDialog",
"dijit/form/TextBox",
"dijit/form/Button",
"dijit/form/DropDownButton",
"dojo/dom",
"dojo/domReady!"
], function (TooltipDialog, TextBox, Button, DropDownButton, dom) {
var myDialog = new TooltipDialog({
content: '<label for="name">Name:</label> <input data-dojo-type="dijit/form/TextBox" id="name" name="name"><br>' +
'<label for="hobby">Hobby:</label> <input data-dojo-type="dijit/form/TextBox" id="hobby" name="hobby"><br>' +
'<button data-dojo-type="dijit/form/Button" type="submit">Save</button>'
});
var myButton = new DropDownButton({
label: "show tooltip dialog",
dropDown: myDialog
});
dom.byId("dropDownButtonContainer").appendChild(myButton.domNode);
});
</script>
</head>
<body class="claro">
<div id="dropDownButtonContainer"></div>
</body>
</html>--鼠标移动样例
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Demo: Dialog</title>
<link rel="stylesheet" href="dijit/themes/claro/claro.css">
<script src="dojo/dojo.js" data-dojo-config="async: true, parseOnLoad: true"></script>
<script>
require([
"dijit/TooltipDialog",
"dijit/popup",
"dojo/on",
"dojo/dom",
"dojo/domReady!"
], function(TooltipDialog, popup, on, dom){
var myTooltipDialog = new TooltipDialog({
id: 'myTooltipDialog',
style: "width: 300px;",
content: "<p>I have a mouse leave event handler that will close the dialog.",
onMouseLeave: function(){
popup.close(myTooltipDialog);
}
});
var node = dom.byId('mouseovernode');
console.log(on, node);
on(node, 'mouseover', function(evt){
popup.open({
popup: myTooltipDialog,
around: node
});
});
});
</script>
</head>
<body class="claro">
<div id="mouseovernode">Move the mouse over me to pop up the dialog.</div>
</body>
</html>本文出自 “IT技术学习与交流” 博客，谢绝转载！
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Dojo学习笔记--dijit.Dialog
- GTK+图形化应用程序开发学习笔记（十六）—文件选择构件
- GTK+图形化应用程序开发学习笔记（十六）—文件选择构件
- Dojo学习笔记--dijit.Menu
- ASP.NET 2.0高级编程学习笔记-第3章 应用程序和页面框架
- 推荐dojo学习笔记
- 新概念第二册学习笔记十六（91--96）
- C#学习笔记（十六）：使用打开保存文件对话框
- 用S60操作系统SDK开发NOKIA手机应用程序-学习笔记(3)
- WTL 学习笔记 -- ResizeDialog
- 设计模式学习笔记（十六）——Template Method模板方法模式
- 用S60操作系统SDK开发NOKIA手机应用程序-学习笔记(2)
- Dojo学习笔记
- 设计模式学习笔记十六——Interpreter模式
- 推荐dojo学习笔记
- Web 应用程序的基本安全--学习笔记
- [转载]学习笔记《.NET框架程序设计（修订版）》－－第二章 生成、打包、部署及管理应用程序与类型（1）
- 用S60操作系统SDK开发NOKIA手机应用程序-学习笔记(2)
- Dojo学习笔记(6. dojo.io.IO & dojo.io.BrowserIO)
- 设计模式学习笔记（十六）——Command命令