×

Welcome to TagMyCode

Please login or create account to add a snippet.
 

jQuery fancy select dropdown menu

0
0
 
0
Language: Javascript
Posted by: A973C FR
Added: Sep 24, 2012 5:37 AM
Views: 1862
Tags: dropdown fancy jquery menu select
  1.     /*
  2.      
  3.       Copyright (c) 2011 Koen Ekelschot
  4.      
  5.       ---
  6.      
  7.       Version 1.0.1 - Jan. 30, 2011
  8.      
  9.       A jQuery plugin which replaces <select> elements with a fancy dropdown menu
  10.      
  11.       Usage:
  12.      
  13.       - $(selector).fancyDropdown(); //returns jQuery chainable object
  14.      
  15.       Prerequisites:
  16.      
  17.       - jQuery hasEventListener plugin by sebastien-p: https://github.com/sebastien-p/jquery.hasEventListener
  18.      
  19.     */
  20.      
  21.     (function($) {
  22.     $.fn.fancyDropdown = function() {
  23.     return this.each(function() {
  24.     var el = $(this);
  25.     var id = $(this).attr('id');
  26.     el.hide();
  27.     //create needed HTML
  28.     var html = '<div class="dropdown" id="'+id+'_dropdown"></div><ul class="dropdownlist" id="'+id+'_dropdownlist">';
  29.     $('option', el).each(function() {
  30.     var realvalue = $(this).attr("value");
  31.     var img = $(this).attr("data-img");
  32.     var info = $(this).attr("data-info");
  33.     if (info == null) {
  34.     html += '<li data-realvalue="'+realvalue+'"><div class="imgholder"><img src="'+img+'" /></div><p class="no-info"><strong>'+$(this).text()+'</strong></p><div class="clearfix"></div>';
  35.     } else {
  36.     html += '<li data-realvalue="'+realvalue+'"><div class="imgholder"><img src="'+img+'" /></div><p><strong>'+$(this).text()+'</strong><br />'+info+'</p><div class="clearfix"></div>';
  37.     }
  38.     });
  39.     html += '</ul>';
  40.     el.after(html);
  41.     //set initial values
  42.     var initoption = $('li[data-realvalue="'+el.val()+'"]', $('#'+id+'_dropdownlist'));
  43.     initoption.attr('class', 'active');
  44.     $('#'+id+'_dropdown').attr('data-realvalue', initoption.attr('data-realvalue')).html(initoption.html());
  45.     //bind click event
  46.     if ($("body").hasEventListener("click.customdropdown").length == 0) {
  47.     //bind the click event only once
  48.     $('body').bind('click.customdropdown', function(e) {
  49.     var elements = $(e.target).parents().andSelf();
  50.     var dropdown = elements.filter('.dropdown');
  51.     var dropdownlist = elements.filter('.dropdownlist');
  52.     if (dropdown.length == 0 && dropdownlist.length == 0) {
  53.     //not clicked on .dropdown or .dropdownlist, hide .dropdownlist
  54.     $(".dropdownlist").fadeOut('fast');
  55.     $(".dropdown").removeClass('active_dropdown');
  56.     } else {
  57.     if (dropdown.length != 0) {
  58.     //clicked on .dropdown
  59.     var dropdownid = $(dropdown[0]).attr('id');
  60.     if ($("#"+dropdownid).hasClass('active_dropdown')) {
  61.     //close all .dropdownlist
  62.     $(".dropdownlist").fadeOut('fast');
  63.     $(".dropdown").removeClass('active_dropdown');
  64.     } else {
  65.     //close all .dropdownlist
  66.     $(".dropdownlist").fadeOut('fast');
  67.     $(".dropdown").removeClass('active_dropdown');
  68.     //and open the clicked one
  69.     $("#"+dropdownid).addClass('active_dropdown');
  70.     $("#"+dropdownid+"list li.active").addClass('hover').siblings().removeClass('hover');
  71.     var pos = $(dropdown[0]).position();
  72.     $("#"+dropdownid+"list").css({
  73.     top: (pos.top+$(dropdown[0]).outerHeight())+'px',
  74.     left: pos.left+'px'
  75.     }).fadeIn('fast');
  76.     }
  77.     } else {
  78.     //clicked on .dropdownlist
  79.     var dropdownid = $(dropdownlist[0]).attr('id').slice(0, -4);
  80.     var li = $(elements.filter('li')[0]);
  81.     $('#'+dropdownid).removeClass('active_dropdown').attr('data-realvalue', li.attr('data-realvalue')).html(li.html());
  82.     li.addClass('active').siblings().removeClass('active');
  83.     $(dropdownlist[0]).fadeOut('fast');
  84.     //reflect change to original <select> element
  85.     $("#"+dropdownid.slice(0, -9)).val(li.attr('data-realvalue'));
  86.     }
  87.     }
  88.     });
  89.     }
  90.     //add hover states
  91.     $(".dropdownlist li").live('mouseover', function() {
  92.     $(this).addClass("hover").siblings().removeClass("hover");
  93.     });
  94.     $(".dropdown").live('mouseover', function() {
  95.     $(this).addClass('hover_dropdown');
  96.     }).live('mouseout', function() {
  97.     $(this).removeClass('hover_dropdown');
  98.     });
  99.     });
  100.     };
  101.     })(jQuery);

Write a comment

To post comments, please log in or register.