产品解决方案文档与社区免费试用定价云市场合作伙伴支持与服务了解阿里云
备案控制台登录/注册
开发者社区 开发与运维 文章 正文

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

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

、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
技术小胖子
目录
相关文章
前端歌谣
|
1月前
|
JavaScript 前端开发
前端学习笔记202306学习笔记第五十四天-react.js & material-ui之Dialog表单提交,ICon样式事件，删除功能5
前端学习笔记202306学习笔记第五十四天-react.js & material-ui之Dialog表单提交,ICon样式事件，删除功能5
前端歌谣
10 0
前端歌谣
|
1月前
|
JavaScript 前端开发
前端学习笔记202306学习笔记第五十二天-react.js & material-ui之AppBar,Tabs和Grid，papar使用1
前端学习笔记202306学习笔记第五十二天-react.js & material-ui之AppBar,Tabs和Grid，papar使用1
前端歌谣
21 0
前端歌谣
|
1月前
|
JavaScript 前端开发
前端学习笔记202306学习笔记第五十四天-react.js & material-ui之Dialog表单提交,ICon样式事件，删除功能4
前端学习笔记202306学习笔记第五十四天-react.js & material-ui之Dialog表单提交,ICon样式事件，删除功能4
前端歌谣
15 0
前端歌谣
|
1月前
|
JavaScript 前端开发
前端学习笔记202306学习笔记第五十四天-react.js & material-ui之Dialog表单提交,ICon样式事件，删除功能3
前端学习笔记202306学习笔记第五十四天-react.js & material-ui之Dialog表单提交,ICon样式事件，删除功能3
前端歌谣
12 0
前端歌谣
|
1月前
|
JavaScript 前端开发
前端学习笔记202306学习笔记第五十四天-react.js & material-ui之Dialog表单提交,ICon样式事件，删除功能2
前端学习笔记202306学习笔记第五十四天-react.js & material-ui之Dialog表单提交,ICon样式事件，删除功能2
前端歌谣
14 0
前端歌谣
|
1月前
|
JavaScript 前端开发
前端学习笔记202306学习笔记第五十四天-react.js & material-ui之Dialog表单提交,ICon样式事件，删除功能1
前端学习笔记202306学习笔记第五十四天-react.js & material-ui之Dialog表单提交,ICon样式事件，删除功能1
前端歌谣
11 0
前端歌谣
|
1月前
|
JavaScript 前端开发
前端学习笔记202306学习笔记第五十二天-react.js & material-ui之AppBar,Tabs和Grid，papar使用4
前端学习笔记202306学习笔记第五十二天-react.js & material-ui之AppBar,Tabs和Grid，papar使用4
前端歌谣
14 0
前端歌谣
|
1月前
|
JavaScript 前端开发
前端学习笔记202306学习笔记第五十二天-react.js & material-ui之AppBar,Tabs和Grid，papar使用3
前端学习笔记202306学习笔记第五十二天-react.js & material-ui之AppBar,Tabs和Grid，papar使用3
前端歌谣
13 0
前端歌谣
|
1月前
|
JavaScript 前端开发
前端学习笔记202306学习笔记第五十二天-react.js & material-ui之AppBar,Tabs和Grid，papar使用2
前端学习笔记202306学习笔记第五十二天-react.js & material-ui之AppBar,Tabs和Grid，papar使用2
前端歌谣
13 0
前端歌谣
|
1月前
|
JavaScript 前端开发
前端学习笔记202306学习笔记第五十三天-react.js & material-ui之Dialog表单提交,ICon样式事件，删除功能4
前端学习笔记202306学习笔记第五十三天-react.js & material-ui之Dialog表单提交,ICon样式事件，删除功能4
前端歌谣
18 0
热门文章
最新文章
1
Spring Boot 系列：最新版优雅停机详解
2
降本增效利器！趣头条Spark Remote Shuffle Service最佳实践
3
2014秋C++第16周 项目5参考 编程处理C++源代码
4
入门预测
5
雅虎任命新公司CEO和CFO 梅耶尔将离职
6
光伏系统建好不是一本万利，运维做不好同样达不到预期收益
7
大数据会消灭律师这一职业吗？
8
red5-常见的错误收录
9
SQL Server 2012 AlwaysOn高可用配置之七：新建数据库
10
WPF 简单的绕圈进度条(无cs代码)
1
极品飞车3：热力追踪在Windows 10电脑中运行
80
2
做车联网测试，让我一不小心上了央视
91
3
软件测试也要敲代码，为什么不让开发兼测试？
95
4
吃透这些软件测试理论知识要点，你就搞懂了软件测试
86
5
你发现一个bug，如何定位这个是前端还是后端缺陷？建议收藏
102
6
软件测试高频面试题“黑盒测试之正交试验法”案例剖析与实践应用
91
7
读完这篇文章后，才发现Allpairs这款工具，让测试用例变得如此简单
67
8
腾讯游戏测试工程师的经验心得分享
82
9
百度搜索：蓝易云【Nodejs快速搭建简单的HTTP服务器详细教程。】
125
10
百度搜索：蓝易云【Linux系统安装MySQL详细教程】
117
相关产品
云迁移中心
文档详情 产品详情
相关电子书
更多
Cloak&Dagger 低代码开发师（初级）实战教程 阿里巴巴DevOps 最佳实践手册
相关实验场景
更多
JavaScript实现瀑布流布局 JavaScript实现轮播图展示
推荐文章
更多
重磅来袭！参与评测赢Iphone14 pro！ 文件存储NAS评测征集令！ 招募！寻找技术人的伯乐！ 乘风者计划邀您入驻社区，精彩权益即刻享
下一篇
使用ECS和OSS搭建个人网盘