Улучшаем тэг select с Jquery

Когда дело доходит до организации эффективно JQuery плагин, один из лучших вариантов. Есть много преимуществ в этом - ваш код становится легче модифицировать и повторяющиеся задачи решаются естественным путем. Это также повышает скорость, с которой вы разрабатываете, так как плагин организации способствует повторному использованию кода. Сегодня мы сделаем наши выпадающие списки выбора красивей и даже добавим к ним картинку, что бы пользователь имел больше информации о вашем товаре.

И так начнем.

HTML код

<form method="post" action="">
<select name="fancySelect" class="makeMeFancy">
<option value="0" selected="selected" data-skip="1">Выберите продукт</option>
<option  value="1" data-icon="img/products/js.png" data-html-text="javascript +  jQuery для начинающих в видеоформате&lt;i&gt;посмотреть  видеопрезентацию&lt;/i&gt;">javascript + jQuery для  начинающих в видеоформате</option>
<option value="2"  data-icon="img/products/php.png" data-html-text="PHP + MySQL для  начинающих&lt;i&gt;купить&lt;/i&gt;">PHP + MySQL для  начинающих</option>
<option value="3"  data-icon="img/products/wp.png" data-html-text="WordPress -  профессиональный блог за один  день&lt;i&gt;скачать&lt;/i&gt;">WordPress -  профессиональный блог за один день</option>
<option  value="4" data-icon="img/products/joomla.png" data-html-text="Joomla -  профессиональный сайт за один  день&lt;i&gt;купить&lt;/i&gt;">Joomla -  профессиональный сайт за один день</option>
        </select>
    </form>

Картинка для пункта меню будет передаваться через атрибут data-icon="сдесь адрес картинки"
Описание пункта через атрибут data-html-text="тут описание"

CSS стиль
Создадим файл css/styles.css и пропишем в него:

#page{
    width:490px;
    margin:50px auto;
}

#page h1{
    font-weight:normal;
    text-indent:-99999px;
    overflow:hidden;
    background:url('../img/your_product.png') no-repeat;
    width:490px;
    height:36px;
}

#page form{
    margin:20px auto;
    width:460px;
}

.tzSelect{
    
    /* Контейнер для нового элемента select */
    
    height:34px;
    display:inline-block;
    min-width:460px;
    position:relative;
    
    /* Предварительная загрузка фонового изображения для выпадающих пунктов */
    background:url("../img/dropdown_slice.png") no-repeat -99999px;
}

.tzSelect .selectBox{
    position:absolute;
    
    height:100%;
    width:100%;
    
    /* Установка шрифта */
    
    font:13px/34px "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    text-align:center;
    text-shadow:1px 1px 0 #EEEEEE;
    color:#666666;

    /* Использование множественных фонов CSS3 */
    
    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;
    border-width:0 1px 1px;
    list-style:none;
    
    -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{
    height:85px;
    cursor:pointer;
    position:relative;
    
    /* Использование множественных фонов CSS3 */
    
    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 li:hover{
    background-position: 50% -256px, 0 -85px, 0 0;
}

.tzSelect li span{
    left:88px;
    position:absolute;
    top:27px;
}

.tzSelect li i{
    color:#999999;
    display:block;
    font-size:12px;
}

.tzSelect li img{
    left:9px;
    position:absolute;
    top:13px;
}

JS скрипт
Создаем js/script.js и прописуем:

$(document).ready(function(){
    
    // Элемент select, который будет замещаться:
    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');
    
    // Цикл по оригинальному элементу select
    
    select.find('option').each(function(i){
        var option = $(this);
        
        if(i==select.attr('selectedIndex')){
            selectBox.html(option.text());
        }
        
        // Так как используется jQuery 1.4.3, то мы можем получить доступ 
        // к атрибутам данных HTML5 с помощью метода data().
        
        if(option.data('skip')){
            return true;
        }
        
        // Создаем выпадающий пункт в соответствии
        // с иконкой данных и атрибутами HTML5 данных:
        
        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');
            
            // Когда происходит событие click, мы также отражаем
            // изменения в оригинальном элементе select:
            select.val(option.val());
            
            return false;
        });
        
        dropDown.append(li);
    });
    
    selectBoxContainer.append(dropDown.hide());
    select.hide().after(selectBoxContainer);
    
    // Привязываем пользовательские события show и hide к элементу 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;
    });

    // Если нажать кнопку мыши где-нибудь на странице при открытом элементе dropDown,
    // он будет спрятан:
    
    $(document).click(function(){
        dropDown.trigger('hide');
    });
});

Подключим библиотеку jquery, наш js и наши css стили между тегами head:

<link rel="stylesheet" type="text/css" href="css/styles.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"
></script>
<script src="js/script.js"></script>

Вот и всё! Готова

Общетематический форум.: Улучшаем тэг select с Jquery - Общетематический форум.

Toggle shoutbox