Интерактивные прототипы на jQuery для веб-дизайнеров

Интерактивные прототипы на HTML CSS и jQuery для веб-дизайнеров

Все мы были в похожей ситуации. Сделав интересный дизайн концепт, предоставляя результат клиенту, скорее всего вы слышали вопрос: «А как это будет работать?». В этот момент вы начинаете объяснять что будет происходить при нажатии на кнопки, пытаясь словесно объяснить взаимодействие с интерфейсом. Проще говоря, это не лучший подход для презентации.

Сегодня мы освоим несколько простых приемов, с помощью которых вы сможете оживить свои концепты и прототипы. Уровень этого урока — средний. Предполагается что вы уже знаете HTML и CSS, поэтому мы сконцентрируемся только на JS коде и jQuery.

 

Пример 1. Добавление CSS стилей к элементам

Начнем с простого. Научимся добавлять и убирать CSS стили у элементов страницы. В примере я сделал две кнопки, и иконку со звездой. Одна кнопка — будет добавлять к иконке класс iconActive, другая кнопка — соответственно убирать этот класс. Таким образом мы можем добавить простую интерактивность нашему прототипу.

Подключение jQuery

JS код пишется в отдельном js файле, например main.js и затем подключается на страницу с помощью строчки <script src="js/main.js"></script>. Также в уроке бы используем библиотеку jQuery, чтобы она работала  — ее также необходимо подключить. Для этого в конец html страницы, перед закрывающим тегом </body> добавим следующие строки:

    // Подключаем библиотеку jQuery
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    // Подключаем файл с нашими js кодом
    <script src="js/main.js"></script>

</body>
</html>

Далее создаем файл main.js, которые уже подключили выше, и размещаем его в папку js. Так чтобы он открывался по ссылке, которую мы прописали выше. jQuery как видно мы подключили из облачного хранилища Google.

В файле main.js пишем следующую конструкцию. Весь наш код jQuery мы помести внутри нее.

$(document).ready(function() {
    //Тут будет наш код jQuery
});

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

Пишем jQuery код

Теперь переходим к написанию кода jQuery. Тому — что оживит наш прототип. Давайте представим последовательность действий, которые необходимо выполнить. По задумке у нас есть иконка звезды, которую мы будем зажигать и гасить (включать и выключать). То есть менять цвет иконки. Делать это бы будем с помощью CSS стилей, добавлять CSS класс которые задает иконке желтый цвет, либо убирать этот класс, и иконка снова будет темной. Включать и выключать иконку мы будем двумя кнопками Turn On и Turn Off соответственно.

Первым делом мы должны найти на странице кнопку Turn On, которая будем включать иконку. Делается это следующей строкой:

$("#starOn")

Знак $ это символ jQuery, далее следует селектор элемента который необходимо выбрать, это #starOn. То ест мы выбрали на странице элемент с id=»starOn». Почти аналогично как в CSS. Далее, необходимо чтобы по клику на эту кнопку происходило какое-то событие, действие. Для этого в JS есть функции.

$("#starOn").on("click", function() {
    //Тут код функции, действия которые надо совершить
});

К нашему селектору добавился метод .on("click", ...) который означает что по клику на элемент с id="starOn" должно что-то происходить, и написана функция, правда пока пустая внутри. Так как это у нас кнопка и по умолчанию в браузере при клике на кнопку происходит перезагрузка страницы, нам необходимо отменить это поведение, ведь нам не нужна перезагрузка страницы. Делается это вот такой конструкцией:

$("#starOn").on("click", function(e) {
        e.preventDefault(); // отменили стандартное поведение сабмита формы
        //Код функции
});

В функцию необходимо записать параметр efunction(e), и далее в теле функции написать e.preventDefault(); . Достаточно просто взять на вооружение данный прием, просто знать что он есть и для чего мы его написали.

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

$("#starOn").on("click", function(e) {
        e.preventDefault(); // отменили стандартное поведение сабмита формы
        $("#iconStar").addClass("iconActive"); // Добавляем к иконке CSS класс iconActive
});

Давайте рассмотрим эту строку подробнее, по частям:

$("#iconStar") — находим на странице нашу иконку, так как она имеет id="iconStar"
.addClass("iconActive"); — Добавляем к найденной иконке CSS класс iconActive.

