Стилизованный выпадающий список

Порой при верстке сайта нужно сделать выпадающий список, подходящий под дизайн сата. Для этого лучше всего воспользоваться готовым решением, а не изобретать велосипед.

Представляю Вам приложение на javascript для выпадающих списков. Это приложенеи называется "cusel".

Для подключения этого приложения потребуется вставить на Ваш сайт следующие теги:

<link href="cusel.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="cusel-min-2.3.1.js"></script>

Скачать стили можно по ссылке, а скрипты по ссылкам jquery-1.5.2.min.js и cusel-min-2.3.1.js.

Далее нам потребуются три картинки - это вид тега <select>, вид тега <select> при наведении и вид тега <select> с атрибутом disabled="disabled".

После подключения скриптов и стилий и после того, как Вы скачали себе на сайт виды тега <select> выберите свой вид отображения самого выпадающего списка, по примерам предложенным далее.

 

 

Тег <select> со скролом и длинным значением в <option>

Стилизованный тег <select> со скралом, если тегов <option> больше заданного числа, и растягивающийся по ширине, относилельно самого длинного значения тега <option>.

Следует учесть, что картики вида тега <select> должны быть шире самого длинного значени тега <option>.

Пример использования:

<form action="#">
    <div class="lineForm">
        <select class="sel80" id="country" name="country" tabindex="2">
        <option value="1">Россия</option>
        <option value="2">Украина</option>
        <option value="3">Чехия</option>
        <option value="4">Словакия</option>
        <option value="5">Румыния</option>
        <option value="6">Болгария</option>
        <option value="7">Польша</option>
        <option value="8">Германия</option>
        <option value="9">Франция</option>
        <option value="10">Англия</option>
        <option value="11">Испания</option>
        <option value="12">аравия аравия аравия аравия аравия</option>
        <option selected="selected" value="1000">Выберите страну...</option>
        </select>
    </div>
</form>

var params = {
    changedEl: ".lineForm select",
    visRows: 5,
    scrollArrows: true
}

cuSel(params);

На экране Вы увидите:

Высота выпадающего списка подстраивается под содержимое

Если Вам требуется, чтобы содержимое тега <select> было полностью показано на экране, без прокрутки, следует воспользоваться следующим примером.

Пример использования:

<form action="#">
    <div class="lineForm3">
        <select id="city" name="city" tabindex="1">
        <option value="">Киев</option>
        <option value="2">Львов</option>
        <option value="3">Дон</option>

        <option value="4">Ялта</option>
        <option value="2">Львов</option>
        <option value="3">Дон</option>
        <option value="4">Ялта</option>
        </select>
    </div>
</form>

var params = {
    changedEl: "#city",
    scrollArrows: false
}

cuSel(params);

На экране Вы увидите:

Тегам <option> можно задавать свои классы для оформления

Если Вам потребуется, например, внутри выпадающего списка каждому пункту задать свое фоновое изображение или свой отступ, то можно воспользоваться следующим примером.

Пример использования:

<form action="#">
    <div class="lineForm">
        <select id="social" name="social">
        <option value="0">Выбери соц сеть</option>
        <option value="1" class="twitter">twitter</option>
        <option value="2" class="vkontakte">вконтакте</option>
        <option value="3" class="lj">Live journal</option>
        <option value="4" class="li">Live internet</option>
        </select>
    </div>
</form>

var params = {
    changedEl: ".lineForm select",
    visRows: 5,
    scrollArrows: true
}

cuSel(params);

На экране Вы увидите:

Дополнительные теги внутри тега <option>

Если нужно, например, вставить в выпадающий список дополнительно, допустим тег <input />, то воспользуйтесь этим примером.

Пример использования:

<form action="#">
    <div class="lineForm">
        <select id="animals-50" name="animals-50">
        <option value="1" addTags="<div class='kv'></div>">Медведь</option>
        <option value="2" addTags="<input type='checkbox' />">Волк</option>

        <option value="3">Заяц</option>
        <option value="4">Ежик</option>
        </select>
    </div>
</form>

var params = {
    changedEl: ".lineForm select",
    visRows: 5,
    scrollArrows: true
}

cuSel(params);

На экране Вы увидите:

Теги <select> в скрытом блоке

Иногда нужно не покзывать сразу выпадающий список. Для таких случаев можно воспользоваться следующим примером.

Ширина пявляющихся выпадающих списков задается через class.

Пример использования:

<form action="#">
    <div class="lineForm">    
        <div style="display: none">
        <select id="city2" name="city2" class="wid100">
        <option value="1">Киев</option>
        <option value="2">Львов</option>
        <option value="3">Донецк</option>
        <option value="4">Ялта</option>
        <option value="2">Львов</option>
        <option value="3">Донецк</option>
        <option value="4">Ялта</option>
        </select>
        <select id="city20" name="city20" class="wid100">
        <option value="1">Киев</option>
        <option value="2">Львов</option>
        <option value="3">Донецк</option>
        <option value="4">Ялта</option>
        </select>
        <select id="city30" name="city30" class="wid100">
        <option value="1">Киев</option>
        <option value="2">Львов</option>
        <option value="3">Донецк</option>
        <option value="4">Ялта</option>
        <option value="2">Львов</option>
        <option value="3">Донецк</option>
        <option value="4">Ялта</option>
        <option value="2">Львов</option>
        <option value="3">Донецк</option>
        <option value="4">Ялта</option>
        </select>
        </div>
        <input type="button" value="показать" id="showSel" />
    </div>
</form>

var params = {
    changedEl: ".lineForm select",
    visRows: 5,
    scrollArrows: true
}

cuSel(params);

На экране Вы увидите:

Тег <select> с атрибутом disabled="disabled"

Чтобы заблокировать тег <select> можно воспользоваться следующим примером.

Пример использования:

<form action="#">
    <div class="lineForm">    
        <select id="city-disabled" name="city-disabled" disabled="disabled">
        <option value="1">Киев</option>
        <option value="2">Львов</option>
        <option value="3">Дон</option>
        <option value="4">Ялта</option>
        </select>
    </div>
</form>

var params = {
    changedEl: ".lineForm select",
    visRows: 5,
    scrollArrows: true
}

cuSel(params);

На экране Вы увидите:

Тег <select> реагирующий на изменение

Если надо показать какую-либо информацию, взависимости от выбранного пункта в выпадающем списке, то этот пример как раз подойдет.

Пример использования:

<form action="#">
    <div class="lineForm">    
        <select id="city-3" name="city-3" onChange="alert('произошел onchange')">
        <option value="1">Киев</option>
        <option value="2">Львов</option>
        <option value="3">Дон</option>
        <option value="4">Ялта</option>
        </select>
    </div>
</form>

var params = {
    changedEl: ".lineForm select",
    visRows: 5,
    scrollArrows: true
}

cuSel(params);

На экране Вы увидите:

Динамическое добавление пунктов в выпадающий список

Для динамического добавления пунктов в выпадающий список нужно в тег <select> добавить теги <option>. Эта операция рассмотрена в этом примере.

Пример использования:

<form action="#">
    <div class="lineForm">
        <select id="animals" name="animals">
        <option value="1">Медведь</option>
        <option value="2">Волк</option>
        <option value="3">Заяц</option>
        <option value="4">Ежик</option>
        </select>
        <input type="button" value="добавить зверей" id="addAnimals" />
    </div>
</form>

jQuery(document).ready(function(){
jQuery("#addSelect").click(
    function(){
        var addedSelect = '<select id="add-select" name="add-select">'+
                          '<option value="1">доллар США</option>'+
                          '<option value="2">доллар канадский</option>'+
                          '<option value="3">доллар новозеландский</option>'+
                          '<option value="4">фунт стерлинг</option>'+
                          '<option value="5">гривна</option>'+
                          '<option value="6">рубль</option>'+
                          '<option value="7">евро</option>'+
                          '</select>';
        jQuery(this).replaceWith(addedSelect);
        
        var params = {
            changedEl: ".lineForm select",
            visRows: 4,
            checkZIndex: true
        }
        cuSel(params);    
});

На экране Вы увидите:

Динамическая вставка тега <select>

Если нужно вставить на страницу выпадающий список, после определенный действий пользователя, то рассмотрите следующий пример.

Пример использования:

<form action="#">
    <div class="lineForm">
        <input type="button" value="добавить select" id="addSelect" />
    </div>
</form>

var params = {
    changedEl: ".lineForm select",
    visRows: 5,
    scrollArrows: true
}

cuSel(params);

На экране Вы увидите: