Introduction
I promised a few blogs (and more to come in the future) to showcase some of Dojo’s quick & easy wow features. First up, a Twitter-esque login box for Dojo. I assume that you already know the basics about Dojo and have included Dojo somewhere in your project. If not, please check out Dojo Campus and the Dojo Toolkit homepage for getting the basics.
The Login Box
Twitter is a very clean and easy to use website. One really cool feature they have is a pop-down login box that stays hidden until the user clicks on it. The majority of the box is done in CSS but the box does require a touch of JavaScript to bring it to life.
The HTML
Let’s get the ball rolling by setting up the HTML.
<html> <head><title>A Twitter login box!</title></head> <body> <a id="loginLink" href="/login"> Login <span id="loginArrow" class="arrow">▼</span> </a> <div id="loginDropdown"> <form action="/login" method="post"> <p> <label for="topUsername" class="bold">Username</label> <input id="topUsername" name="username" title="username" type="text" style="width: 180px;" /> </p> <p> <label for="topPassword" class="bold">Password</label> <input id="topPassword" name="password" title="password" type="password" style="width: 180px;" /> </p> <p> <input id="loginSubmit" value="Login" type="submit" /> <input id="remember" name="remember" value="1" type="checkbox" /> <label for="remember">Remember me</label> </p> </form> </div> </body> </html>
If you load your page in a browser you should have something that looks similar to the image below.
The CSS
That brings me back to the good ole’ days. Let’s spruce it up a bit with a little CSS. Add the CSS below to the <head></head> section of the page we created earlier.
<style type="text/css">
#loginLink {
color: #555;
font-weight: bold;
text-decoration: none;
}
#loginLink.menuOpen {
background-color: #bccdbc;
border: 2px solid #bbcfbb;
border-bottom: 0;
padding: 4px;
padding-bottom: 6px;
}
#loginDropdown {
background-color: #bccdbc;
border: 2px solid #555;
display: none;
font-size: 12px;
padding: 8px 5px;
position: absolute;
text-align: left;
z-index: 999;
}
#loginDropdown input[type=text],#loginDropdown input[type=password] {
display: block;
border: 1px solid #888888;
font-size: 13px;
margin: 0 0 5px;
padding: 3px 2px;
width: 203px;
}
#loginDropdown.menuOpen {
display:block;
}
</style>
I’m not a designer but at least it looks a little better.
The Dojo
Now then, onto the fun stuff! Let’s make use of Dojo and use dojo.connect() to make the login box come to life.
<script type="text/javascript">
dojo.addOnLoad(function() {
// fire whenever a click happens on our login link
dojo.connect(dojo.byId("loginLink"), "onclick", function(e){
// stop the default action from happening which would take us to the login page
dojo.stopEvent(e);
// add the menuOpen class to the loginLink and loginDropdown
// menuOpen puts a border around loginLink and sets display:block for the loginDropdown
dojo.toggleClass("loginLink", "menuOpen");
dojo.toggleClass("loginDropdown", "menuOpen");
// toggles the arrow
var arrow = dojo.byId("loginArrow");
if (arrow.innerHTML == String.fromCharCode(9660)) {
arrow.innerHTML = "▲";
} else {
arrow.innerHTML = "▼";
}
});
});
</script>
The End
That’s all there is to it! With a little touching up of the CSS you can make a box that looks identical to Twitter’s or, better yet, customize it to suit your site. I’ll be posting more wowie Dojo snippets in the near future.
![Reblog this post [with Zemanta]](http://img.zemanta.com/reblog_c.png?x-id=fb6d8b6a-9b9f-41e0-ba1b-deda84d8ca9a)
loading...