Last active
November 17, 2018 19:36
-
-
Save Kcko/3a8ddcb5fed9bcd707ded1e6eeebf48e to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/*------------------------------- | |
* Default dropdown styles | |
--------------------------------*/ | |
.tzSelect{ | |
/* This is the container of the new select element */ | |
height:34px; | |
display:inline-block; | |
min-width:200px; | |
position:relative; | |
margin:5px; | |
/* Preloading the background image for the dropdown */ | |
background:url("img/dropdown_slice.png") no-repeat -99999px; | |
} | |
.tzSelect .selectBox{ | |
position:absolute; | |
height:100%; | |
width:100%; | |
/* Font settings */ | |
font:13px/34px "Lucida Sans Unicode", "Lucida Grande", sans-serif; | |
text-align:center; | |
text-shadow:1px 1px 0 #EEEEEE; | |
color:#666666; | |
/* Using CSS3 multiple backgrounds and a fallback */ | |
background:url('img/select_slice.png') repeat-x #ddd; | |
background-image:url('img/select_slice.png'),url('img/select_slice.png'),url('img/select_slice.png'),url('img/select_slice.png'); | |
background-position:0 -136px, right -204px, 50% -68px, 0 0; | |
background-repeat: no-repeat, no-repeat, no-repeat, repeat-x; | |
cursor:pointer; | |
-moz-border-radius:3px; | |
-webkit-border-radius:3px; | |
border-radius:3px; | |
} | |
.tzSelect .selectBox:hover, | |
.tzSelect .selectBox.expanded{ | |
background-position:0 -170px, right -238px, 50% -102px, 0 -34px; | |
color:#2c5667; | |
text-shadow:1px 1px 0 #9bc2d0; | |
} | |
.tzSelect .dropDown{ | |
position:absolute; | |
top:40px; | |
left:0; | |
width:100%; | |
border:1px solid #32333b; | |
list-style:none; | |
z-index:1000; | |
-moz-box-sizing:border-box; | |
-webkit-box-sizing:border-box; | |
box-sizing:border-box; | |
-moz-box-shadow:0 0 4px #111; | |
-webkit-box-shadow:0 0 4px #111; | |
box-shadow:0 0 4px #111; | |
} | |
.tzSelect li{ | |
background-color:#222; | |
cursor:pointer; | |
padding:6px; | |
text-align:center; | |
} | |
.tzSelect li:hover{ | |
background-color:#292929; | |
} | |
/*----------------------------------------------------- | |
* Additional styles for the apple product dropdown | |
------------------------------------------------------*/ | |
.tzSelect .hasDetails{ | |
border-width:0 1px 1px; | |
} | |
.tzSelect .hasDetails li{ | |
height:85px; | |
position:relative; | |
padding:0; | |
text-align:left; | |
/* Again, using CSS3 multiple backgrounds with a fallback */ | |
background:url('img/dropdown_slice.png') repeat-x #222; | |
background-image:url('img/dropdown_slice.png'),url('img/dropdown_slice.png'),url('img/dropdown_slice.png'); | |
background-position: 50% -171px, 0 -85px, 0 0; | |
background-repeat: no-repeat, no-repeat, repeat-x; | |
} | |
.tzSelect .hasDetails li:hover{ | |
background-position: 50% -256px, 0 -85px, 0 0; | |
} | |
.tzSelect .hasDetails li span{ | |
left:88px; | |
position:absolute; | |
top:27px; | |
} | |
.tzSelect .hasDetails li i{ | |
color:#999999; | |
display:block; | |
font-size:12px; | |
} | |
.tzSelect .hasDetails li img{ | |
left:9px; | |
position:absolute; | |
top:13px; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(function($){ | |
$.fn.tzSelect = function(options){ | |
options = $.extend({ | |
render : function(option){ | |
return $('<li>',{ | |
html : option.text() | |
}); | |
}, | |
className : '' | |
},options); | |
return this.each(function(){ | |
// The "this" points to the current select element: | |
var select = $(this); | |
var selectBoxContainer = $('<div>',{ | |
width : select.outerWidth(), | |
className : 'tzSelect', | |
html : '<div class="selectBox"></div>' | |
}); | |
var dropDown = $('<ul>',{className:'dropDown'}); | |
var selectBox = selectBoxContainer.find('.selectBox'); | |
// Looping though the options of the original select element | |
if(options.className){ | |
dropDown.addClass(options.className); | |
} | |
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 = options.render(option); | |
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'); | |
}); | |
}); | |
} | |
})(jQuery); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$(document).ready(function(){ | |
$('select.makeMeFancy').tzSelect({ | |
render : function(option){ | |
return $('<li>',{ | |
html: '<img src="'+option.data('icon')+'" /><span>'+ | |
option.data('html-text')+'</span>' | |
}); | |
}, | |
className : 'hasDetails' | |
}); | |
// Calling the default version of the dropdown | |
$('select.regularSelect').tzSelect(); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment