Порой при верстке сайта нужно сделать выпадающий список, подходящий под дизайн сата. Для этого лучше всего воспользоваться готовым решением, а не изобретать велосипед.
Представляю Вам приложение на 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);