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>
