Сборник трудов конференции ИТСиТ-2015 / ITSIT / 3-Prikladnye-informacionnye-tehnologii / 3058

ВИЗУАЛЬНОЕ ОФОРМЛЕНИЕ ВЫПАДАЮЩИХ СПИСКОВ НА САЙТАХ

А.В. Карманов, веб-технолог Продакшн-компания Hoodoo (ООО «Вау Продакшн»), г. Новосибирск

E-mail: anton@karmanov.ws

При разработке дизайна сайтов и веб-приложений в настоящее время предъявляется требование выдерживать общий стиль для всех элементов сайта, в частности при оформлении форм: поля ввода, кнопки, флаговые кнопки («галочка» или «крестик»), прикрепление файлов и выпадающие списки должны быть выполнены в едином стиле, без отклонений. Если с полями ввода и кнопками не существует проблем с настройкой внешнего вида средствами CSS, то оформление выпадающих списков в соответствии с макетом дизайна требует более глубокого вмешательства.

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

Рис. 1. Выпадающие списки в браузерах Chrome, Firefox и Internet Explorer

Использование Reset.css[1] и Normalize.css[2] для сброса установленных стилей не помогает установлению единообразного вида, от которого можно идти к нарисованному дизайну.

Рис. 2. Выпадающие списки в браузерах Chrome, Firefox и Internet Explorer после сброса стилей

Следовательно, использование CSS для оформления выпадающих списков не является подходящим инструментом, и необходимо использовать иные варианты. Одним из таких вариантов является эмуляция списков через использование текстовых списков (ul или ol) и скрытого input, в который через JavaScript можно устанавливать значение выбранного текстового списка.

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

1)Высота списка;

2)Треугольник выпадающего списка;

3)Скругление углов;

4)Боковые рамки и т.д.

Однако данный подход имеет недостаток, который проявляется в длинных списках, например, при выборе года рождения. Список с перечнем дат может состоять вплоть до 100 элементов и больше (с 2015-го года до 1915-ый и дальше), визуально такой список смотрится плохо, поэтому в дизайне используется ограничение списка по высоте и его прокрутка с помощью полосы прокрутки. Однако в CSS настройка полосы прокрутки в данный момент имеет плохую поддержку среди браузеров и является экспериментальной возможностью из-за отрицательной позиции W3C[3] по настройке внешнего вида полосы прокрутки через CSS, поэтому полосу прокрутки также необходимо эмулировать тегами HTML, при этом необходимо учитывать несколько требований:

1)Контент должен прокручиваться при перемещении полосы прокрутки мышкой;

2)Эмулированная полоса прокрутки должна перемещаться при прокрутке контента колёсиком мыши;

3)Первые 2 пункта должны учитывать возможность работы со списком через тачпады ноутбуков и на мобильных устройствах.

Для решения данной проблемы существует ряд JavaScript-плагинов, решающих указанные требования и пригодных для использования при разработке сайтов:

1)FleXcroll;

2)Tiny Scrollbar;

3)nanoScroller.js;

4)jScrollPane и т.д.

Однако существующие решения имеют ряд минусов:

1)Зависимость от сторонних JavaScript-библиотек, например, jQuery, которые необходимо подключать дополнительно, если они не используются на сайте;

2)Проблемы с прокруткой на ноутбуках Apple MacBook, где событие прокрутки колёсика мыши вызывается в несколько раз чаще, чем на других ноутбуках,

из-за чего прокрутка контента вызывает затруднения.

В компании 2ГИС, столкнувшейся с данными проблемами при разработке сервиса «2ГИС Онлайн», было разработано собственное решение «Baron»[4], которое решает недостатки существовавших до этого программных продуктов:

1)Нет зависимостей от сторонних Javascript-библиотек;

2)Нет проблем со скоростью прокрутки на различных устройствах. Проблема со скоростью прокрутки в большинстве плагинов вызвана тем, что

контент ограничивается по высоте с отключением полосы прокрутки браузера, и затем отслеживается JavaScript-событие прокрутки колёсика мыши (mousewheel) для манипу-