Jquery 漂亮的select效果
css文件比较大，请到演示页面查看源码
CSS Code
- <div id="page">
- <h1>选择您的产品</h1>
- <form method="post" action="">
- <!-- We are going to use jQuery to hide the select element and replace it -->
- <select name="fancySelect" class="makeMeFancy">
- <!-- Notice the HTML5 data attributes -->
- <option value="0" selected="selected" data-skip="1">Choose Your Product</option>
- <option value="1" data-icon="img/products/iphone.png" data-html-text="iPhone 4<i>in stock</i>">iPhone 4</option>
- <option value="2" data-icon="img/products/ipod.png" data-html-text="iPod <i>in stock</i>">iPod</option>
- <option value="3" data-icon="img/products/air.png" data-html-text="MacBook Air<i>out of stock</i>">MacBook Air</option>
- <option value="4" data-icon="img/products/imac.png" data-html-text="iMac Station<i>in stock</i>">iMac Station</option>
- </select>
- </form>
- </div>
JavaScript Code
- $(document).ready(function(){
- // The select element to be replaced:
- var select = $('select.makeMeFancy');
- 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
- 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 = $('<li>',{
- html: '<img src="'+option.data('icon')+'" /><span>'+
- option.data('html-text')+'</span>'
- });
- 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');
- });
- });
相关推荐
周公周金桥 2020-09-06
大象从不倒下 2020-07-31
AlisaClass 2020-07-19
MaureenChen 2020-04-21
xingguanghai 2020-03-13
teresalxm 2020-02-18
木四小哥 2013-05-14
SoShellon 2013-06-01
Simagle 2013-05-31
羽化大刀Chrome 2013-05-31
waterv 2020-01-08
LutosX 2013-07-29
vanturman 2013-06-27
wutongyuq 2013-04-12
luoqu 2013-04-10
today0 2020-09-22
89520292 2020-09-18
bigname 2020-08-25