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

2022-05-26 09:34:42

、dijit/Tooltip

提示条（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>

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

码农公寓

相关文章