Если прочесть этот код, то получится следующее: Найти на странице элемент с id=»starOn», по клику на этом элементе выполнить следующее:

  1. Отменить его стандартное поведение. Не перезагружать страницу по клику на этой кнопке.
  2. Найти элемент с id=»iconStar» и добавить к нему CSS класс iconActive.

Аналогично, напишем функцию которая будет выключать иконку/ Все точно также, за исключением того что эта функция срабатывает для кнопки Turn Off с id="starOff" и вместо метода .addClass, используется метод .removeClass — которые удаляет CSS класс.

$("#starOff").on("click", function(e) {
        e.preventDefault(); // отменили стандартное поведение сабмита формы
        $("#iconStar").removeClass("iconActive"); // Убираем у иконки класс iconActive
});

Демонстрация

See the Pen jQuery prototyping — example 1 by Yurij (@rightblog) on CodePen.18493

P.S. В этом примере вы можете переключаться на вкладки HTML / CSS / JS чтобы посмотреть рабочий код примера, или нажать на логотип CodePen — чтобы пример открылся в новом большом окне.

 

Пример 2. Показ и скрытие элементов на странице

Зачастую требуется скрыть или показать какой либо элемент по клику. Аналогично примеру выше, можно предложить сделать это добавлением специальных CSS классов со свойствами display:none и display:block. Однако в jQuery для этого есть специальные методы show() и hide()

В примере ниже, вместо методов .addClass и .removeClass я использовал методы .show() и .hide() которые соответственно названию показывают или скрывают элементы. По умолчанию показ/скрытие происходят без анимации. Чтобы придать плавности и анимации, используем эти методы с специальным параметром 'speed'.show('speed') и .hide('speed') , для того чтобы открытие и скрытие происходило постепенно. В остальном jQuery код для этого примера такой же как и в первом примере.

$("#showOn").on("click", function (e) {
        e.preventDefault(); // Убираем стандартное поведение браузера
        $("#specialPanel").show('speed'); // Находим элемент с id="specialPanel" и показываем его 
});

$("#showOff").on("click", function(e) {
        e.preventDefault();
        $("#specialPanel").hide('speed'); // Находим элемент с id="specialPanel" и скрыаваем его
});

Демонстрация

See the Pen jQuery prototyping — example 2 by Yurij (@rightblog) on CodePen.18493

 

Пример 3. Выбор одного элемента

В этом примере мы рассмотрим как можно реализовать выбор всего одного элемента из списка подобных. Из инструментов нам уже знакомы нам методы addClass() и removeClass() для добавления и удаления CSS классов к элементам. В этот раз мы будем «вешать» функции и применять события к элементам которые мы выберем не по id, а по CSS классу. Чтобы выбрать элемент по CSS классу, вместо символа id # пишем символ точки .$(".iconSelect")

Обращение через $(this) — направлено к элементу по которому в нашем случае был совершен клик. Так как на странице есть 3 иконки с классом class="iconSelect", то после клика на одной из них, селектор $(this) выберет именно ту иконку по которой мы кликнули.

// Выбираем на странице элементы с классом iconSelect (это три иконки) и вещаем по клику на них функцию
$(".iconSelect").on("click", function() { 

        // Снова находим на странице все элементы с классом iconSelect 
        // и удаляем у них класс iconActive. Таким образом мы "выключаем" все иконки
        // чтобы затем включить только одну - которую необходимо
        $(".iconSelect").removeClass("iconActive");

        // Выбираем иконку по которой был совершен клик, и добавляем для нее CSS класс iconActive
        $(this).addClass("iconActive");
});

Демонстрация

See the Pen jQuery prototyping — example 2 by Yurij (@rightblog) on CodePen.18493

 

Что дальше?

В этом уроке мы познакомились с jQuery и на практике попробовали сделать несколько интерактивных элементов. Надеюсь мне удалось показать что jQuery это несложная технология, доступная для понимания даже для веб-дизайнера. Используя jQery прототипирование  вы сможете быстро и наглядно показать как должен работать ваш интерфейс. Рассмотренные 3 приема помогут начать создавать простые взаимодействия. В этом уроке показаны лишь основы. Надеюсь что эти наглядные и простые примеры помогут вам полюбить код и все больше использовать его возможности в своих проектах.

 

Урок написан по мотивам: zurb.com/university/lessons/clickable-prototypes-for-those-who-hate-code

  • Max Vasin

    За труд конечно плюс, но ценность для дизайнера думаю 0, для jquery новичка будет полезно. Вообще не понятно к чему сюда дизайнеров приплели.