代码之家 › 专栏 › 技术社区 › Derick Schoonbee

如何在DIV上使用dijit.tooltipDialog?

dojo dialog

Derick Schoonbee · 技术社区 · 17 年前

我想在单击链接/div时显示一个“下拉对话框”。

到目前为止,有以下代码:

    <html>
        <head>
            <script type="text/javascript" djConfig="isDebug: false, parseOnLoad: true" src="lib/dojo/dojo.js">
            </script>
            <link rel="stylesheet" type="text/css" href="lib/dojo/resources/dojo.css">
            <link rel="stylesheet" type="text/css" href="lib/dijit/themes/tundra/tundra.css">
            <script type="text/javascript">
                dojo.require("dojo.parser");
                dojo.require("dijit.TooltipDialog");
                dojo.require("dijit.form.Form");
                dojo.require("dijit.form.Button");
                dojo.require("dijit.form.TextBox");
                dojo.require("dijit.form.DropDownButton");

                dojo.addOnLoad(function(){

                    console.log("Hello");
                });
            </script>
        </head>
        <body class="tundra">
            <!-- Login DIV -->
            <div id="login">
                <a href="#" title="">Login Link</a>
            </div>

                <div dojoType="dijit.TooltipDialog">
                    <span>Username:</span>
                    <div dojoType="dijit.form.TextBox">
                    </div>
                    <span>Password:</span>
                    <div dojoType="dijit.form.TextBox" type="password">
                    </div>
                    <button dojoType="dijit.form.Button" type="submit">
                        Login
                    </button>
                </div>

            <!-- Login Button -->
            <button dojoType="dijit.form.DropDownButton"">
                <span>Login Button</span>
                <div dojoType="dijit.TooltipDialog">
                    <span>Username:</span>
                    <div dojoType="dijit.form.TextBox">
                    </div>
                    <span>Password:</span>
                    <div dojoType="dijit.form.TextBox" type="password">
                    </div>
                    <button dojoType="dijit.form.Button" type="submit">
                        Login
                    </button>
                </div>
            </button>

        </body>
    </html>

如何使登录链接的行为与登录按钮类似?或者在Dojo中有其他方法可以做到这一点吗?

2 回复 | 直到 15 年前

belzebu 17 年前

有一个很好的帖子 link -> tooltips on anchors

它不适用于tooltipdialogs,但它模拟它的功能。

-或

<div id="login" dojoType="dijit.form.DropDownButton">
    <a href="#" title="">Login Link</a> 
    <div id="loginDialog" dojoType="dijit.TooltipDialog" style="display:none" >
        <span>Username:</span>
        <div dojoType="dijit.form.TextBox">
        </div>
        <span>Password:</span>
        <div dojoType="dijit.form.TextBox" type="password">
        </div>
        <button dojoType="dijit.form.Button" type="submit">
            Login
        </button>
    </div>

Meir 15 年前

另一种方法是使用DropDownButton,但是用不同的样式替换与该按钮相关联的CSS属性,使该按钮看起来像一个锚。