Posted By

touffies on 11/12/10


Tagged

form dropdown jquery custom


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

verostudios


Custom Dropdown


 / Published in: jQuery
 

Custom dropdown field, replace defaut dropdown style with custom design. This function does not replace the select field.

  1. /* ------------------------------------------------------------------
  2.   Custom DropDown -------------------------------------------------- */
  3. function closeCurrentDropDown(elem) {
  4. var $current_open = $(".dropdown_b", elem);
  5. $current_open.hide();
  6. $(elem).removeClass("open");
  7. $().unbind("click");
  8. }
  9.  
  10. $.fn.cssDropDown = function () {
  11. return this.each( function() {
  12. var current;
  13.  
  14. $(".container_dropdown", this)
  15. .each(function(){
  16. var $open = $(".dropdown_b", this);
  17. var id = $open.attr("id").replace('drpd_', '');
  18. var $elm = $("#"+ id, this);
  19. var $elm_id = $("#"+ id +"_id", this);
  20.  
  21. if($elm_id.size() > 0){
  22. var $selected = $("li > a[@rel='"+ $elm_id.val()+"']", $open);
  23.  
  24. if($selected.size() > 0){
  25. if ( $elm.is("div")){ $elm.html($selected.html()); }
  26. else{ $elm.attr("readonly", "readonly").val($selected.text()); }
  27. }
  28. }
  29. if(!$open.hasClass("noClick")){
  30. $("li", $open)
  31. .bind("click", function() {
  32. var $a = $("a", this);
  33. if ($elm.is("div")){
  34. $elm.html($a.html());
  35. }else{
  36. $elm.val($a.text());
  37. $elm_id.val($a.attr("rel"));
  38. }
  39. });
  40. }
  41. })
  42. .bind("click", function(e){
  43. var $this = $(this);
  44. var $open;
  45. if(current !== null && current != this){
  46. closeCurrentDropDown(current);
  47. current = null;
  48. }
  49.  
  50. if(!$this.hasClass("open")){
  51. current = this;
  52. $open = $(".dropdown_b", $this);
  53. $this.addClass("open");
  54. $open.show();
  55. $().bind("click", function() {
  56. closeCurrentDropDown(current);
  57. });
  58. }else{
  59. closeCurrentDropDown(current);
  60. current = null;
  61. }
  62. return false;
  63. })
  64. .removeClass("open")
  65. .show();
  66. });
  67. };

Report this snippet  

You need to login to post a comment.