Стиль сайта в соответствии с погодой
Вторник, 16 августа 2011 г.Рубрика: JavaScript -> Учебник CSS
Метки: css | javascript | jquery | js | погода | сайт | стиль
Просмотров: 383
Подписаться на комментарии по RSS
При помощи 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 нужного места из RSS1
<a href="http://weather.yahooapis.com/forecastrss?p=RSXX0111">http://weather.yahooapis.com/forecastrss?p=RSXX0111</a>
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>
Сначала, надо установить на место иконку, для этого используем абсолютное позиционирование. Абсолютным позиционированием иконку можно фиксировано установить вверху экрана (слева). Каждая ссылка
перевоплощается в иконку при помощи замены фона на соответствующую погоду.
Из-за того, что эта функция действует в случае включения поддержки
Javascript, надо использовать свойство display:none.
Иконку включить при помощи jQuery. Если в кого-то поддержка JavaScript включена в браузере:
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;
}
Для всех четырёх иконок есть простенькая функция jQuery. Чтобы убрать текущий класс элемента body надо нажать на иконку. Тогда
он поменяется нужным классом для той иконки, которую нажали.
return false - предотвратит действие по умалчиванию для ссылок, могущие привести к переводу вверх, страницы.
$('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;
});
Только что показанный код передвигает этим иконки переключения на нужное место, если прокручивать фабулу стр. верх-низ. Поэтому, переключение будет всегда доступно пользователю. Вследствие этого пользователь в любой момент будет иметь возможность воспользоваться переключением.
