Must have: создаём шаблоны для web-разработки на JavaScript 

Аватарка пользователя Daria R

Пишем шаблоны для разработки на JavaScript: разделы без фреймворков, таймеры, выпадающие меню и инструменты статистики.

JavaScript используется повсеместно, так что минимальные знания пригодятся почти любому разработчику. Сегодня я приведу рядовые шаблоны, которые вам обязательно пригодятся.

Мы разберем, как создавать рядовые части ваших сайтов:

  1. Разделы, работающие без каких либо фреймворков. Постараемся обойтись без каких либо фреймворков, чтобы решения были универсальными. Вкладки используются почти во всех сайтах, поскольку они сильно экономят место на странице, упрощая интерфейс для пользователя.
  2. Таймеры. Да- да. Они частенько пригодятся при разработке, но шаблонов вечно не хватает под рукой. Так что, можете считать это полезным семплом.
  3. Выпадающие меню. Их заготовок достаточно во фреймворках, но иногда вы бываете ограничены в ресурсах и приходится собирать что-то вручную.
  4. Различные динамические детали для выведения статистики. 

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

Что ж, пора начинать. В конце статьи вас ждут исходники.

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

Must have: создаём шаблоны для web-разработки на JavaScript  1

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

Must have: создаём шаблоны для web-разработки на JavaScript  2

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

Must have: создаём шаблоны для web-разработки на JavaScript  3

Хотя этот пример и был достаточно очевидным, но он способен сэкономить вам время, если подобный скрипт будет под рукой.

Далее на очереди выпадающие окна. Этот скрипт лично мне помогал не раз, когда было нужно построить подобную логику.

Чего вам стоит ожидать от этого решения ? На самом деле самых обычных кнопок с выпадающем меню. Без каких либо фейерверков, 3D-эффектов и прочего. В целом, подобные меню и бывают нужнее всего при разработке, поскольку выглядят строго и просто. При желании никто не запретит их поменять.

Must have: создаём шаблоны для web-разработки на JavaScript  4

Теперь пойдемте к разметке данной страницы. Тут аналогично с прошлым. Стили можно изучить в исходниках, а вот разметку покажу здесь.

Все минималистично и просто, чисто одно меню:

Must have: создаём шаблоны для web-разработки на JavaScript  5

Теперь предстоит разобраться со скриптом. Логика работы достаточно простая. По факту, мы создаем селекторы на объекты меню, а далее по клику переводим все объекты из неактивного состояния в активное. Работает это при помощи подобных строк в CSS. Ну а дальше немного магии скриптов.

Must have: создаём шаблоны для web-разработки на JavaScript  6

Ну и сам скрипт, собственно.

Must have: создаём шаблоны для web-разработки на JavaScript  7

Думаю, теперь стало куда меньше вопросов, как сделать интерактивными подобные меню.

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

Начнем с результатов вкладок. Вот, как они могут выглядеть:

Must have: создаём шаблоны для web-разработки на JavaScript  8
Must have: создаём шаблоны для web-разработки на JavaScript  9

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

Must have: создаём шаблоны для web-разработки на JavaScript  10

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

Must have: создаём шаблоны для web-разработки на JavaScript  11

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

Также бонусом для самообучения докину вам два подобных элемента, которые могут пригодится при повседневном создании сайтов.

Must have: создаём шаблоны для web-разработки на JavaScript  12

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

Однако, случается, что писать все вручную тоже не вариант, и нужна библиотека или фреймворк, которые построят единый стиль сайта без особых проблем. Поделюсь несколькими такими решениями, возможно, один из них станет основой вашей работы:

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

Must have: создаём шаблоны для web-разработки на JavaScript  13

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

Must have: создаём шаблоны для web-разработки на JavaScript  14

Anime js. Если нужны анимации на сайте, вам сюда. Здесь буквально можно сделать что угодно. Хоть у данного инструмента высокий входной порог, его возможности бесконечны.

Must have: создаём шаблоны для web-разработки на JavaScript  15

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

До встречи в будущих статьях!

JavaScript
Для начинающих
Гостевая публикация
6576