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

        
                Login ▼
        
        

                

                        

                                Username
                                
                        
                        

                                Password
                                
                        
                        

                                
                                
                                Remember me
                        
                
        

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 section of the page we created earlier.

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.

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.