Question

当我点击我的链接/ 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中做到这一点吗？

Answer 1

有一个不错的帖子 link -> tooltips on anchors

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

-OR -

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

Answer 2

另一种方法是使用DropDown Button，但用不同的样式替换与按钮关联的css属性，使按钮看起来像锚。

如何在div上使用dijit.TooltipDialog？

2 个答案: