С помощью Yahoo API и jQuery можно изменять стиль сайта в зависимости от погоды! В данном уроке мы покажем как это сделать. Начнем с создания четырех фонов для солнечной, дождливой, облачной и снежной погоды. Затем с помощью скрипта jQuery вытащим прогноз погоды. И в завершение создадим ручное управление темой, которое позволит пользователю самому выбирать то, что хочется.
Четыре темы для сайта показаны на рисунке вместе, в действительности - это четыре больших изображения. Одинаковый шаблон используется для каждого рисунка, но каждый стилизован для отображения определенных погодных условий - "солнечно", "облачно", "дождливо" и "идет снег".
Фоновые изображения
Получаем сведения о погоде
$(document).ready(function() {
$.YQL = function(query, callback) {
var encodedQuery = encodeURIComponent(query.toLowerCase()),
url = 'http://query.yahooapis.com/v1/public/yql?q='
+ encodedQuery + '&format=json&callback=?';
$.getJSON(url, callback);
};
$.YQL("select * from rss where url='http://weather.yahooapis.com/forecastrss?p=UKXX0133'",function(data){
var w=data.query.results.item;
var class=w.condition.text;
var encodedclass = class.replace(/\s+/g, '-').toLowerCase();
$('body').addClass(encodedclass);
});
});
Скрипт получает данные из фида Yahoo. Погодные условия используются как класс для раздела body нашей страницы, поэтому строка должная быть преобразована в нижний регистр и из нее должны быть удалены все пробелы. Текст преобразуется из формы Partly Cloudy в partly-cloudy. Затем переменная encodedclass добавляется как класс к тегу body. что в коде HTML будет выглядеть <body class="partly-cloudy"> и может быть стилизовано с помощью CSS.
Для использования на своем сайте нужно изменить местоположение, для которого выдается состояние погоды. Проще всего найти нужное место на сайте Yahoo weather и скопировать адрес URL необходимого места из фида RSS
http://weather.yahooapis.com/forecastrss?p=RSXX0111
CSS
body.cloudy, body.partly-cloudy, body.mostly-cloudy {
background: #b3c6e4 url(img/Cloudy.jpg) fixed center bottom no-repeat;
}
body.rain, body.thunderstorms, body.drizzle, body.showers, body.thundershowers, body.scattered-showers, body.scattered-thunderstorms, body.isolated-thunderstorms {
background: #9eacaf url(img/Rainy.jpg) fixed center bottom no-repeat;
}
body.sunny, body.fair, body.hot {
background: #8cdafe url(img/Sunny.jpg) fixed center bottom no-repeat;
}
body.snow, body.mixed-rain-and-snow, body.mixed-rain-and-sleet, body.snow-flurries, body.light-snow-showers, body.blowing-snow, body.hail, body.sleet, body.snow-showers, body.heavy-snow {
background: #889986 url(img/Snowy.jpg) fixed center bottom no-repeat;
}
Теперь в зависимости от текущей погоды в код HTML вносится изменение при загрузке страницы. Мы можем задать стили CSS для соответствующих изменений на сайте. Yahoo Weather имеет список кодов для погоды Condition Codes. Нам надо установить соответствие между кодом и одним из четырех фонов. Например, для классов sunny, fair или hot будет выводиться фон sunny. При желании количество тем можно расширить, стоит только учитывать вероятность проявления определённых погодных условий в вашей местности.
Добавим ручное управление темами
Иконки упарвления темой на сайте
Несмотря на то, что пользователь может заходит на ваш сайт при различных погодных условиях, он может никогда не увидеть какую-нибудь тему вашего сайта. Поэтому имеет смысл оставить возможность ручного переключения между темами.
<ul id="weather">
<li class="cloudy"><a href="#">Cloudy</a></li>
<li class="sunny"><a href="#">Sunny</a></li>
<li class="rainy"><a href="#">Rainy</a></li>
<li class="snowy"><a href="#">Snowy</a></li>
</ul>
Простой список HTML, каждый элемент содержит ссылку, которая будет выводиться как иконка.
ul#weather {
position: absolute; top: 40px; left: 40px;
list-style: none; display: none;
}
ul#weather li {
margin: 0 0 12px 0;
}
ul#weather li a {
display: block; width: 60px;
background: url(weather-icons.png) no-repeat; text-indent: -9999px;
}
ul#weather li.cloudy a {
height: 32px; background-position: 0 0;
}
ul#weather li.sunny a {
height: 63px; background-position: 0 -43px;
}
ul#weather li.rainy a {
height: 50px; background-position: 0 -115px;
}
ul#weather li.snowy a {
height: 48px; background-position: 0 -177px;
}
Иконки сначала устанавливаются на место с помощью абсолютного позиционирования - фиксированное положение слева вверху экрана. Каждая ссылка трансформируется в иконку с помощью замены изображения на соответствующее погодным условиям. Так как данная функция работает только при включенной поддержке Javascript, то используется свойство display:none;. Иконки включаются с помощью jQuery для тех, кто включил поддержку JavaScript в браузере.
$('ul#weather').show();
$('li.cloudy').click(function() {
$('body').removeClass();
$('body').addClass('cloudy');
return false;
});
$('li.sunny').click(function() {
$('body').removeClass();
$('body').addClass('sunny');
return false;
});
$('li.rainy').click(function() {
$('body').removeClass();
$('body').addClass('rain');
return false;
});
$('li.snowy').click(function() {
$('body').removeClass();
$('body').addClass('snow');
return false;
});
Для каждой из четырех иконок написана простая функция jQuery. когда иконка нажимается, текущий класс элемента body удаляется и замещается соответствующим классом для нажатой иконки. return false; предотвращает выполнение действий по умолчанию для ссылки, которые приведут к переключению наверх страницы.
var name = "#weather";
var menuYloc = null;
menuYloc = parseInt($(name).css("top").substring(0,$(name).css("top").indexOf("px")))
$(window).scroll(function () {
var offset = menuYloc+$(document).scrollTop()+"px";
$(name).animate({top:offset},{duration:500,queue:false});
});
Выше приведенный код перемещает иконки переключения тем на свое место при прокручивании содержания страницы вверх/вниз. Таким образом возможность переключения всегда доступна для пользователя.
Готово!