Просто Кнопка

В статье не будет приводиться код и какие-то технические изыскания, я просто расскажу что же из себя представляет современная кнопка в вебе. Гость сегодняшней статьи это кнопка «сбросить фильтр» (рис. 1).

Это обычная кнопка, мы ежедневно видим десятки и сотни похожих элементов управления по всему вебу (и не только), но из чего она сделана, что влияет на нее и что с ее помощью можно сделать? Из названия следует что кнопка предназначена для сброса данных фильтра, прекрасно, с назначением все вроде бы ясно. На рисунке 1 также отмечены элементы страницы которые способны так или иначе влиять на поведение кнопки. К примеру форма поиска или группа чекбоксов пониже. Попробуем использовать фильтр по бренду (рис. 2).

Страница поменялась, деактивировался поиск по артикулу и названию, чекбоксы по прежнему остаются активными и наша кнопка изменила цвет, стала активной. По активной кнопке можно кликнуть, что логически приведет к сбросу фильтра, а также разблокирует форму поиска выше. Если теперь воспользоваться поиском по артикулу или имени, то деактивируется поиск по бренду, а кнопка сброса опять будет доступна. Вроде бы все просто? — Да, для пользователя все просто и наглядно, но из чего же она все-таки сделана? (рис. 3).

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

Начнем с простого — отображение.

Отображение это то что мы видим в браузере, цвет, форма, расположение. Во первых кнопка это некий тег языка HTML, в нашем случае это, когда кнопка не активна и соответственно в активном состоянии. Но голого HTML мало, нужно поработать с отображением, сделать заливку, скруглить углы, перекрасить текст внутри кнопки, за это отвечает CSS (в частности CSS3).

Второе — функции.

С функциями сложнее, здесь задействованы три основных языка: JS, PHP, SQL.

• JS — отлавливает события происходящие с кнопкой и всем что происходит на странице, а также запускает PHP скрипты.
• PHP — логика, обработка данных, построение HTML и другие функции.
• SQL — запрашивает у БД данные и передает их в PHP скрипт.

JS

JS, а точнее фреймворк jQuery, «слушает», отлавливает событие клика по кнопке и если она была активна запускает особую, асинхронную, функцию AJAX. Основной смысл AJAXса в том чтобы передать некоторые параметры, в нашем случаи, PHP скрипту, а затем запустить его. При этом, т. к. запрос асинхронный, страница не перезагружается, скрипт отработается и если нужно изменит часть текущей страницы. На этом работа JSса закончена.

PHP

Основная работа ложится на PHP, он еще на стадии формирования страницы принимает данные от SQL и на их основе «решает» будет кнопка активной или нет, также он проверяет были ли переданы JSсом дополнительные параметры. В них определяется была ли кнопка активна, что именно из полей фильтра было использовано до нажатия и что необходимо деактивировать. Получив эти данные PHP строит страницу.

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

Порой «просто кнопка» не так уж и проста =).