Подробно

jQuery. Урок 3

Меня спросили, как я сделал “меняющийся блогролл”, я сказал что уже писал об этом… Писал, писал, да не всё, как оказалось.

Standalone пример

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

<script type="text/javascript" src="/newsticker.js">
</script>

<script>
$(document).ready(function() {
$("#news").newsTicker(6000);
});
</script>

Сам плагинчик был взят здесь и называется он, совершенно верно - NewsTicker! скачиваем к себе на сайт. Пишем сей короткий скрипт, где #news - обозначает id блока, с которым мы работаем, а 6000 - это 6000 миллисекунд, на каждую ссылку.

Как выглядят в коде ссылки? Да очень просто:

<ul id="news">
<li><a href="http://burre.ru">Блог Виктора Бурре</a></li>
<li><a href="http://7days.kiev.ua">Новости 7 Дней</a></li>
<li><a href="http://searchengines.ru/blog">Gray's blog</a></li>
</ul>

Всё понятно? По-моему всё. Ссылки на stand-alone пример не будет, ибо оно и так всё работает (надеюсь в Opera 9.02 также? если в опере не работает, то я не виноват, плагин писал не я.

Кстати, обратили внимание в чём маленькая прелесть этого плагинчика? Ну да, конечно он экономит место, это бесспорно! Но прелесть заключается, на мой взгляд в том, что если у пользователя отключён javascript, то он просто видит весь блогролл целиком, без этих “DHTML-ных понтов”. По-моему чудесно!

У плагина, правда, есть и недостаток (о коем написано на сайте разработчиков) - если у вас два таких блока, увы, плагин работает некорректно. В чём проблема я пока не разбирался, но если вы разобрались в чём - напишите и мне, и разработчикам. Мне будет приятно, а разработчикам ещё и полезно.

Subscribe to the comments for this post

jQuery. Урок 2.5

Меня-таки убедили выкладывать файлы с примерами… Выложил

Урок 1

Урок 2

Пользуйтесь, лентяи

Subscribe to the comments for this post

jQuery. Урок 2

Мне тут справедливо заметили, что это не совсем уроки. Я не буду спорить, это не совсем уроки, а я - несовсем учитель

Итак, тема урока - переключатель Довольно часто приходится именно тумблером щёлкать туда-сюда. Два положения, один тумблер.

Проще - некуда

Код:

<script>
$(document).ready(function() {
$("#press").toggle(function() { $("body").background("black");},
function() { $("body").background("#FEF4E2");})});
</script>

И сам html:

<div id="press"> PRESS ME </div>

Дальше - просто жмём и смотрим, что происходит:

Пример

конец примера

Неправда ли, просто? Выбираем объект, на который реагировать, затем задаём два положения триггера - чёрный цвет, и базовый (не знаю, как он правильно называется). Вопросы? У матросов вопросов быть не должно!

UPDATE в связи с указанием интересного глюка, прошу уважаемых проверить работу скрипта с другим дизайном. Дело в том, что дизайн оуча (текущий) не подлежит даже самой поверхностной валидации, вероятно проблема может быть в его некорректности (незакрытых тегах, неописанных стилях и так далее). Попробуйте на копии своих сайтов, своих дизайнов. Я проверил на том, что было под рукой - пустой штмль страничке - проблем нет ни в опере, ни в ФФ, ни в ИЕ

Работающий пример

Subscribe to the comments for this post