Menu Widget

Posted: February 6, 2011 in jQuery
Tags: ,

I was trying to make my own menu widget using jQuery and  I came with this below Widget.


//Menu Widget created by Rupesh
(function ($) {

    JDQMenu = {

        options: {

          items: { "Reports":[{

                      "File" : { "Report1":"#","Report2":"#","Report3":"#" }

                      ,"Edit" : { "Report4":"#",  "Report5":"#" }

                      ,"Report" : { "Report6":"#",  "Report7":"#" }

                      ,"Help" : {"How to see Reports":"#"}

                  }]

                  ,"Clients" : [{

                      "Search" : { "Client1":"#","Client2":"#","v3":"#" }

                      ,"Edit" : { "Client4":"#",  "Client5":"#" }

                      ,"Help" : {"How to see Clients":"#"}

                  }]

                  ,"Tools" : [{

                      "View": { "Tool1":"#","Tool2":"#","Tool3":"#"}

                       ,"Help" : {"How to find Tools":"#"}

                  }]

            }

            ,selected_menu : "Reports"

        }

        ,_init : function ( ) {

           this._create_menu( );

        }

        ,_create_menu : function ( ) {

           var that= this,el = that.element,itms=that.options.items,sel=$.trim(that.options.selected_menu);

           if( sel !="default") {

           //save element in widget cache

            var data = $(this).data(sel);

                //refresh the menu

                el.empty();

                //take element from inner widget cache data

                if(data) {

                    el.append(data);

                } else {

                    if( itms[sel] ) {

                        var menu_itms = itms[sel][0];

                        $.each(menu_itms , function ( i,v ) {

                            el.append( $("
	<li>").append( $("<a>",{"class":"menu_trigger", "href":"#","text":i}) ).append("") );</a></li>
                            $.each(v,function(n,k){

                                el.find("ul#"+i+"").append($("<a>",{"href":k,"text":n}));</a>

                            })

                        })

                       $(this).data(sel,el.find("li"));

                   }

                }

                //Show the menu by triggering it

                $("a.menu_trigger").first().trigger("mousedown");

           }

        }

        ,show_menu : function (el) {

            el  = el.replace("#",'');

            this.options.selected_menu = el;

            this._create_menu( );

        }

    };

    $.widget("ui.JDQMenu", JDQMenu);    

})( jQuery );

Now for using this widget you just have to add one ul element and call our JDQMenu widget’s.

 
<ul id="menu">
</ul>
<script type="text/javascript?
$("#menu").JDQMenu();
</script>
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s