Select, option and jquery

    Rating: ★★★★☆
    View: 192
    Download: 94
    Từ khóa:

    HTML Markup

    Java Markup

    $(document).ready(function(){
    	
    	// The select element to be replaced:
    	var select = $('select.makeMeFancy');
    
    	var selectBoxContainer = $('
    ',{ width : select.outerWidth(), className : 'tzSelect', html : '
    ' }); var dropDown = $('
      ',{className:'dropDown'}); var selectBox = selectBoxContainer.find('.selectBox'); // Looping though the options of the original select element select.find('option').each(function(i){ var option = $(this); if(i==select.attr('selectedIndex')){ selectBox.html(option.text()); } // As of jQuery 1.4.3 we can access HTML5 // data attributes with the data() method. if(option.data('skip')){ return true; } // Creating a dropdown item according to the // data-icon and data-html-text HTML5 attributes: var li = $('
    • ',{ html: ''+ option.data('html-text')+'' }); li.click(function(){ selectBox.html(option.text()); dropDown.trigger('hide'); // When a click occurs, we are also reflecting // the change on the original select element: select.val(option.val()); return false; }); dropDown.append(li); }); selectBoxContainer.append(dropDown.hide()); select.hide().after(selectBoxContainer); // Binding custom show and hide events on the dropDown: dropDown.bind('show',function(){ if(dropDown.is(':animated')){ return false; } selectBox.addClass('expanded'); dropDown.slideDown(); }).bind('hide',function(){ if(dropDown.is(':animated')){ return false; } selectBox.removeClass('expanded'); dropDown.slideUp(); }).bind('toggle',function(){ if(selectBox.hasClass('expanded')){ dropDown.trigger('hide'); } else dropDown.trigger('show'); }); selectBox.click(function(){ dropDown.trigger('toggle'); return false; }); // If we click anywhere on the page, while the // dropdown is shown, it is going to be hidden: $(document).click(function(){ dropDown.trigger('hide'); }); });

    CSS Markup

    .tzSelect{
    	height:35px;
    	display:inline-block;
    	min-width:200px;
    	position:relative;
    	border: 1px solid #ddd;
    }
    
    .tzSelect .selectBox{
    	position:absolute;
    	height:100%;
    	width:100%;
    	/* Font settings */
    	font:13px/34px arial, sans-serif;
    	text-align:center;
    	color:#2d2d2d;
    	cursor:pointer;
    	-moz-border-radius:2px;
    	-webkit-border-radius:2px;
    	border-radius:2px;
    }
    
    .tzSelect .selectBox:hover,
    .tzSelect .selectBox.expanded{
    	color:#2d2d2d;
    	
    }
    
    .tzSelect .dropDown{
    	position:absolute;
    	top:20px;
    	left:0;
    	width:100%;
    	list-style:none;
    	padding:0px;
    }
    
    
    .tzSelect li{
    	height:50px;
    	cursor:pointer;
    	position:relative;
    	border-bottom:1px solid #ddd;
    	border-left:1px solid #ddd;
    	border-right:1px solid #ddd;
    	
    }
    
    .tzSelect li:hover{
    }
    
    .tzSelect li span{
    	left: 70px;
    position: absolute;
    top: 10px;
    font:normal 12px arial 
    }
    
    .tzSelect li i{
    	color:#999999;
    	display:block;
    	font-size:12px;
    }
    
    .tzSelect li img{
    	left:10px;
    	position:absolute;
    	top: 10px;
    	width: 35px;
    }
    

     

    loading Đang tải...

    template được ưa chuộng