Dojo学习笔记（十六）：应用程序部件dijit/Tooltip、dijit/Dialog

1、dijit/Tooltip

提示条（Tooltip）是为页面上的空间提供辅助信息的常用手段，其样式定义在单独的样式文件中，开发人员可以自己修改。同时也提供了一些强大的功能，比如可以显示图片、图表和从服务器请求得到的数据等，可以控制显示的时间和出现持续的时间。

dijit/Tooltip 的属性

属性	属性类别	描述
connectId	String	要挂载 Tooltip 的控件的 Id，可以为用逗号分隔的多个 Id
label	要显示的提示信息
showDelay	Integer 400	Tooltip 显示之前等待的时间，毫秒级
position	String[]	显示提示条的位置，字符串数组，可取值before，after，above，below

--声明方式样例：

<!DOCTYPEHTML>
<htmllang="en">
<head>
<Metacharset="utf-8">
<title>Demo:Tooltip</title>
<linkrel="stylesheet"href="dijit/themes/claro/claro.css">
<scriptsrc="dojo/dojo.js"data-dojo-config="async:true,parSEOnLoad:true"></script>
<script>
require(["dojo/parser","dijit/Tooltip","dijit/form/Button"]);
</script>
</head>
<bodyclass="claro">
<buttonid="button1"data-dojo-type="dijit/form/Button">Tooltipabove</button>
<buttonid="button2"data-dojo-type="dijit/form/Button">Tooltipbelow</button>
<divdata-dojo-type="dijit/Tooltip"data-dojo-props="connectId:'button1',position:['above']">
在按钮上方显示提示信息
</div>
<divdata-dojo-type="dijit/Tooltip"data-dojo-props="connectId:'button2',position:['below']">
在按钮下方显示提示信息
</div>
</body>
</html>

--编程方式样例：

<!DOCTYPEHTML>
<htmllang="en">
<head>
<Metacharset="utf-8">
<title>Demo:Tooltip</title>
<linkrel="stylesheet"href="dijit/themes/claro/claro.css">
<scriptsrc="dojo/dojo.js"data-dojo-config="async:true,parSEOnLoad:true"></script>
<script>
require(["dijit/Tooltip","dojo/domReady!"],function(Tooltip){
newTooltip({
connectId:["exampleNode"],label:"提示条显示内容",position:["above","below"]
});
});
</script>
</head>
<bodyclass="claro">
<spanid="exampleNode">测试提示条</span>
</body>
</html>

--使用selector和getContent()绑定多个节点：

<!DOCTYPEHTML>
<htmllang="en">
<head>
<Metacharset="utf-8">
<title>Demo:Tooltip</title>
<linkrel="stylesheet"href="dijit/themes/claro/claro.css">
<scriptsrc="dojo/dojo.js"data-dojo-config="async:true,"dojo/query!css2",function(Tooltip){
newTooltip({
connectId:"myTable",selector:"tr",getContent:function(matchedNode){
returnmatchedNode.getAttribute("tooltipText");
}
});
});
</script>
</head>
<bodyclass="claro">
<tableid="myTable">
<trtooltipText="tooltipforrow1"><td>row1</td></tr>
<trtooltipText="tooltipforrow2"><td>row2</td></tr>
<trtooltipText="tooltipforrow3"><td>row3</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片段，还是复杂的布局部件，甚至自定义部件。

--普通对话框：

