—»     —»   Разрабатываем автоматический время-зависимый переключатель CSS-стилей
  Раздел: Руководства, Скрипты и коды, CSS/Style Sheets   Комментариев: 1  

Разрабатываем автоматический время-зависимый переключатель CSS-стилей



Подробности о руководстве:

* Необходимые программы: PHP, CSS jQuery UI
* Уровень сложности: Начальный
* Примерно время выполнения: 60-90 минут

Результат предстоящей работы

Разрабатываем автоматический время-зависимый переключатель CSS-стилей

Переключатели стилей становятся все популярнее и популярнее. CSS-стили позволяют веб-дизайнерам без труда изменять внешний вид веб-сайта. Некоторые веб-сайты используют шаблоны «дня» и «ночи», которые сменяются в автоматическом режиме в соответствии с временем суток.

В сегодняшнем руководстве мы расскажем вам о том, создать собственный время-зависимый переключатель CSS-стилей при помощи PHP, который позволит нам менять шаблоны стилей в соответствии с текущим временем суток. Также, для того чтобы немного позабавиться, мы использовали jQuery UI.

Почему мы используем PHP вместо javascript?

Когда мы однажды занимались разработкой веб-сайта портфолио, мы использовали подобный переключатель стилей, основанный на javascript и jQuery. Временная функция скрипта работала вполне корректно. Тем не менее, при каждой загрузке веб-сайта мы, подобно 25-му кадру, наблюдали исходный стиль.

javascript утяжеляет страницы и, к тому же, если вы используете слишком много разных javascript-скриптов, то они могут конфликтовать между собой. Мы решили вместо этого использовать PHP, так как PHP работает на стороне сервера, он не конфликтует с javascript, а все скрипты работают так, как следует.

Единственный недостаток в использовании PHP для создания переключателя стилей заключается в том, что временная шкала, по которой сайт «меняет свое лицо», привязана ко времени сервера, на котором размещен сайт. В случае с javascript вы можете устанавливать временные функции, которые ориентированы на компьютер пользователя.

Этап 1: Создание 1-ого CSS-файла (ночной режим)

Разрабатываем автоматический время-зависимый переключатель CSS-стилей

Создайте CSS-файл под названием style-1.css и внесите в него следующий код:

/*  Default Styles
--------------------------------------------------- */

body {
margin: 0px;
padding: 0px;
background: url("../images/bokeh_2.jpg");
background-position: top left;
background-repeat: no-repeat;
background-attachment: fixed;
background-color: #666;
font-size: 20px;
font-family: Arial, Helvetica, sans-serif;
color: #fff;
text-align: left;
}

#wrapper {
width: 965px;
margin: 0 auto;
position: relative;
}

a:link, a:visited, a:active {
color: #99ccff;
}

a:hover {
color: #0073ea;
}

.content_container_1 {
float: left;
width: 650px;
margin: 0px 0px 60px 0px;
}

p.main_description {
margin: 5px 0px 50px 0px;
text-align: center;
}

/* Main Image
--------------------------------------------------- */

.main_image {
background: url("../images/main_image_1.jpg");
background-repeat: no-repeat;
width: 630px;
height: 425px;
border: #fff solid 10px;
margin: 40px 0px 10px 0px;
}

/* Tabs
--------------------------------------------------- */

#tabs p {
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
}

a.tabs_link_1:link, a.tabs_link_1:visited, a.tabs_link_1:active {
text-decoration: underline;
color: #0073ea;
font-weight: bold;
}

a.tabs_link_1:hover {
text-decoration: underline;
color: #ff0084;
font-weight: bold;
}

#tabs .tabs_img {
float: left;
background-color: #ddd;
padding: 8px;
margin: 0px 12px 0px 0px;
}

Этап 2: Создание 2-ого CSS-файла (утро)

Разрабатываем автоматический время-зависимый переключатель CSS-стилей

Откройте style-1.css и сохраните его под названием style-2.css. Измените изображение фона с bokeh_2.jpg на bokeh_4.jpg. Замените main_image_1.jpg на main_image_4.jpg.

Этап 3: Создание 3-ого CSS-файла (полдень)

Разрабатываем автоматический время-зависимый переключатель CSS-стилей

Используйте style-1.css или style-2.css для создание третьего файла стилей под названием style-3.css. Измените изображение фона на bokeh_3.jpg, а основное изображение на main_image_5.jpg

Этап 4: Создание 4-ого CSS-файла (вечер)

Разрабатываем автоматический время-зависимый переключатель CSS-стилей

Создайте 4-й файл стилей под названием style-4.css. Измените изображение фона на bokeh_1.jpg, а основное изображение на main_image_8.jpg

