I would like to show a "drop down dialog" when I click my link/div.
So far have the following code:
<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>
How can I make my Login Link behave like Login Button? Or is there another way I can do this in Dojo?