24 Листопад 2012
41 240
Рубрика: уроки

Урок: создание выпадающего списка на js+css

Как создать выпадающий список, используя js и css

Всем привет, друзья. Надеюсь, этот блог не станет заложником одной сферы деятельности — программирования. Ведь я занимаюсь не только кодингом, но и кучей других, не менее интересных, вещей, но о них напишу позже. Пока же о кодинге: недавно я столкнулся с вопросом, как сделать красивый и удобный выпадающий список без дополнительных плагинов и мне захотелось написать его самостоятельно. Уверен, в сети вы найдете много вариаций на эту тему, но мне было лень копаться, да и лезть в чужой код не самое большое удовольствие, а вот настроить список под себя нужно. Поэтому сегодя я хочу предложить вам урок по созданию выпадающего списка с использованием jQuery + CSS. Кроме того, сделанный настолько просто, насколько это возможно, чтобы во всем было легко разобраться.

Странно, зачем делать что-то со списком, когда у нас есть классический select, с которым можно делать что угодно, даже стили менять, спросите вы. И будете правы. Но с помощью CSS не всегда можно сменить стиль для списка так, как нам хочется.

Задача

Итак, имеем задачу: сделать выпадающий список, который можно видоизменять как угодно силами CSS. При выборе одного из пунктов менять текст рядом с полем в зависимости от выбранного пункта. При этом оставить выпадающий список похожим на классический, чтобы не путать посетителя. Для примера возьмем список точек самовывоза для интернет-магазина. При выборе города текст в определенном месте сменится и там будет показан адрес пункта выдачи и график его работы. Задача ясна? Тогда берем ручки и тетрадки и в путь.

Для начала подключим библиотеку jQuery. Если она у вас уже подключена, этот шаг можно пропустить.

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

Далее подключим файл со скриптом, в который мы и включим нужные нам функции обработки объектов.Назовем его, к примеру, dropdown.js.

<script src="/js/dropdown.js"></script>

Сам список мы сделаем, для удобства и правильности, в виде ненумерованного списка типа ul с вложенными элементами li. Ну, кому я буду рассказывать, вы и сами знаете. Текст, который будет появляться после выбора города, мы укажем в атрибутах для элементов списка. Например, alt, хотя можно использовать более правильный вариант с указанием идентификатора. Но я не люблю мусорить в dom’е, поэтому используем все же alt. Наш список будет выглядеть так:

<div class="delivery_block">
<ul class="cities_list">
	<li>Москва</li>
	<li>Санкт-Петербург</li>
	<li>Нижний Новгород</li>
	<li>Казань</li>
	<li>Ростов-на-Дону</li>
	<li>Волгоград</li>
	<li>Краснодар</li>
	<li>Саратов</li>
	<li>Самара</li>
	<li>Екатеринбург</li>
	<li>Челябинск</li>
	<li>Омск</li>
	<li>Новосибирск</li>
	<li>Красноярск</li>
	<li>Пермь</li>
	<li>Уфа</li>
</ul>
</div>
<div class="delivery_list">
<div id="btn"></div>
Москва
<div class="delivery_text">Самовывоз из офиса или курьером, Дмитровское шоссе, 9-а, стр. 5, 12:00—20:00</div>
</div>

Далее лезем в CSS, в свою таблицу стилей добавляйте следующее:

.delivery_block{
 width: 270px;
 padding: 24px 0 0;
 color: #8c8c8c;
 font-size: 11px;
 }
 .delivery_block .delivery_list {
 padding: 3px 6px 0 6px;
 height: 22px;
 cursor: pointer;
 border-radius: 4px;
 margin: 0 20px 0 0;
 color: #ed4226;
 border: 1px solid #efefef;
 width: 237px;
 z-index: 11;
 background: #fcfcfc;
 }
 .delivery_list #btn {
 background: url(dropdown.png);
 width: 17px;
 height: 18px;
 float: right;
 }
 .delivery_list span {
 padding: 2px 0 0 2px;
 display: block;
 font-weight: bold;
 }
 .delivery_block ul.cities_list {
 margin-top: 0px;
 z-index: 10;
 background: #fcfcfc;
 position: absolute;
 border-radius: 3px;
 width: 249px;
 padding: 0;
 border: 1px solid #eee;
 display: none;
 }
 ul.cities_list li {
 padding: 6px 9px;
 list-style-type: none;
 border-top: 1px solid #efefef;
 }
 ul.cities_list li:hover {
 cursor: pointer;
 background: #fff;
 }
 .delivery_block .delivery_text {
 padding: 3px 5px;
 margin: 5px 0 0 3px;
 }

В результате имеем блок и список, который до поры, до времени не виден. Дальше идем в dropdown.js и пишем туда следующее:

$(function(){
 /* выбор города */
 $('.delivery_list').click(function(){
 $(".cities_list").slideToggle('fast');
 });
 $('ul.cities_list li').click(function(){
 var tx = $(this).html();
 var tv = $(this).attr('alt');
 $(".cities_list").slideUp('fast');
 $(".delivery_list span").html(tx);
 $(".delivery_text").html(tv);
 });
 })

В результате получаем красивый выпадающий список с текстом под ним. И текст этот меняется, если выбрать какой-либо из элементов. Визуально это выглядит так:

Количество пунктов в выпадающем списке может быть любым, а в атрибуте alt можно указывать любой текст, в том числе и html за исключением двойных кавычек.

Посмотреть и скачать

Тепер я хочу бачити коментарі 31