<!DOCTYPEHTML>
<htmllang="en">
<head>
<Metacharset="utf-8">
<title>Demo:Dialog</title>
<linkrel="stylesheet"href="dijit/themes/claro/claro.css">
<scriptsrc="dojo/dojo.js"data-dojo-config="async:true,parSEOnLoad:true"></script>
<script>
require(["dijit/Dialog",function(Dialog){
myDialog=newDialog({
title:"MyDialog",content:"Testcontent.",style:"width:300px"
});
});
</script>
</head>
<bodyclass="claro">
<buttononclick="myDialog.show();">show</button>
</body>
</html>

输出：

--利用dijitDialogPaneContentArea和dijitDialogPaneActionBar自定义对话框：

<!DOCTYPEHTML>
<htmllang="en">
<head>
<Metacharset="utf-8">
<title>Demo:Dialog</title>
<linkrel="stylesheet"href="dijit/themes/claro/claro.css">
<scriptsrc="dojo/dojo.js"data-dojo-config="async:true,"dijit/form/TextBox","dijit/form/Button"]);
</script>
</head>
<bodyclass="claro">
<divdata-dojo-type="dijit/Dialog"data-dojo-id="myDialog"title="NameandAddress">
<tableclass="dijitDialogPaneContentArea">
<tr>
<td><labelfor="name">Name:</label></td>
<td><inputdata-dojo-type="dijit/form/TextBox"name="name"id="name"></td>
</tr>
<tr>
<td><labelfor="address">Address:</label></td>
<td><inputdata-dojo-type="dijit/form/TextBox"name="address"id="address"></td>
</tr>
</table>
<divclass="dijitDialogPaneActionBar">
<buttondata-dojo-type="dijit/form/Button"type="submit"id="ok">OK</button>
<buttondata-dojo-type="dijit/form/Button"type="button"data-dojo-props="onClick:function(){myDialog.hide();}"
id="cancel">Cancel</button>
</div>
</div>
<buttondata-dojo-type="dijit/form/Button"type="button"onClick="myDialog.show();">
Showme!
</button>
</body>
</html>

输出：

--动态设置对话框中的内容：

<!DOCTYPEHTML>
<htmllang="en">
<head>
<Metacharset="utf-8">
<title>Demo:Dialog</title>
<linkrel="stylesheet"href="dijit/themes/claro/claro.css">
<scriptsrc="dojo/dojo.js"data-dojo-config="async:true,"dijit/form/Button",function(Dialog,Button){
varmyDialog=newDialog({
title:"ProgrammaticDialogCreation",style:"width:300px"
});
varmyButton=newButton({
label:"Showme!",onClick:function(){
myDialog.set("content","Hey,Iwasn'ttherebefore,Iwasaddedat"+newDate()+"!");
myDialog.show();
}
},"progbutton");
});
</script>
</head>
<bodyclass="claro">
<p>注意：时间在变化。</p>
<buttonid="progbutton"type="button">Showme!</button>
</body>
</html>

输出：

--更改衬底颜色：

<!DOCTYPEHTML>
<htmllang="en">
<head>
<Metacharset="utf-8">
<title>Demo:Dialog</title>
<linkrel="stylesheet"href="dijit/themes/claro/claro.css">
<styletype="text/css">
#dialogColor_underlay{
background-color:green;
}
</style>
<scriptsrc="dojo/dojo.js"data-dojo-config="async:true,"dijit/Dialog","dijit/form/Button"]);
</script>
</head>
<bodyclass="claro">
<divid="dialogColor"title="Colorful"data-dojo-type="dijit/Dialog">
MybackgroundcolorisGreen
</div>
<buttonid="button4"data-dojo-type="dijit/form/Button"type="button">Showme!
<scripttype="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。

--具有表单对话框：

<!DOCTYPEHTML>
<htmllang="en">
<head>
<Metacharset="utf-8">
<title>Demo:Dialog</title>
<linkrel="stylesheet"href="dijit/themes/claro/claro.css">
<scriptsrc="dojo/dojo.js"data-dojo-config="async:true,"dijit/form/DateTextBox","dijit/form/TimeTextBox"]);
</script>
</head>
<bodyclass="claro">
<divdata-dojo-type="dijit/Dialog"data-dojo-id="myFormDialog"title="FormDialog"
execute="alert('submittedargs:\n'+dojo.toJson(arguments[0],true));">
<divclass="dijitDialogPaneContentArea">
<table>
<tr>
<td><labelfor="name">Name:</label></td>
<td><inputdata-dojo-type="dijit/form/TextBox"type="text"name="name"id="name"></td>
</tr>
<tr>
<td><labelfor="loc">Location:</label></td>
<td><inputdata-dojo-type="dijit/form/TextBox"type="text"name="loc"id="loc"></td>
</tr>
<tr>
<td><labelfor="sdate">Startdate:</label></td>
<td><inputdata-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><labelfor="edate">Enddate:</label></td>
<td><inputdata-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><labelfor="time">Time:</label></td>
<td><inputdata-dojo-type="dijit/form/TimeTextBox"type="text"name="time"id="time"></td>
</tr>
<tr>
<td><labelfor="desc">Description:</label></td>
<td><inputdata-dojo-type="dijit/form/TextBox"type="text"name="desc"id="desc"></td>
</tr>
</table>
</div>
<divclass="dijitDialogPaneActionBar">
<buttondata-dojo-type="dijit/form/Button"type="submit"onClick="returnmyFormDialog.isValid();">
OK
</button>
<buttondata-dojo-type="dijit/form/Button"type="button"onClick="myFormDialog.hide()">
Cancel
</button>
</div>
</div>
<buttonid="buttonThree"data-dojo-type="dijit/form/Button"type="button"onClick="myFormDialog.show();">
Showme!
</button>
</body>
</html>

输出：

<!DOCTYPEHTML>
<htmllang="en">
<head>
<Metacharset="utf-8">
<title>Demo:Dialog</title>
<linkrel="stylesheet"href="dijit/themes/claro/claro.css">
<scriptsrc="dojo/dojo.js"data-dojo-config="async:true,"dijit/form/Form","dijit/form/ValidationTextBox"]);
</script>
</head>
<bodyclass="claro">
<divdata-dojo-type="dijit/Dialog"data-dojo-id="myFormDialog"title="FormDialog"style="display:none">
<formdata-dojo-type="dijit/form/Form"data-dojo-id="myForm">
<scripttype="dojo/on"data-dojo-event="submit"data-dojo-args="e">
e.preventDefault();//preventthedefaultsubmit
if(!myForm.isValid()){alert('Pleasefixfields');return;}
window.alert("Wouldsubmithereviadojo/xhr");
//xhr.post({
//url:'foo.com/handler',//content:{field:'gohere'},//handleAs:'json'
//load:function(data){..},//error:function(data){..}
//});
</script>
<divclass="dijitDialogPaneContentArea">
<label>Foo:</label><divdata-dojo-type="dijit/form/ValidationTextBox"data-dojo-props="required:true"></div>
</div>
<divclass="dijitDialogPaneActionBar">
<buttondata-dojo-type="dijit/form/Button"type="submit">OK</button>
<buttondata-dojo-type="dijit/form/Button"type="button"
data-dojo-props="onClick:function(){myFormDialog.hide();}">Cancel</button>
</div>
</form>
</div>
<buttonid="buttonThree"data-dojo-type="dijit/form/Button"type="button">Showme!
<scripttype="dojo/method"data-dojo-event="onClick"data-dojo-args="evt">
myFormDialog.show();
</script>
</button>
</body>
</html>

输出：

--条款和条件对话框：

<!DOCTYPEHTML>
<htmllang="en">
<head>
<Metacharset="utf-8">
<title>Demo:Dialog</title>
<linkrel="stylesheet"href="dijit/themes/claro/claro.css">
<scriptsrc="dojo/dojo.js"data-dojo-config="async:true,"dijit/form/RadioButton","dojo/dom","dojo/dom-style"],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","#FF0000");
myFormDialog.hide();
}
});
</script>
</head>
<bodyclass="claro">
<divdata-dojo-type="dijit/Dialog"data-dojo-id="myFormDialog"title="接受或拒绝条款">
<h1>条款</h1>
<divstyle="width:400px;border:1pxsolid#b7b7b7;background:#fff;padding:8px;margin:0auto;height:150px;overflow:auto;">
这里是条款内容......
</div>
<br/>
<table>
<inputtype="radio"data-dojo-type="dijit/form/RadioButton"name="agreement"id="radioOne"value="accept"data-dojo-props="onClick:accept"/>
<labelfor="radioOne">
接受条款
</label>
</td>
</tr>
<tr>
<td>
<inputtype="radio"data-dojo-type="dijit/form/RadioButton"name="agreement"id="radioTwo"value="decline"data-dojo-props="onClick:decline"/>
<labelfor="radioTwo">
拒绝条款
</label>
</td>
</tr>
</table>
</div>
</div>
<labelid="decision"style="color:#FF0000;">
接受或拒绝条款结果展示
</label>
<buttonid="termsButton"data-dojo-type="dijit/form/Button"type="button"onClick="myFormDialog.show();">
Viewtermsandconditionstoaccept
</button>
</body>
</html>

输出结果：

--HREF调用和设置.dijitDialogPaneContent属性修改对话框尺寸：

