AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

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

2018-03-06 2075
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：

、dijit/Tooltip

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

dijit/Tooltip 的属性

属性 属性类别 描述
connectId String 要挂载 Tooltip 的控件的 Id，可以为用逗号分隔的多个 Id 
label String 要显示的提示信息
showDelay Integer
400		 Tooltip 显示之前等待的时间，毫秒级
position

String[]

 显示提示条的位置，字符串数组，可取值before，after，above，below

--声明方式样例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!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>

--编程方式样例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!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()绑定多个节点：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!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片段，还是复杂的布局部件，甚至自定义部件。

--普通对话框：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!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>

输出：

wKioL1RbSLCCRFbMAACrVGNVsRM406.jpg


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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!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>

输出：

wKioL1RbSdiBLVfGAADV58jXmRA898.jpg

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!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>

输出：

wKioL1RbS5yjxlqbAAD0nfPmoaI401.jpg

--更改衬底颜色：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!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>

输出：

wKiom1RbTlCAFjQSAACd0RpcwJU844.jpg


    备注：衬底颜色是通过样式表ID属性来确定，若dijit/Dialog属性的ID为dialogColor，则衬底样式表为：#dialogColor_underlay。即Dialog+_underlay。


--具有表单对话框：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!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>

输出：

wKioL1RbUpPykT3oAAEHQwsdyjM922.jpg

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!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>

输出：

wKiom1RbWC_iSXkVAADor2AKK_I061.jpg


--条款和条件对话框：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!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>

输出结果：

wKioL1RgS2ziGZkQAAE0USjePbg757.jpg

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!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>

输出：

wKiom1RgaS_ADYW5AAZPvOBgmAM561.jpg


3、dijit/TooltipDialog

    Extends: dijit/layout/ContentPane, dijit/_TemplatedMixin, dijit/form/_FormMixin, dijit/_DialogMixin。

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

--声明方式创建：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!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>

--编程方式创建：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!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>


--鼠标移动样例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!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>










     本文转自stock0991 51CTO博客，原文链接：http://blog.51cto.com/qing0991/1571820，如需转载请自行联系原作者





文章标签：
Web App开发
JavaScript
技术小胖子
目录
相关文章
卡尔特斯
|
JavaScript
Vue 实现 Hover 功能（ mouseover 与 mouseenter 的区别）
Vue 实现 Hover 功能（ mouseover 与 mouseenter 的区别）
卡尔特斯
347 0
kdyonly
|
C#
C#-ToolTIp和Popup简单使用
很多时候我们需要做一个提示框，来给用户说明这个元素的作用，比如鼠标移动到哪个元素上面，显示一个弹出框并显示这个元素的相关介绍，想到提示内容，我们很容易想到toolip和Popup，接下来就来分别是用一下这两个控件。
kdyonly
244 0
技术小胖子
|
Web App开发 前端开发 JavaScript
Dojo学习笔记（十二）：Dojo表单控件——Button及其变体
技术小胖子
1278 0
技术小胖子
|
前端开发
Dojo学习笔记（十三）：Dojo表单控件——TextBox及其变体
技术小胖子
1479 0
余二五
|
.NET 开发框架 前端开发
Coolite Toolkit学习笔记六：常用控件Accordion、ToolBar、ToolTip
余二五
1340 0
科技小先锋
|
JavaScript
extjs中combox的细节问题
科技小先锋
1248 0
科技小先锋
|
JavaScript .NET 开发框架
JS TreeView的Checkbox级联操作
科技小先锋
1235 0
技术小胖子
|
Web App开发 容器
Dojo学习笔记（十五）：Dojo滑动条Slider
技术小胖子
1601 0
行者武松
|
Web App开发 索引
初学ReactJS，写了一个RadioButtonList组件
行者武松
1092 0
陈嘻嘻哈哈
|
JavaScript 前端开发
EasyUI的combobox控件使用onchange 问题
在项目中几次都遇到了同样的问题，现在都不知道怎样解决了！ 路过的朋友们帮我看看嘛！谢谢了！ 最后我想要实现的效果是这样的。   在下拉列表中不存在值。(这里的是下拉列表中存在值的！)    但是在我输入值的时候可以左匹配模糊查询。
陈嘻嘻哈哈
1076 0