Click here to Skip to main content
Click here to Skip to main content
Go to top

Simple Drop Down Panel jQuery Widget

, 18 Sep 2012
Rate this:
Please Sign up or sign in to vote.
jQuery widget structure explained on a simple drop down panel control.

Introduction

jQuery widgets is a very handy tool for building modern web UI. In this little tutorial we will build a simple yet useful dropdown panel widget.  

Using the code

We will cover drop down panel and drop-down button within a div. So we can call simply apply the drop down panel feature like: 

$("#userMenu").ddpanel();    

And the div will have two classes to define a drop-down button (ddpanel-button) and drop-down area (ddpanel-box).  

<div id="userMenu">
  <a class="ddpanel-button">User Menu</a>
  <div class="ddpanel-box">
      <!-- whatever want to display -->
      <a href="#">Log out</a>
  </div>
</div>

How it works 

First of all when a widget is applied to a div element, it looks for the button and box elements. This feature is hardcoded:

_create: function() {
    var self = this, o = self.options, el = self.element;
 
    // find the drop-down button and drop-down panel elements    
    o.objPanel = el.find('.ddpanel-box');
    o.objButon = el.find('.ddpanel-link');
 
    // hide panel
    o.objPanel.hide();
 
    // find absolute position of the button element
    var position = o.objButon.position();
    var bh          = o.objButon.height();
 
        // align panel with the button
    o.objPanel.css({
        position: 'absolute',
        left: position.left,
        top:  position.top + bh
    });
 
    // show the panel when the drop-down button clicked
    o.objButon.click(function(){
        o.objPanel.slideDown(o.effect);        
    });

        // hide panel when user clicks anywhere on the document
        $(document).mouseup(function (e){
               o.objPanel.hide();
        }); 
}

The _create function is called automatically by the jQuery widget factory when a widget is applied to an element. So we put out the initialization logic here. Also the widget factory gives the element widget applied as:

el = self.element;  

Also we define an options variable to store widget-specific data such as settings.  

options: {
    objPanel: '',
    objButon: '',
    effect: 'fast'
}

You may name the options variable whatever you want but options is a special variable name recognized by the widget factory class. This enables to set options for the widget easily. 

$('#userMenu').ddpanel({
       effect:'slow'
});

As you can see, the parameter you give the widget create function is recognized as options.

Now, we show our drop down panel when the user clicks the drop down button and hide the panel when the user clicks anywhere on the document. 

But in case we don't want the panel to be hidden when the user clicks on the panel. In this case, we need to modify the hide-logic something like:

$(document).mouseup(function (e){
    if (o.objPanel.has(e.target).length === 0){
        o.objPanel.hide();
    }
});

This time we check if the clicked area is not in the panel div. Have fun!

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Evren Yortuçboylu
Software Developer (Senior)
Turkey Turkey
No Biography provided
Follow on   Twitter

Comments and Discussions

 
GeneralLooks very good PinmemberOlivier Giulieri23-Sep-12 21:56 
GeneralRe: Looks very good PinmemberEvren Yortuçboylu25-Sep-12 20:36 
GeneralMy vote of 5 PinmvpKanasz Robert19-Sep-12 4:35 
GeneralRe: My vote of 5 PinmemberEvren Yortuçboylu19-Sep-12 5:57 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web02 | 2.8.140922.1 | Last Updated 18 Sep 2012
Article Copyright 2012 by Evren Yortuçboylu
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid