Click here to Skip to main content
15,867,453 members
Articles / Programming Languages / Javascript
Tip/Trick

Simple Drop Down Panel jQuery Widget

Rate me:
Please Sign up or sign in to vote.
4.94/5 (4 votes)
18 Sep 2012CPOL1 min read 25.6K   487   18   4
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: 

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

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

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

JavaScript
_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:

JavaScript
el = self.element;  

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

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

JavaScript
$('#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:

JavaScript
$(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)


Written By
Software Developer (Senior)
Turkey Turkey
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
GeneralLooks very good Pin
Olivier_Giulieri23-Sep-12 21:56
Olivier_Giulieri23-Sep-12 21:56 
GeneralRe: Looks very good Pin
Evren Yortuçboylu25-Sep-12 20:36
Evren Yortuçboylu25-Sep-12 20:36 
GeneralMy vote of 5 Pin
Kanasz Robert19-Sep-12 4:35
professionalKanasz Robert19-Sep-12 4:35 
GeneralRe: My vote of 5 Pin
Evren Yortuçboylu19-Sep-12 5:57
Evren Yortuçboylu19-Sep-12 5:57 

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

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