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

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

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

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

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

function show() {
if (document.getElementById('id1').style.display=='none')
{document.getElementById('id1').style.display='';
document.getElementById('id2').style.display='';
document.getElementById('id3').style.display='';}
else
{document.getElementById('id1').style.display='none';
document.getElementById('id2').style.display='none';
document.getElementById('id3').style.display='none';}
}

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

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

function show() {
if (document.getElementById('id1').style.display=='none')
{for(i=1;i<=5;i++)document.getElementById('id'+i).style.display=''}
else
{for(i=1;i<=5;i++)document.getElementById('id'+i).style.display='none'}
}

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

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

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

function show(a,b) {
if (document.getElementById('row'+a).style.display=='none')
{for(i=a;i<=b;i++)document.getElementById('row'+i).style.display=''}
else
{for(i=a;i<=b;i++)document.getElementById('row'+i).style.display='none'}
}

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

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

Подпишитесь на обновления блога

Получить в подарок мини-книги и 21-дневный тренинг по личностному росту.

Подписаться на рассылку «Инструменты Интернет для онлайн бизнеса»

Поделиться ссылкой:


Комментарии:

25.10.2009 09:29:59
#1 Гений

Сложновато с помощью Яваскрипта, есть проги для такого дела специальные.

25.10.2009 12:59:30

А зачем проги специальные, если можно сделать всё так просто? Имхо, проще некуда.

04.04.2011 07:01:56

приветствую!
не подскажите как вставить этот js код на страницу в drupal 7?

04.04.2011 12:57:32

алексей, да просто берёшь и вставляешь. Не понимаю вопроса даже :)

04.04.2011 14:02:04

Never Lex,

я вставлю скрипт в текст статьи ставлю тип full html
нажимаю на превью. всё работает.
нажимаю сохранить, проверяю. статично всё ((

04.04.2011 14:10:30

алексей, значит Друпи сохраняет страницу всё таки не как Full HTML. Вообще конечно забавно.

Посмотрите в коде страницы, точно ли ничего не обрезано. Возможно жаваскрипт именно обрезает.

Если нет, то надо проверять не конфликтуют ли жаваскрипты, хотя вряд ли конечно.

04.04.2011 15:29:15

Never Lex,

хорошо, попробую!
кстати классный блог, и да я тебя зафоловил

22.06.2011 18:06:10

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

28.03.2015 19:37:49

С помощью вашего поста решил свою проблему на сайте.

Оставьте комментарий [форматирование]

Пожалуйста, воздержитесь от спама и идиотских высказываний. Жёсткая модерация. Ссылки закрыты атрибутом nofollow, а значит не несут пользы для продвижения!
Ссылки на всё кроме личных блогов и тематических блогов, сходных по тематике с данным, вырезаются.



Мой RSS фид