<!DOCTYPEHTML>
<htmllang="en">
<head>
<Metacharset="utf-8">
<title>Demo:Dialog</title>
<linkrel="stylesheet"href="dijit/themes/claro/claro.css">
<styletype="text/css">
.dijitDialogPaneContent{
width:600px!important;
height:auto!important;
}
</style>
<scriptsrc="dojo/dojo.js"data-dojo-config="async:true,"dijit/Dialog"]);
</script>
</head>
<bodyclass="claro">
<divdata-dojo-id="myExternalDialog"data-dojo-type="dijit/Dialog"title="Myexternaldialog"
href="dojo/resources/LICENSE">
</div>
<p>XHR调用</p>
<buttondata-dojo-type="dijit/form/Button"onClick="myExternalDialog.show();"type="button">Showme!</button>
</body>
</html>

输出：

3、dijit/TooltipDialog

Extends: dijit/layout/ContentPane,dijit/_DialogMixin。

TooltipDialog类似Dialog，但当鼠标点击屏幕任何位置时，TooltipDialog都可以关闭。

--声明方式创建：

<!DOCTYPEHTML>
<htmllang="en">
<head>
<Metacharset="utf-8">
<title>Demo:Dialog</title>
<linkrel="stylesheet"href="dijit/themes/claro/claro.css">
<scriptsrc="dojo/dojo.js"data-dojo-config="async:true,"dijit/TooltipDialog","dijit/form/DropDownButton","dijit/form/Button"]);
</script>
</head>
<bodyclass="claro">
<divdata-dojo-type="dijit/form/DropDownButton">
<span>Register</span>
<divdata-dojo-type="dijit/TooltipDialog">
<labelfor="name2">Name:</label><inputdata-dojo-type="dijit/form/TextBox"id="name2"name="name2"/><br/>
<labelfor="hobby2">Hobby:</label><inputdata-dojo-type="dijit/form/TextBox"id="hobby2"name="hobby2"/><br/>
<buttondata-dojo-type="dijit/form/Button"type="submit">Save</button>
</div>
</div>
</body>
</html>

--编程方式创建：

<!DOCTYPEHTML>
<htmllang="en">
<head>
<Metacharset="utf-8">
<title>Demo:Dialog</title>
<linkrel="stylesheet"href="dijit/themes/claro/claro.css">
<scriptsrc="dojo/dojo.js"data-dojo-config="async:true,parSEOnLoad:true"></script>
<script>
require([
"dijit/TooltipDialog","dojo/domReady!"
],function(TooltipDialog,TextBox,DropDownButton,dom){
varmyDialog=newTooltipDialog({
content:'<labelfor="name">Name:</label><inputdata-dojo-type="dijit/form/TextBox"id="name"name="name"><br>'+
'<labelfor="hobby">Hobby:</label><inputdata-dojo-type="dijit/form/TextBox"id="hobby"name="hobby"><br>'+
'<buttondata-dojo-type="dijit/form/Button"type="submit">Save</button>'
});
varmyButton=newDropDownButton({
label:"showtooltipdialog",dropDown:myDialog
});
dom.byId("dropDownButtonContainer").appendChild(myButton.domNode);
});
</script>
</head>
<bodyclass="claro">
<divid="dropDownButtonContainer"></div>
</body>
</html>

--鼠标移动样例

<!DOCTYPEHTML>
<htmllang="en">
<head>
<Metacharset="utf-8">
<title>Demo:Dialog</title>
<linkrel="stylesheet"href="dijit/themes/claro/claro.css">
<scriptsrc="dojo/dojo.js"data-dojo-config="async:true,"dijit/popup","dojo/on",popup,on,dom){
varmyTooltipDialog=newTooltipDialog({
id:'myTooltipDialog',style:"width:300px;",content:"<p>Ihaveamouseleaveeventhandlerthatwillclosethedialog.",onMouseLeave:function(){
popup.close(myTooltipDialog);
}
});
varnode=dom.byId('mouSEOvernode');
console.log(on,node);
on(node,'mouSEOver',function(evt){
popup.open({
popup:myTooltipDialog,around:node
});
});
});
</script>
</head>
<bodyclass="claro">
<divid="mouSEOvernode">MovethemouSEOvermetopopupthedialog.</div>
</body>
</html>

Dojo学习笔记（十六）：应用程序部件dijit/Tooltip、dijit/Dialog

猜你在找的Dojo相关文章