Posted By

touffies on 11/12/10

Tagged

Versions (?)

Last Edited at 11/12/10 12:00am

Statistics

Viewed 1111 times

Favorited by 1 user(s)

Related snippets

Custom Dropdown

/ Published in: jQuery

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

Highlighted TextExpand

/*  ------------------------------------------------------------------
    Custom DropDown -------------------------------------------------- */
    function closeCurrentDropDown(elem) { 
        var $current_open = $(".dropdown_b", elem);
        $current_open.hide();
        $(elem).removeClass("open");
        $().unbind("click");
    }

$.fn.cssDropDown = function () {
        return this.each( function() {
            var current;

$(".container_dropdown", this)
            .each(function(){
                var $open   = $(".dropdown_b", this);
                var id      = $open.attr("id").replace('drpd_', '');
                var $elm    = $("#"+ id, this);
                var $elm_id = $("#"+ id +"_id", this);
                
                if($elm_id.size() > 0){
                    var $selected = $("li > a[@rel='"+ $elm_id.val()+"']", $open);
                    
                    if($selected.size() > 0){
                        if ( $elm.is("div")){ $elm.html($selected.html()); } 
                        else{ $elm.attr("readonly", "readonly").val($selected.text()); }
                    }
                }
                if(!$open.hasClass("noClick")){
                    $("li", $open)
                    .bind("click", function() {
                       var $a = $("a", this);
                        if ($elm.is("div")){ 
                            $elm.html($a.html());
                        }else{ 
                            $elm.val($a.text());
                            $elm_id.val($a.attr("rel"));
                        }
                    });
                }
            })
            .bind("click", function(e){
                var $this = $(this);
                var $open;
                if(current !== null && current != this){
                     closeCurrentDropDown(current);
                     current = null;
                }

if(!$this.hasClass("open")){
                    current = this;
                    $open = $(".dropdown_b", $this);
                    $this.addClass("open");
                    $open.show();
                    $().bind("click", function() {
                        closeCurrentDropDown(current);
                    });
                }else{
                    closeCurrentDropDown(current);
                    current = null;
                }
                return false;
            })
            .removeClass("open")
            .show();
        });
    };

Report this snippet Tweet

Comments

Subscribe to comments

Comment:

You need to login to post a comment.