Организация удобного прайс-листа с помощью javascript

В прошлой статье мы разбирались с вкладками, реализованными с помощью javascript. Сегодня продолжаем изыски в направлении простецких, но чрезвычайно полезных скриптов.

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

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

Вначале, как и в случае с менюшкой, реализованной на основе вкладок, решение пришло само собой. Вначале наделяем строки, которые будут скрываться/отображаться, свойством display:none и уникальным айдишником. А дальше по методу toggle проверяем отображение первого элемента и скрываем либо показываем все связанные элементы.

Однако, как обычно, выполнив поставленную задачу, начинаем размышлять об оптимизации и сокращении кода. А сделать это проще простого.

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

Здесь в условии и цикле мы использовали числовые идентификаторы, а при выводе результатов, формируем нужные идентификаторы с помощью выражения ('id'+i), где id - текстовая часть идентификатора (она неизменна), а i - числовая (поставляется скриптом).

Стало уже намного понятней, проще и количество сокращённого кода налицо. Но мы, естественно, пойдём дальше и приведём функцию в наипростейшему виду из 6-7 строк. Для этого стоит всего лишь подумать какие вводные данные использует скрипт. В нашем случае это id первого элемента и последнего. Их мы легко можем задать в параметрах вызова функции.

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

Демку можно лицезреть здесь. А тут находится пример реализации нашего прайс-листа на реальном сайте. В «живом» примере также реализованы некоторые прибамбасы в виде выделения строк товаров по клику (обычная функция toggle) и выпадающей менюшки с описанием категорий (этот приём можете изучить на блоге Мастера Горди).

Надеюсь, что статья была вам полезна. Удачи в разработке.

Понравилась заметка? Можно подписаться на RSS ленту комментариев к заметке или ретвитнуть её. Также можно заглянуть на страницу Обновлений блога.