当前位置 : 主页 > 网页制作 > Dojo >

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

来源：互联网 收集：自由互联 发布时间：2021-06-15
1、dijit/Tooltip 提示条（Tooltip）是为页面上的空间提供辅助信息的常用手段，其样式定义在单独的样式文件中，开发人员可以自己修改。同时也提供了一些强大的功能，比如可以显示图片

1、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>

输出：

650) this.width=650;" src="http://img.558idc.com/uploadfile/allimg/210615/1950364916-4.png" title="快照21.jpg" alt="wKioL1RbSLCCRFbMAACrVGNVsRM406.jpg" d="3714168" s="10b_7a7" t="jpg">


--利用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>

输出：

650) this.width=650;" src="http://img.558idc.com/uploadfile/allimg/210615/1950364916-4.png" title="快照22.jpg" alt="wKioL1RbSdiBLVfGAADV58jXmRA898.jpg" d="3714169" s="17c_4c7" t="jpg">

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

<!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>

输出：

650) this.width=650;" src="http://img.558idc.com/uploadfile/allimg/210615/1950364916-4.png" title="快照23.jpg" alt="wKioL1RbS5yjxlqbAAD0nfPmoaI401.jpg" d="3714170" s="9f7_143" t="jpg">

--更改衬底颜色：

<!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>

输出：

650) this.width=650;" src="http://img.558idc.com/uploadfile/allimg/210615/1950364916-4.png" title="快照24.jpg" alt="wKiom1RbTlCAFjQSAACd0RpcwJU844.jpg" d="3714171" s="5db_82a" t="jpg">


    备注：衬底颜色是通过样式表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>

输出：

650) this.width=650;" src="http://img.558idc.com/uploadfile/allimg/210615/1950364916-4.png" title="快照25.jpg" alt="wKioL1RbUpPykT3oAAEHQwsdyjM922.jpg" d="3714172" s="914_77b" t="jpg">

<!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>

输出：

650) this.width=650;" src="http://img.558idc.com/uploadfile/allimg/210615/1950364916-4.png" title="快照27.jpg" alt="wKiom1RbWC_iSXkVAADor2AKK_I061.jpg" d="3714173" s="1f7_298" t="jpg">


--条款和条件对话框：

<!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>

输出结果：

650) this.width=650;" src="http://img.558idc.com/uploadfile/allimg/210615/1950364916-4.png" title="快照28.jpg" alt="wKioL1RgS2ziGZkQAAE0USjePbg757.jpg" d="3714174" s="4bc_e35" t="jpg">

--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>

输出：

650) this.width=650;" src="http://img.558idc.com/uploadfile/allimg/210615/1950364916-4.png" title="快照29.jpg" alt="wKiom1RgaS_ADYW5AAZPvOBgmAM561.jpg" d="3714175" s="736_eb0" t="jpg">


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>
上一篇：dojo的TabContainer中增加的ContentPane如果是closable，如何在关闭后不销毁ContentPane
下一篇：Dojo学习笔记（十五）：Dojo滑动条Slider
网友评论
相关栏目
最近更新
热门文章