7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Web Design
  2. Skeleton

Написание JavaScript для шаблона интернет странички

Scroll to top
Read Time: 6 mins
This post is part of a series called From PSD to HTML With the Skeleton Boilerplate.
Adding Styles to Our Skeleton Page Build

Russian (Pусский) translation by Alex Grigorovich (you can also view the original English article)

До сих пор мы создавали прочную HTML-страницу и применяли к ней различные стили. В этом курсе основное внимание будет уделено добавлению интерактивности на сайт с помощью JavaScript. Мы разделим его на две части:

  • Добавление плагинов и подготовка рабочего пространства
  • Инициализация плагинов и их настройка для дальнейшего использования

Обзор плагинов

Есть много плагинов jquery, которые мы можем использовать в этом курсе, но мы будем применим следующие:

  • Isotope

    Фильтровать и сортировать невероятные макеты

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

  •  Scrollreveal

    Легко обнаруживать элементы при входе в окно просмотра.

    Я выбрал эту библиотеку, потому что она поддерживает прокрутку вниз и вверх. Она отображает элементы, когда они видны в вашем окне просмотра, и его очень легко реализовать.

  • SinglePageNav

    Плагин jQuery обеспечивает плавную прокрутку и расширенную навигацию для веб-сайтов с одной страницей.

  • Fancybox

    fancyBox - это инструмент, который предлагает приятный и элегантный способ добавления функций масштабирования для изображений, содержимого html и мультимедиа на ваши веб-страницы.  Он построен на вершине популярного jQuery JavaScript-фреймворка, и его легко реализовать, и изменить для настройки.

  • Jquery

Подготовка рабочего пространства

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

Как вы видете, я загрузил их в новую папку под названиемjs, тк таким образом легко поддерживать и организовать файлы.

Файл scripts.js теперь пустой. Мы будем использовать его для написания дополнительного JavaScript и инициализации плагинов.

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

Пишем скрипт

Первое, что вам нужно узнать при написании  jQuery, -это $(document).ready(function(){});.  При загрузке DOM это запустит все функции. Вы можете узнать больше об этом при обучении jquery.

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

Презентационный блог

Презентационный блог или раздел в нашем дизайне идеально должен иметь  window.height, фактически полный рост. Это возможно через модуль CCSS vh, но поскольку не все браузеры поддерживают эти устройства, мы будем придерживаться JavaScript.

Чтобы получить высоту окна, мы будем использовать window.innerHeight, который выводит высоту окна viewport в px.

Здесь мы применили высоту видимого экрана к heroContainer, но нам также нужно убедиться, что всякий раз, когда пользователь изменяет размер браузера, мы будем повторно использовать высоту видового экрана для  heroContainer.  Следующий код будет прослушивать изменение размера окна и будет изменять высоту heroContainer«на лету»:

Сохранение селекторов в переменных позволяет их легко поддерживать и повторно использовать.  У вас должно быть что-то вроде этого:

Меню

Прежде всего, давайте сохраним селектора, которые мы будем использовать в переменных.  На данный момент нам нужны menuIcon, navigation, mainNavigation и navigationLink. Переменные должны выглядеть так:

Когда у нас есть несколько объявлений переменных, нет необходимости повторять var, вы можете запятой разделять переменные.

Давайте присоединим событие кликом на menuIcon, которое должно добавить имя класса, active к mainNavigationactive  класс на mainNavigation оформлен в нашем CSS и делает его видимым.

Давайте теперь используем плагин SingleNavPage и инициализируем его в селекторе mainNavigation:

Здесь я также добавил слушателя прокрутки, который добавит другой класс к элементу menuItem, если пользователь прокручивает больше высоты видового экрана.  Я проверяю, является ли window.scrollY больше, чем window.innerHeight (высота видимого экрана). Япереключаю active класс для элемента menuItem

Весь код для меню теперь выглядит следующим образом:

Scrollreveal

ИнициализацияScrollReveal довольно проста, но я добавил небольшую конфигурацию. Если вы хотите узнать больше об использовании этого и других вариантах конфигурации, вы должны проверить проект на Github.  Код для инициализации scrollreveal выглядит следующим образом:

Работа

В этом случае, что наш скрипт собирается сделать для нас?  Есть три большие вещи:

  • преобразовать рабочий список в isotope макет
  • фильтровать элементы
  • добавить active класс к опции активного фильтра

Мы начнем с хранения необходимых переменных для этого плагина. javascript var $workFilterLinks = $('.work-filters li'), $container = $('.work-items'); Следующее - присоединить обработчик кликов для каждой ссылки фильтра. Это приведет к удалению active класса из всех фильтров и добавлению его к элементу. на который будем кликать.

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

Это будет фильтровать  isotope элементы  по атрибуту фильтра data-filter и добавить masonry кладки для рабочего раздела.

Код нашего рабочего раздела теперь должен выглядеть примерно так:

FancyBox

Последний плагин, который мы собираемся использовать, является Fancybox.  Этот плагин будет прикреплен к кнопке воспроизведения из раздела видео.

После написания части JavaScript будет выглядеть примерно так:

Итоговые размышнения

Всё готово!  Взгляните на наше творение!

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

Мне бы очень хотелось увидеть, как вы будете работать с кодом - поделитесь идеями, используя некоторые из моих методов!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.