От 2-го до 4-го этапа вы также можете изменять цвет шрифтов, изображение границ. Вместо использования изображений, представленных в исходных файлах, вы можете использовать собственные.

Этап 5: Скачивание jQuery и jQuery UI

Разрабатываем автоматический время-зависимый переключатель CSS-стилей

Для того чтобы показать, как PHP-скрипт изменяет несколько таблиц стилей, мы использовали jQuery Themeroller Themes для оформления области контента с вкладками на странице.

Пройдите на страницу скачивания jQuery UI и скачайте шаблоны «Flick» и «Start».

Далее, пройдите на официальный сайт jQuery и скачайте jQuery.

Этап 6: Верстка

Создайте PHP-файл, который содержит следующий код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<!-- CSS style sheets -->
<?php include("style sheets.php"); ?>

<!-- jQuery / javascript -->
<script type="text/javascript" src="js/jquery-1.6.3.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js">></script>
<script type="text/javascript">
$(function() {
$( "#tabs" ).tabs();
});
</script>

<meta name="description" content="This demo uses PHP to change multiple CSS style sheets (Main CSS and jQuery UI Theme) at specific times during a 24 hour period. The timezone for this demo is set to Australia/Melbourne." />
<meta name="keywords" content="time,based,css,stylesheet,switcher,php" />
<title>Simple Time Based CSS Style Sheet Switcher</title>

</head>
<body>

<!-- Begin Wrapper -->
<div id="wrapper">

<!-- Begin Content Container 1 -->
<div class="content_container_1">

<!-- Main Image Switches at Set Times -->
<div class="main_image"></div>
<p class="main_description">
Main Image changes at the times set in PHP Script (Australia/Melbourne).
</p>

<!-- Begin Tabs Area -->
<div id="tabs">
<ul>
<li><a href="#tabs-1">About Envato</a></li>
<li><a href="#tabs-2">Marketplaces</a></li>
<li><a href="#tabs-3">Tuts+ Network</a></li>
</ul>

<div id="tabs-1">
<p>
<img class="tabs_img" src="images/envato_1.jpg" width="300" height="195" alt="About Envato" />
Envato is a startup based out of Australia with people around the world and sites serving pages every second. We started in a living room in 2006 and have been steadily working to build our company into a world-class contender. Our background is creative, we love open source, we believe that work is about way more than just making money, and we're totally committed to making products that are awesome!
</p>
<p>
<a class="tabs_link_1" href="http://envato.com/" target="_blank" title="Visit The Envato Website">Visit The Envato Website</a>
</p>
</div>

<div id="tabs-2">
<p>
<img class="tabs_img" src="images/marketplace_1.jpg" width="300" height="195" alt="Marketplaces" />
The Envato Marketplaces allow anyone to buy or sell digital goods like WordPress themes, background music, After Effects project files, Flash templates and much more. The marketplaces are home to a thriving community of over 500,000 users, authors and buyers and every day hundreds of new files are added.
</p>
<p>
<a class="tabs_link_1" href="http://themeforest.net/" target="_blank" title="Visit the Theme Marketplace">Visit the Theme Marketplace</a>
</p>
</div>

<div id="tabs-3">
<p>
<img class="tabs_img" src="images/psdtuts_1.jpg" width="300" height="195" alt="Tuts+ Network" />
At Envato we're very passionate about education, that's why we've created one of the most popular networks of educational blogs around. Tuts+ serves up over 18 million pageviews a month across its many subsites on subjects like graphics, web development, audio production, iPhone development and motion graphics.
</p>
<p>
<a class="tabs_link_1" href="http://tutsplus.com/" target="_blank" title="Visit Tuts+ Hub">Visit Tuts+ Hub</a>
</p>
</div>

</div>
<!-- End Tabs Area -->

</div>
<!-- End Content Container 1 -->

</div>
<!-- End Wrapper -->

</body>
</html>

Этап 7: Код переключателя таблиц стилей на PHP

Создайте PHP-файл, который содержит следующий код:

<?php

date_default_timezone_set("Australia/Melbourne"); // Set default time zone

$time = date("H"); // Set the time in 24 hour format

if (00 <= $time && $time < 07) // 12:00am to 7:00am Night
{
echo
'<link href="css/style-1.css" rel="stylesheet" type="text/css" media="screen" /><link href="css/flick/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" media="screen" />';
}

elseif (07 <= $time && $time < 12) // 7:00am to 12:00pm Morning
{
echo
'<link href="css/style-2.css" rel="stylesheet" type="text/css" media="screen" /><link href="css/start/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" media="screen" />';
}

elseif (12 <= $time && $time < 18) // 12:00pm to 6:00pm Afternoon
{
echo
'<link href="css/style-3.css" rel="stylesheet" type="text/css" media="screen" /><link href="css/start/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" media="screen" />';
}

else // all other hours Evening
{
echo
'<link href="css/style-4.css" rel="stylesheet" type="text/css" media="screen" /><link href="css/flick/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" media="screen" />';
}

?>

Разбираем верстку

Включение ссылок до rel="stylesheet" в PHP

Скрипт переключателя таблиц стилей CSS будет содержаться в выносном PHP-файле под названием stylesheets.php.

PHP-выражение include() будет включать и запускать указанный файл. Выносной файл stylesheets.php подгружается посредством следующего кода:

<!-- CSS style sheets -->
<?php include("style sheets.php"); ?>

Так как мы используем PHP-скрипт для изменения CSS-таблиц стилей в определенное время, ссылки rel=”stylesheet” будут генерироваться PHP-скриптом.

Обращение к jQuery и библиотекам jQuery UI

Нам нужно убедиться, что веб-страница обращается к jQuery и библиотекам jQuery UI.

В пределах тэга head в коде страницы вам необходимо добавить следующий код:

<!-- jQuery / javascript -->
<script type="text/javascript" src="js/jquery-1.6.3.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>

Инициализация вкладок в jQuery UI

В нашем сегодняшнем руководстве мы используем jQuery UI Tabs. Следующий код инициализирует вкладки:

<script type="text/javascript">
$(function() {
$( "#tabs" ).tabs();
});
</script>

Div контейнера для вкладок jQuery UI

<!-- Begin Wrapper -->
<div id="wrapper">

<!-- Begin Content Container 1 -->
<div class="content_container_1">

(Конечные тэги «/div» для оболочки и первого контейнера для контента отображены в блоке кода для верстки вкладок jQuery UI).

Большинство виджетов jQuery UI запрограммированы таким образом, чтобы разворачиваться на все 100% ширины области контента, в которой они размещены.

Контейнер div content_container_1 был обозначен фиксированным параметром ширины равным 650 пикселям в CSS-файле, так что область контента с вкладками не будет разворачиваться на всю ширину экрана.

Верстка основного изображения

Для того чтобы основное изображение изменялось в соответствии со временем суток за счет использования PHP-скрипта, нам нужно посредством CSS включить его в код страницы в качестве фонового изображения.

Так что, вместо внесения изображения в код страницы при помощи следующего кода:

<img src="main_image_1.jpg" width="630" height="425" alt="Image" />

Мы вносим его посредством CSS в качестве фонового изображения div’а с классом main-image следующим образом:

<!-- Main Image Switches at Set Times -->
<div class="main_image"></div>
<p class="main_description">
Main Image changes at the times indicated.
</p>

Верстка вкладок jQuery UI

Нижеприведенная разметка добавляет область с вкладками контента, подгруженную с помощью jQuery UI, и оформленную за счет jQuery Themeroller Themes.

<!-- Begin Tabs Area -->
<div id="tabs">
<ul>
<li><a href="#tabs-1">About Envato</a></li>
<li><a href="#tabs-2">Marketplaces</a></li>
<li><a href="#tabs-3">Tuts+ Network</a></li>
</ul>

<div id="tabs-1">
<p>
<img class="tabs_img" src="images/envato_1.jpg" width="300" height="195" alt="About Envato" />
Envato is a startup based out of Australia with people around the world and sites serving pages every second. We started in a living room in 2006 and have been steadily working to build our company into a world-class contender. Our background is creative, we love open source, we believe that work is about way more than just making money, and we're totally committed to making products that are awesome!
</p>
<p>
<a class="tabs_link_1" href="http://envato.com/" target="_blank" title="Visit The Envato Website">Visit The Envato Website</a>
</p>
</div>

<div id="tabs-2">
<p>
<img class="tabs_img" src="images/marketplace_1.jpg" width="300" height="195" alt="Marketplaces" />
The Envato Marketplaces allow anyone to buy or sell digital goods like WordPress themes, background music, After Effects project files, Flash templates and much more. The marketplaces are home to a thriving community of over 500,000 users, authors and buyers and every day hundreds of new files are added.
</p>
<p>
<a class="tabs_link_1" href="http://themeforest.net/" target="_blank" title="Visit the Theme Marketplace">Visit the Theme Marketplace</a>
</p>
</div>

<div id="tabs-3">
<p>
<img class="tabs_img" src="images/psdtuts_1.jpg" width="300" height="195" alt="Tuts+ Network" />
At Envato we're very passionate about education, that's why we've created one of the most popular networks of educational blogs around. Tuts+ serves up over 18 million pageviews a month across its many subsites on subjects like graphics, web development, audio production, iPhone development and motion graphics.
</p>
<p>
<a class="tabs_link_1" href="http://tutsplus.com/" target="_blank" title="Visit Tuts+ Hub">Visit Tuts+ Hub</a>
</p>
</div>

</div>
<!-- End Tabs Area -->

</div>
<!-- End Content Container 1 -->

</div>
<!-- End Wrapper -->

Меню «Tabs» (вкладки) генерируется за счет неупорядоченного списка. Разделы контента генерируются тэгами «div», которым задан уникальный ID, привязанный к анкорным ссылками в тэгах «li» и «/li».

Например: «div id=”tabs-1”» привязан к «a href=”#tabs-1”»

Разбираем код переключателя стилей на PHP

Устанавливаем временную зону по умолчанию

date_default_timezone_set("Australia/Melbourne"); // Set default time zone

Код date_default_timezone_set устанавливает временную зону по умолчанию, использующуюся временными функциями в скрипте.

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

Для того чтобы определить правильную временную зону, пожалуйста, обратитесь за помощью к спискам «List of Supported Timezones».

Более свежие версии PHP в параметр date_default_timezone_set так же добавляют функционал слежения за переводом стрелок часов. Некоторые старые версии PHP не берут данную погрешность в учет.

Установка 24-часового формата

$time = date("H"); // Set the hour in 24 hour format

Параметр date(“H”) преобразует отображение времени в 24-часовой формат. Кликните сюда, чтобы посмотреть информацию о 24-часовом времени.

Разбираем выражения If, Elseif, Else

Мы уже разобрали большую часть нашего PHP-кода для того, чтобы показать вам, как PHP-скрипт будет функционировать. В нашем коде мы использовали еще несколько функций:

* Выражения If, Elseif, Else
* Echo
* Операторы сравнения
* Логические операторы

if

if (00 <= $time && $time < 07) // 12:00am to 7:00am   Night
{
echo
'<link href="css/style-1.css" rel="stylesheet" type="text/css" media="screen" /><link href="css/flick/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" media="screen" />';
}

Если 00 (полночь) МЕНЬШЕ или = текущему времени, И текущее время МЕНЬШЕ 07 (7.00 утра), ТО скрипт включит файл style-1.css и сменит оформление.

elseif

elseif (07 <= $time && $time < 12) // 7:00am to 12:00pm   Morning
{
echo
'<link href="css/style-2.css" rel="stylesheet" type="text/css" media="screen" /><link href="css/start/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" media="screen" />';
}

Если 07 (7.00 утра) МЕНЬШЕ или = текущему времени, И текущее время МЕНЬШЕ 12 (12:00 дня), ТО скрипт включит файл style-2.css и сменит оформление.

elseif

elseif (12 <= $time && $time < 18) // 12:00pm to 6:00pm   Afternoon
{
echo
'<link href="css/style-3.css" rel="stylesheet" type="text/css" media="screen" /><link href="css/start/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" media="screen" />';
}

Если 12 (12:00 дня) МЕНЬШЕ или = текущему времени, И текущее время МЕНЬШЕ 18 (6:00 дня), ТО скрипт включит файл style-3.css и сменит оформление.

else

else // all other hours   Evening
{
echo
'<link href="css/style-4.css" rel="stylesheet" type="text/css" media="screen" /><link href="css/flick/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" media="screen" />';
}

Если мы не встречаем ни одно из этих условий в выражениях «if» и «elseif», ТОГДА скрипт включит файл style-4.css и сменит оформление.

Завершение

С помощью CSS вы можете создавать множество различных стилей для страниц. Используя PHP, вы можете применять эти стили динамическим образом. Добавьте немного jQuery UI, и ваши веб-страницы не только доставят вам удовольствие при создании, но также привлекут внимание ваших посетителей! Благодарим за участие!

Смотреть демо | Скачать архивом
Внимание! У вас нет прав для просмотра скрытого текста.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS, PHP, скрипты, jQuery
Опубликовал Design FactoRy   Прочитано (раз): 8457   |   Оставлено комментариев: 1
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 7 июля 2012 @ 04:11
Написал: ITS — группа: Читатели  
На сайте с: 20.02.2010   |   Публикаций: 3   |   Комментариев: 127
ICQ: 366337851
Отличная статья, "то что доктор прописал" =)


--------------------
Вещам, которым надо бы учиться, чтобы их делать, — лучше учиться, делая их.
© Аристотель
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц January по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Сентябрь 2017    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
252627282930