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

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

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

、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
技术小胖子
目录
相关文章
chnjames
|
1月前
|
API UED 容器
深入探索 Element UI：自定义滚动条与弹出层管理的技巧
在这篇博客中，我们将深入探讨 Element UI 中的自定义滚动条及弹出层管理技巧。文章详细介绍了 el-scrollbar 组件的使用和参数设置，以及 PopupManager 如何有效管理弹出层的 z-index。我们还将探讨如何实现灵活的全屏组件，利用 vue-popper 创建自定义弹出层，最后介绍 ClickOutside 指令的用法。这些高级技巧将帮助你提升 Element UI 应用程序的用户体验与交互灵活性。
chnjames
185 1
深入探索 Element UI：自定义滚动条与弹出层管理的技巧
六卿
|
2月前
|
前端开发
Twaver-HTML5基础学习(28)工具条(添加自定义按钮_自定义事件)
这篇文章介绍了如何在Twaver-HTML5中创建工具条，添加自定义按钮，并绑定自定义事件，包括放大、缩小、占满屏幕和重置画布大小的功能。
六卿
50 11
前端歌谣
|
JavaScript 前端开发
前端学习笔记202306学习笔记第五十四天-react.js & material-ui之Dialog表单提交,ICon样式事件，删除功能4
前端学习笔记202306学习笔记第五十四天-react.js & material-ui之Dialog表单提交,ICon样式事件，删除功能4
前端歌谣
42 0
前端歌谣
|
JavaScript 前端开发
前端学习笔记202306学习笔记第五十三天-react.js & material-ui之Dialog表单提交,ICon样式事件，删除功能6
前端学习笔记202306学习笔记第五十三天-react.js & material-ui之Dialog表单提交,ICon样式事件，删除功能6
前端歌谣
68 0
前端歌谣
|
JavaScript 前端开发
前端学习笔记202306学习笔记第五十三天-react.js & material-ui之Dialog表单提交,ICon样式事件，删除功能5
前端学习笔记202306学习笔记第五十三天-react.js & material-ui之Dialog表单提交,ICon样式事件，删除功能5
前端歌谣
63 0
前端歌谣
|
JavaScript 前端开发
前端学习笔记202306学习笔记第五十三天-react.js & material-ui之Dialog表单提交,ICon样式事件，删除功能2
前端学习笔记202306学习笔记第五十三天-react.js & material-ui之Dialog表单提交,ICon样式事件，删除功能2
前端歌谣
55 0
前端歌谣
|
JavaScript 前端开发
前端学习笔记202306学习笔记第五十三天-react.js & material-ui之Dialog表单提交,ICon样式事件，删除功能4
前端学习笔记202306学习笔记第五十三天-react.js & material-ui之Dialog表单提交,ICon样式事件，删除功能4
前端歌谣
52 0
前端歌谣
|
JavaScript 前端开发
前端学习笔记202306学习笔记第五十三天-react.js & material-ui之Dialog表单提交,ICon样式事件，删除功能3
前端学习笔记202306学习笔记第五十三天-react.js & material-ui之Dialog表单提交,ICon样式事件，删除功能3
前端歌谣
52 0
前端歌谣
|
JavaScript 前端开发
前端学习笔记202306学习笔记第五十四天-react.js & material-ui之Dialog表单提交,ICon样式事件，删除功能5
前端学习笔记202306学习笔记第五十四天-react.js & material-ui之Dialog表单提交,ICon样式事件，删除功能5
前端歌谣
50 0
前端歌谣
|
JavaScript 前端开发
前端学习笔记202306学习笔记第五十四天-react.js & material-ui之Dialog表单提交,ICon样式事件，删除功能1
前端学习笔记202306学习笔记第五十四天-react.js & material-ui之Dialog表单提交,ICon样式事件，删除功能1
前端歌谣
47 0

热门文章

最新文章

  • 1
    Java 生成 UUID
  • 2
    一文读懂 Serverless 的起源、发展和落地实践
  • 3
    Fiddler抓包：下载、安装及使用
  • 4
    用CodeViz绘制函数调用关系图(call graph)
  • 5
    阿里AI上岗双11服装车间，能识别头发丝直径十分之一的瑕疵
  • 6
    SpringBoot开发案例之整合Dubbo提供者(一)
  • 7
    Dubbo架构介绍
  • 8
    警惕垃圾邮件借加沙新闻进行钓鱼攻击
  • 9
    美国博客刊文发布NetApp StoreVault停产通知
  • 10
    IntelliJ IDEA 12 创建Web项目 教程 超详细版
  • 1
    通义灵码与云计算平台的融合：基础与概述
    37
  • 2
    《深度解析：死锁的“前世今生”与防范之道》
    33
  • 3
    《探秘程序崩溃：核心转储（Core Dump）分析全攻略》
    37
  • 4
    今日 AI 开源｜共 12 项｜开源的DIY健康追踪项目，基于低成本的智能戒指构建私人的健康监测应用
    41
  • 5
    Open Interpreter：AI 赋能终端！在终端中对话AI模型进行编程，通过运行代码来完成各种计算机操作任务
    35
  • 6
    「Mac畅玩鸿蒙与硬件15」鸿蒙UI组件篇5 - Slider 和 Progress 组件
    41
  • 7
    ai断点怎么做?
    16
  • 8
    AI Shell：在命令行里“对话” AI ，微软推出将 AI 助手引入命令行的 CLI 工具，打造对话式交互命令行
    22
  • 9
    ai怎么设计迷宫字体效果?
    15
  • 10
    「Mac畅玩鸿蒙与硬件14」鸿蒙UI组件篇4 - Toggle 和 Checkbox 组件
    30

    • 相关电子书

    更多
  • Cloak&Dagger
  • 低代码开发师（初级）实战教程
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    阿里云OSS设置跨域访问