3 936 Вдохновившись новостной лентой на сайте BBC News, авторы решили сделать такую же на jQuery.
Чем же она так хороша? Тем, что очень проста в установке и настройке.
Это один из тех плагинов, которые:
- вставляем код
- запускаем
- все работает
Как же заставить ее работать?!
Во-первых, скачайте архив, содержащий плагин и пример с документацией для этой новостной ленты.
Что делать с этими файлами?
Если вам нужна полностью переделанная версия (и выше) плагина новостной ленты, используйте файлы из архива. Далее прописываете следующий HTML код:
|
1 2 |
<link href="css/ticker-style.css" rel="stylesheet" type="text/css" /> <script src="jquery.ticker.js" type="text/javascript"></script> |
Не удивительно, что для работы плагина требуется jQuery (1.4.2 или выше). Мы рекомендуем использовать Google's Ajax Libraries API.
Что еще нужно в HTML коде для работы новостной ленты?
Да, нужен следующий HTML код:
|
1 2 3 4 5 6 7 8 |
<div id="ticker-wrapper" class="no-js"> <ul id="js-news" class="js-hidden"> <li class="news-item"><a href="#">This is the 1st latest news item.</a></li> <li class="news-item"><a href="#">This is the 2nd latest news item.</a></li> <li class="news-item"><a href="#">This is the 3rd latest news item.</a></li> <li class="news-item"><a href="#">This is the 4th latest news item.</a></li> </ul> </div> |
Новостная лента прекрасно работает и с элементами <ol>.
Как теперь заставить jQuery работать с этой штукой?
Чтобы запустить новостную ленту, достаточно прописать следующий код:
|
1 2 3 4 |
<script type="text/javascript"> $(function () { $('#js-news').ticker(); }); </script> |
Ok и это все?
Да это все, что нужно для работы плагина! Если у вас что-то не получилось и плагин не заработал, посмотрите исходники, как там все сделано.
И потом, вы все равно захотите переделать все CSS стили, чтобы подогнать вид ленты под свой сайт, так-что go go в исходники.
Все отлично, но как на счет настроек?
Настройки есть. Смотрите список:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
$(function () { $('#js-news').ticker( speed: 0.10, // Скорость показа новости ajaxFeed: false, // Заполнять новостную ленту через RSS канал feedUrl: false, // URL RSS канала // должен быть на том же домене, что и лента feedType: 'xml', // только XML htmlFeed: true, // Заполнять новостную ленту через HTML debugMode: true, // Показывать отладочную информацию в консоли controls: true, // Показать/спрятать управление плагином titleText: 'Latest', // Чтобы удалить название плагина, оставьте эту переменную пустой displayType: 'reveal', // Тип анимации - доступно 'reveal' или 'fade' direction: 'ltr' // Направление ленты - доступно 'ltr' или 'rtl' pauseOnItems: 2000, // Пауза между новостями fadeInSpeed: 600, // Скорость появления новости fadeOutSpeed: 300 // Скорость исчезания новости ); }); |
Как использовать эти настройки?
Любые изменения в настройках лишь заменят переменные по умолчанию. Таким образом вы можете настраивать то, что вам нужно или вообще ничего не трогать:
|
1 2 3 4 |
<script type="text/javascript"> $(function () { $('#js-news').ticker({ speed: 0.10, htmlFeed: false, fadeInSpeed: 600, titleText: 'Latest News' }); }); </script> |
В каких браузерах работает плагин?
Плагин протестирован в следующих браузерах:
IE 6+ firefox 3.6+ chrome safari safari mob opera
Что на счет загрузки контента через feed?!
Вам повезло! В последнем обновлении плагина появилась поддержка RSS каналов через ajax!
Код для запуска плагина через RSS канал будет выглядеть следующим образом:
|
1 2 3 4 5 |
<script type="text/javascript"> $(function () { $('#js-news').ticker({ htmlFeed: false, ajaxFeed: true, feedUrl: 'URL RSS канала - например http://example.com/rss.xml', feedType: 'xml' }); }); </script> |
Как должен выглядеть XML? Прекрасно подойдет стандартный RSS формат, который описан .
Еще раз отметим, что RSS канал должен быть на том же домене, что и плагин, потому как jQuery не позволяет кросс-доменных запросов.
Если вам все-таки нужен RSS с другого домена, то вам нужно копать в сторону серверной реализации приемки данных или что-то типа JSON прокси.
А пока такой опции в этом плагине нет, но в будущей реализации обязательно будет! Также в следующей версии плагина появится поддержка нескольких лент на одной странице и сам плагин станет еще гибче в настройках.
