Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. Web Development
Code

Как создать потрясающий jQuery Style Switcher

by
Difficulty:IntermediateLength:MediumLanguages:

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

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




Шаг 1: HTML

Во-первых, нам нужно создать наш основной HTML-файл и сохранить его как index.php:

Вы увидите, что там есть код PHP, который находится чуть ниже атрибута title в заглавной части страницы. Это очень просто - все, что тут происходит, это проверка на наличие куки под названием «style» - если он существует, он закрепляется к текущей переменной (также называемой «lestz»), а если файл cookie не существует, то тема назначается по умолчанию ( «day») к переменной $style.  Затем эта переменная  будет вызвана в атрибуте href ссылки (href="css /.сss"/?php echo $style ?>.css").

Вы увидите, что слой div style-switcher приведен выше в нашем HTML-коде. Не нужно добавлять его с помощью JavaScript, потому что метод, который мы используем, позволит работать   переключателю стиля, даже когда JavaScript отключен. Две ссылки (night и day) переносят пользователя в файл под названием style-switcher.php с добавленной строкой в запросе, определяющей соответствующую тему (например, href="style-switcher.php?style=day").

Я также назвал плагин для  jQuery styleSwitcher. Это еще в стадии разработки (ну, мы закончим  к тому моменту, когда вы прочтете статью), так что держитесь! ...  Мы будем писать этот плагин на 4 шаге урока.

Шаг 2: CSS

Теперь нам нужно создать пару таблиц стилей CSS для нашего HTML. Я решил создать только две таблицы - у вас будет тема «Day», а у другой будет тема «Night», и я назвал их соответствующим образом. (day.css & night.css) (day.css & night.css)

Тема Day:

Night Theme

Тема Night:

Night Theme

Лучше всего создать один стиль, а затем скопировать все селекторы в другую таблицу - и тогда все, что нужно изменить, - это добавить различные правила и конструкции CSS. Очевидно, что у вас может быть столько таблиц, сколько хотите, но в этом уроке мы используем только две. К тому же день и ночь хорошо сочетаются!

day.css:

night.css:

На самом деле это не урок по CSS, поэтому я не буду разбираться со всеми вопросами, но если они  у вас есть, пожалуйста, не стесняйтесь, задавайте их в разделе комментариев. И да, я знаю, что свойство min-width не поддерживается в старых браузерах! ;) ;)

Шаг 3: style-switcher.php

Здесь мы пишем основные функции переключателя стиля. На самом деле это всего лишь несколько строк очень простого кода PHP. Вы должны создать новый файл под названием «style-switcher.php» и скопировать в него следующее:

Итак,  вышеприведенный код присваивает значение переменной GET $style локальной переменной $style. Другими словами, скрипт примет значение свойства стиля из строки запроса (style-switcher.php?style=day). Затем он установит cookie (на одну неделю), называемый «style», - мы сможем запросить этот файл cookie  через наш основной файл index.php с помощью кодом, созданного в шаге № 1 (помните, это небольшая часть PHP в head?). Затем скрипт проверяет, добавляется ли «js» к строке запроса. Если это так, то мы узнаем, что запрос произошел с помощью JavaScript (который мы еще не создали).  Условие else выполняется, когда пользователь не включил JavaScript и использует перенаправление (т. е. страницу, с которой они только что пришли) - это станет более понятным, как только мы напишем код jQuery!

Шаг 4: код jQuery

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

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

Прежде всего, давайте создадим файл под названием «styleswitcher.jquery.js».

Создание нового плагина в jQuery чрезвычайно просто; все, что требуется, это написать следующий код:

Итак, сначала мы хотим указать, что происходит, когда нажимается одна из ссылок таблицы стилей  (т.е. те ссылки, которые находятся в слое div#style-switcher):

loadStyleSheet:

Теперь нам нужно написать функцию loadStyleSheet:

Надеюсь, что комментарии объяснили этот процесс  достаточно. Вы заметите, что мы вызываем в данный момент неопределенную функцию (cssDummy.check ()). Но не волнуйтесь, об этом в следующем шаге ...

cssDummy:

Нам нужен способ, чтобы  проверить, загружена ли таблица стилей. Если это так, мы скроем перекрывающий слой, но, если его нет, то нам нужно продолжать проверку, пока он не загрузится. Я нашел в сети надежный способ тестирования. Он включает в себя проверку значения ширины фиктивного элемента. Ширина этого элемента будет определена в CSS - и поэтому  ширина элемента будет равна ширине, определенной в CSS, если таблица будет загружена. Надеюсь, теперь вы поймете, почему мы должны были включить правило "#dummy-element  в каждый файл CSS ...

Итак, вот оно:

В конце нашего плагина мы вызовем функцию cssDummy.init:

Все готово! Теперь плагин выглядит так:

Мы можем вызвать плагин jQuery следующим образом:

Вывод!

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


Advertisement
Advertisement
Advertisement
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.