Для начала определим задачу: первый список будет содержать предварительно загруженные названия стран и всегда находиться в активном состоянии. Два оставшихся списка – выбора авто и выбора модели, пустые и находятся в неактивном состоянии. После того, как в первом списке будет выбрана страна необходимо заполнить второй список названиями автомобилей и перевести его в активное состояние. А после выбора названия автомобиля – заполнить список названиями моделей именно этого автомобиля и тоже активировать список. Кроме того, мы должны гарантировать, что пользователь никогда не сможет выбрать автомобиль «HONDA Vectra произведеный в Ю.Корее». Для обмена данными с сервером будем использовать популярный нынче формат JSON.

Итак, задача определена. Поехали?

Начнем с чего-нибудь очень простого. Например с подключения библиотеки jQuery и создания HTML-разметки:

В HEAD страницы подключаем библиотеку:

<script src="js/jquery-1.3.1.js" type="text/javascript"></script>

В BODY создаем HTML-разметку:

<div class="border">
  <label>Страна</label><br />
  <select id="country">
    <option value="">Выбрать страну</option>
    <option value="1">Германия</option>
    <option value="2">Ю.Корея</option>
    <option value="3">Япония</option>
  </select>
</div>
<div class="border">
  <label>Автомобиль</label><br />
  <select id="auto" disabled="disabled"></select>
</div>
<div class="border">
  <label>Модель</label><br />
  <select id="model" disabled="disabled"></select>
</div>

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

Что дальше? Задача оказалась не так уж и проста, как казалось в начале. Поэтому предлагаю пораскинуть мозгами и решить, какие общие действия мы будем производить над всеми списками. Я придумал два – заполнение списка и очистка списка. Давайте оформим эти операции в виде методов jQuery, чтобы иметь возможность в любой момент вызвать этот метод в цепочке команд jQuery.

Расширение для jQUery может быть либо методом, оперирующим с набором элементов, либо вспомогательной функцией, которая определяется непосредственно в $. Простой пример: в составе библиотеки есть метод each(callback), который работает как раз с набором элементов, выполняя функцию, определенную в параметре callback в контексте каждого элемента набора и вспомогательная функция $.each(object,callback), которая применяется для обхода массива или объекта, переданного в первом параметре с выполнением функции callback для каждого элемента массива(объекта). Почувствовали разницу?

(function($){
  // очищаем select
  $.fn.clearSelect = function() {
    return this.each(function(){
      if(this.tagName=='SELECT') {
        this.options.length = 0;
        $(this).attr('disabled','disabled');
      }
    });
  }
  // заполняем select
  $.fn.fillSelect = function(dataArray) {
    return this.clearSelect().each(function(){
      if(this.tagName=='SELECT') {
        var currentSelect = this;
        $.each(dataArray,function(index,data){
          var option = new Option(data.text,data.value);
          if($.support.cssFloat) {
            currentSelect.add(option,null);
          } else {
            currentSelect.add(option);
          }
        });
      }
    });
  }
})(jQuery);

Итак, что мы тут написали?

При написании метода clearSelect() мы воспользовались методом each(callback) для того, чтобы произвести необходимые операции над каждым элементом, переданным в наборе jQuery. Сначала производим проверку – если tagName переданного элемента действительно SELECT, то удаляем все элементы option и устанавливаем атрибуту disabled значение disabled.

Метод fillSelect(dataArray) несколько сложнее. Он получает в качестве параметра массив dataArray, содержащий данные, которыми необходимо заполнить выпадающий список. Правда перед тем, как заполнять список, мы вызовем метод clearSelect, чтобы очистить список от возможно оставшихся там данных. С помощью метода each(callback) мы перебираем все элементы, переданные в наборе jQuery, проверяем, действительно ли это элемент select и, если да, то сначала запоминаем его в переменной currentSelect. Затем воспользуемся вспомогательной функцией $.each(object,callback) для обхода массива dataArray. В каждой итерации создаем элемент options, заполняем его соответствующими данными и добавляем в select.

При добавлении option мы вынуждены учитывать различия между браузерами. К счастью и тут поможет jQuery. Здесь используем новую вспомогательную функцию $.support, которая появилась в jQuery с версии 1.3 взамен $.browser. Проверим значение свойства cssFloat – false укажет нам на IE, а true на FF, Opera, Safari. Вы можете применить свой способ проверки.

Обратите внимание: при написании метода fillSelect(dataArray) мы использовали метод each(callback) и вспомогательную функцию $.each(object,callback) – это разные вещи.

Теперь оба наших новых метода могут работать с набором элементов jQuery, который им будет передан. Этот код можно было бы вынести в отдельный файл – к тому же эти методы могут пригодиться и в других приложениях, а использовать их можно проще простого:

// очищаем select
$('select').clearSelect();
// заполняем select
$('select').fillSelect(dataArray);

Двигаемся дальше. Теперь мы напишем пару функций, которые будут обслуживать списки выбора автомобиля и выбора модели.

// выбор автомобиля
function adjustAuto(){
  var countryValue = $('#country').val();
  var tmpSelect = $('#auto');
  if(countryValue.length == 0) {
    tmpSelect.attr('disabled','disabled');
    tmpSelect.clearSelect();
    adjustModel();
  } else {
    $.getJSON(
      'cascadeSelectAuto.php',
      {country:countryValue},
      function(data) {
        tmpSelect.fillSelect(data).attr('disabled','');
        adjustModel();
    });
  }
};

Здесь мы сначала запоминаем в переменной countryValue значение, выбранное в списке стран #country. В переменной tmpSelect будем хранить ссылку на элемент select с идентификатором #auto – список выбора автомобиля. Далее следует проверка:

Если страна не выбрана, то мы устанавливаем атрибуту disabled элемента select с идентификатором #auto значение ‘disabled’ и вызываем метод clearSelect() для очистки этого списка от возможно находящихся там значений. Также мы вызовем функцию adjustModel() (про нее чуть позже).

Иначе, мы отправляем с помощью вспомогательной функции $.getJSON запрос к файлу cascadeSelectAuto.php, передавая в качестве данных значение, сохраненное в переменной countryValue. При получении ответа сервера вызываем функцию, в которой определена нужная нам последовательность действий. А именно – к переменной tmpSelect (не забыли – это список с идентификатором #auto) применяем нами же написанный метод fillSelect(data), который заполнит список данными, которые получены от сервера и наконец переводим элемент в активное состояние с помощью атрибута disabled. Остается не забыть вызвать функцию adjustModel(), чтобы обработать выпадающий список моделей.

Функция adjustModel(), которая обрабатывает список моделей, очень похожа на adjustAuto(), поэтому нет смысла ее детально рассматривать. Обратите внимание разве на то, что теперь мы запоминаем значение из списка не только выбранной страны, но и выбранного автомобиля. И еще в if – else не вызываем что-то похожее на adjustModel(), поскольку список выбора модели у нас последний – дальше обрабатывать просто нечего.

// выбор модели
function adjustModel(){
  var countryValue = $('#country').val();
  var autoValue = $('#auto').val();
  var tmpSelect = $('#model');
  if(countryValue.length == 0||autoValue.length == 0) {
    tmpSelect.attr('disabled','disabled');
    tmpSelect.clearSelect();
  } else {
    $.getJSON(
      'cascadeSelectModel.php',
      {country:countryValue,auto:autoValue},
      function(data) {
        tmpSelect.fillSelect(data).attr('disabled','');
    });
  }
};

Поздравляю! Самая сложная часть пути уже позади! Остались сущие пустяки.

$('#country').change(function(){
  adjustAuto();
}).change();

Связываем с выпадающим списком стран событие change(fn), при наступлении которого вызываем adjustAuto() – функцию, которая заполнит выпадающий список автомобилей. В цепочке команд вызываем change(), чтобы вызвать событие при начальной загрузке страницы.

$('#auto').change(adjustModel);

С выпадающим списком автомобилей связываем событие change(fn), при наступлении которого будет выполнена функция adjustModel(), которая заполнит список моделей.

$('#model').change(function(){
  if($(this).val().length != 0) {
    alert('Выбор сделан!');
  }
});

И наконец, при изменении списка моделей выполним небольшую проверку – если действительно выбрана какая-либо модель, выведем в alert сообщение. Ну а в действительности тут можно придумать все, что угодно. Например вывести подробную информацию о технических характеристиках, красивую фотографию авто, чтобы его захотелось купить и конечно цену…

Ах, да! Совсем забыл – работающий пример:

Вы можете открыть пример в новом окне, чтобы посмотреть исходный код. Вы можете скачать архив, который содержит файлы примера (в том числе cascadeSelectAuto.php и cascadeSelectModel.php).

Как всегда первый шаг – это создание HTML-разметки.

<ul>
  <li><a href="/">Главная</a></li>
  <li><a href="products.html" id="current">Продукция</a></li>
  <li><a href="gallery.html">Фото</a></li>
  <li><a href="responses.html">Отзывы</a></li>
  <li><a href="feedback.html">Контакты</a></li>
</ul>

Здесь необходимо обратить внимание на пункт, где встречается id=»current». В реально работающем меню необходимо определять текущую страницу при ее загрузке и присваивать этот id соответствующему пункту.

А теперь приведу таблицу стилей для организации этого списка в горизонтальное меню.

ul {
  padding:3px 0;
  margin-left:0;
  border-bottom:1px solid #003;
  font:bold 8pt Verdana, sans-serif;
}
ul li {
  list-style:none;
  margin:0;
  display:inline;
}
ul li a {
  padding:3px 0.5em;
  margin-left:3px;
  border:1px solid #003;
  border-bottom:none;
  background-color:#FFA6BD;
  text-decoration:none;
  color:#AD2039;
}
ul li a:hover {
  background-color:#AD2039;
  color:#FFA6BD;
}
ul li a#current {
  background-color:#fff;
  border-bottom:1px solid #fff;
}

Ничего особенно хитрого тут нет. Сначала зададим отступы и левое поле для элемента ul, там же определяем нижнюю рамку для всего элемента и шрифт, а вот затем начинается более интересное правило. Для ul li мы скрываем стандартные маркеры, полям задаем значение 0 и наконец display:inline; – вот что заставляет наш список «вытянуться» в строку.

Дальше описываем элемент a, задавая ему отступы, поля, рамки, определяя цвет фона и шрифта. Обращу внимание разве что на определения свойства border. Сначала заданы значения свойства border для всех четырех сторон, а в следующей строке мы пишем border-bottom:none;, т.е. отменили рамку снизу. Такой вариант написания вполне имеет право на существование.

Далее определяем стили элемента а при наведении на него указателя мыши – тут мы изменим только цвет фона и цвет текста.

И самое последнее – стили для элемента имеющего id=»current». Цвет фона задаем совпадающим с цветом основного фона страницы, как впрочем и цвет нижней рамки.

Вот, что у нас получилось в итоге.

Итак, приступим. Меню будет представлять собой список, так как и теоретически и практически это наилучший способ структурирования меню. Прежде всего создадим HTML-разметку.

<ul>
  <li><a href="/">Главная</a></li>
  <li><a href="about.html">О компании</a></li>
  <li><a href="products.html">Каталог продукции</a></li>
  <li><a href="gallery.html">Фото объектов</a></li>
  <li><a href="responses.html">Отзывы клиентов</a></li>
  <li><a href="scheme.html">Схема проезда</a></li>
  <li><a href="feedback.html">Форма для связи</a></li>
</ul>

Далее приведу файл стилей, который будет подробно прокомментирован.

ul {
  list-style:none;
  margin:0;
  padding:0;
  font-family:Arial, Helvetica, sans-serif;
  font-size:0.9em;
  font-weight:bold;
  width:20em;
  border-bottom:1px solid #003;
  border-right:1px solid #003;
  border-left:1px solid #003;
}
ul li {
  border-top:1px solid #003;
}
ul li a {
  display:block;
  padding:2px 2px 2px 0.5em;
  border-left:15px solid #AD2039;
  background-color:#FFA6BD;
  color:#AD2039;
  text-decoration:none;
  width:100%;
}
html > body ul li a {
  width:auto;
}
ul li a:hover {
  border-left:15px solid #FFA6BD;
  background-color:#AD2039;
  color:#FFA6BD;
}

Рассмотрим подробнее стилевое оформление элемента ul. Сначал скроем стандартные маркеры списка, затем установим значения свойств margin и padding (почему мы устанавливаем именно оба свойства можно прочитать в статье «CSS: задание отступов и изменение стилей маркера в списках.»). Свойства font установят нужные шрифты и размер. Свойство width ясное дело будет отвечать за ширину списка. Следующие три строки устанавливают рамку шириной в 1px справа, снизу и слева для элемента ul.

Почему не сверху? Потому, что неплохо иметь такую же тонкую рамку, которая будет отделять каждый элемент списка. Это мы проделаем, написав правило border-top:1px solid #003; для ul li (для всех элементов li, являющихся дочерними по отношению к элементу ul).

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

Определяем отступы со всех сторон в свойстве padding, задаем рамку слева толщиной в 15px в свойстве border-left, определяем свойства background-color (цвет фона) и color (цвет текста), а также удаляем подчеркивание ссылок, воспользовавшись свойством text-decoration.

Последняя строчка задает теперь уже блочному элементу ширину width в 100%. Это сделано специально для IE, но может создать проблемы в Netscape Navigator и IE для Mac и поэтому следующее правило html>body ul li a написано специально для решения этой проблемы. IE не сможет его прочесть, поскольку не умеет обрабатывать правила для селектора потомка.

И наконец последнее правило будет задавать стили использующиеся при наведении указателя мыши на ссылку. Здесь мы просто задаем другие цвета в свойствах border-left, background-color и color.

Вот как это будет выглядеть. По моему неплохо. Такое меню будет вполне работоспособно и при отключенной поддержке стилевого оформления.

Правда сразу оговорюсь, что для начала мы разберем скорее теоретические основы, поскольку существует браузер названИЕкоторого все знают. Нормальное решение основано на использовании автоматически генерируемого контента, а вышеупомянутый браузер (будем честными до конца – не только он один) не поддерживает эту возможность. Зато это прекрасно работает в Mozilla, FireFox, Netscape 6+, Opera и Safari. А затем разберем и универсальное решение. К сожалению не такое изящное.

Посмотрите на этот CSS-код:

ul {
  list-style:none;
  margin:0;
  padding:0 0 0 1em;
  text-indent:-1em;
}
li {
  width:20%;
  padding:0;
  margin:0 0 0.25em 0;
}
li:before {
  content:"\00BB \0020";
}

Для начала скрываем маркер списка, который имеется по умолчанию с помощью list-style:none; затем устанавливаем левый отступ 1em, но при этом сдвигаем текст влево на ту же величину, т.е. -1em для того, чтобы «вытолкнуть» стандартный маркер из блока элемента списка. С помощью псевдоэлемента :before генерируем текстовый маркер. В свойстве content нужные символы указаны с помощью шестнадцатеричного escape-эквивалента Unicode, как того требует спецификация CSS2.1. В примере сгенерирована последовательность символов из двойной стрелки-ёлочки и пробела. Изящно, просто и красиво, но не для IE …

… и решение, которое подойдет для всех браузеров. К сожалению, уже не такое красивое. Текстовый маркер придется просто вставлять перед каждым элементом списка. Как показано ниже:

<ul>
  <li>» Первый пункт списка</li>
  <li>» Второй пункт списка</li>
  <li>» Третий пункт списка</li>
  <li>» Четвертый пункт списка</li>
  <li>» Пятый пункт списка</li>
</ul>

а таблицу стилей для этого варианта надо немного изменить. Вот так:

ul {
  list-style:none;
  margin:0;
  padding:0 0 0 1em;
}
li {
  width:20%;
  padding:0;
  margin:0 0 0.25em 0;
}

Однако и в этом способе есть недостаток, правда не очень критический. Если в браузере пользователя отключена поддержка CSS, он увидит два маркера для каждого элемента списка – маркер, генерируемый браузером и маркер, который мы добавили вручную.

Разберем другой вопрос: как сделать маркер, используя картинку?

Для того, чтобы применить графический маркер используется свойство list-style-image, как показано в примере ниже

ul {
  list-style-type: disc;
  list-style-image: url(marker.png);
}

Свойство list-style-type используется здесь на всякий случай, если браузер пользователя не имеет возможности использовать изображение. А в свойстве list-style-image задается путь к нужной картинке. Управлять размером картинки, которая используется как маркер списка, из таблицы CSS мы не сможем и поэтому надо убедиться в том, что картинка имеет подходящие размеры. Еще один нюанс состоит в том, что значения графических маркеров наследуются и если Вы создаете вложенные списки и хотите отказаться от маркера изображения в них, надо опять использовать свойство list-style-image. Вот таким образом:

ul ul {
  list-style-image:none;
}

А вот если хочется в качестве маркера списка иметь довольно большую картинку, такой способ уже не подойдет, поскольку часть картинки может быть просто «обрезана». Чтобы обойти это ограничение нужно поступить несколько иначе:

ul {
  margin-left:10px;
  padding-left:0px;
  list-style:none;
}
li {
  padding:0.5em 0 0.5em 54px;
  font: 1.3em/1.6 Verdana, Arial, sans-serif;
  background:url(bigMarker.png) no-repeat;
}

Сначала задаем значения и для левого поля и для левого отступа списка (почему именно так, я объяснял в одной из предыдущих статей). Потом удаляем маркер, используемый по умолчанию. Теперь главное: padding:0.5em 0 0.5em 54px; – мы освобождаем место слева от элемента списка, для того, чтобы вставить туда нашу большую картинку (например 54х54 пиксела), затем задаем свойство font таким образом, чтобы текст элемента списка не диссонировал с размером картинки-маркера и наконец используем свойство background, чтобы эту картинку вставить в качестве маркера списка.

Надеюсь, что это статья поможет кому-нибудь…

$("#menuList").sortable();

где #menuList – это идентификатор списка.
В меню справа использованы некоторые дополнительно установленные опции. Код конечно немного посложнее, но и в нем нет абсолютно ничего страшного.

Вы можете скачать исходный код примера, и при наличии библиотеки jQuery воспроизвести это пример на своем сайте.

А теперь разберем примеры более подробно. Этот пример для своей корректной работы требует подключения достаточно большого количества различных вспомогательных файлов.

<script src="js/jquery-1.2.1.js" type="text/javascript"></script>
<script src="js/jquery.dimensions.js" type="text/javascript"></script>
<script src="js/ui.mouse.js" type="text/javascript"></script>
<script src="js/ui.draggable.js" type="text/javascript"></script>
<script src="js/ui.draggable.ext.js" type="text/javascript"></script>
<script src="js/ui.droppable.js" type="text/javascript"></script>
<script src="js/ui.droppable.ext.js" type="text/javascript"></script>
<script src="js/ui.sortable.js" type="text/javascript"></script>

Все файлы уже знакомы по предыдущим примерам. Добавился только один файл ui.sortable.js, который (как и все остальные) мы подключаем в разделе HEAD нашей страницы.
Из таблицы стилей остановлюсь только на небольшом моменте, поскольку это по большому счету дело вкуса.

.dragStyle {
  background:#CFD4E6;
  border:1px solid #727EA3;
}

Класс dragStyle используется во втором примере и применяется в момент перемещения элемента, отображая то место, на которое перемещаемый элемент будет «сброшен».

Далее полностью приведен кусок кода, который и отвечает за работу обоих списков.

<script type="text/javascript">
$(document).ready(function(){
  $("#menuList").sortable(); // 1-ый спискок

  $("#menuList2").sortable({ // 2-ой список
	hoverClass: "dragStyle",
	start: function(ev, ui) {
	  var text = $(ui.draggable.element).text();
	  $("#result").text("Перемещаем " + text);
	},
	stop: function(ev, ui) {
	  $("#result").text("Перемещение окончено!");
	}
  });
});
</script>

Вот так просто. За работу первого списка отвечает всего-навсего одна строка кода. Для второго списка мы используем некоторые дополнительные опции.
hoverClass – опция содержит название класса, который будет применен в процессе перемещения одного из пунктов списка, чтобы указать место, куда перемещаемый пункт будет «сброшен».
start – здесь указываем функцию, которая выполнится в момент старта перемещения элемента списка. В этой функции мы обращаемся к перемещаемому элементу, получаем его содержимое в виде текста и записываем в переменную text. Затем отыскиваем элемент #result и вставляем текст туда.
stop – указываем функцию, которая выполнится в момент, когда произошел «сброс» элемента на нужную позицию (независимо от того изменилась ли фактическая позиция элемента). Тут тоже все предельно просто – вставляем текст сообщения в элемент #result.

Я использовал для примера всего несколько опций, а их полный список опций можно найти на сайте разработчиков библиотеки.

Буду рад, если найдете возможность оставить свой комментарий или задать вопросы.

Решение в этом случае достаточно простое. При создании стилевого оформления списка надо просто учесть этот факт и задать оба свойства, например вот так:

ul {
  margin-left: 50px;
  padding-left: 0px;
}

Если же Вы попытаетесь разделить эти 50px между свойствами margin и padding, то отображение страницы в разных браузерах будет уже неодинаковым.
С одним вопросом немного разобрались. Теперь во всех браузерах отступы одинаковые, но вот как-то бедно выглядят эти списки. У одного в качестве маркера – закрашенный кружочек, у другого – ничем не примечательные цифры.

Возможно также создавать и свои собственные маркеры для списков, причем как текстовые, так и графические, но эти возможности мы рассмотрим отдельно.

Для того, чтобы поменять стандартный стиль списка, воспользуйтесь свойством list-style-type и Вы сможете изменить маркер или тип счетчика. Приведу возможные значения для ненумерованного списка.
disc – обычно по умолчанию. Закрашенный кружок.
circle – незакрашенный кружок.
square – закрашенный квадратик.
Т.е., если мы хотим вместо появляющегося по умолчанию закрашенного кружочка увидеть квадратик, пишем:

li {
  list-style-type: square;
}

Точно так же для нумерованного списка по умолчанию применяется значение decimal, т.е. начинается с 1, затем 2, 3 и так далее…
Приведу еще несколько возможных значений:
decimal-leading-zero – начинается с 01, потом идет 02, 03 и так далее. Количеству ведущих нулей может равняться числу значащих цифр. Например 0001 будет показан в списке из например 9999 элементов.
lower-roman – строчные римские цифры.
upper-roman – заглавные римские цифры.
lower-greek – начинается с букв греческого алфавита: альфа, бета, гамма и т.д. (не поддерживается в IE).
hebrew – начинается с традиционного иврита (не поддерживается в IE).
none – как же без этого – маркеры не отображаются.

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