Как использовать плагин
Загружаем архив с плагином.
И что с ним делать?
Если вы хотите использовать полностью стилизованную версию (как на примере выше) бегущей строки, подключите файлы из архива к вашей странице HTML:
<link href="css/ticker-style.css" rel="stylesheet" type="text/css" />
<script src="jquery.ticker.js" type="text/javascript"></script>Для работы плагина также потребуется jQuery (1.4.2 или новее). Рекомендуется использовать API библиотеки Google Ajax для подключения самой последней версии.
Существует версия плагина jQuery News Ticker, которая совместима с версией jQuery 1.3.2. Ее можно загрузить здесь: jquery.ticker.js. Данная версия не имеет всех опций, доступных в плагине News Ticker для более свежей версии jQuery.
Потребуется разметка HTML для формирования бегущей строки
Для плагина требуется разметка HTML следующего вида:
<div id="ticker-wrapper" class="no-js">
<ul id="js-news" class="js-hidden">
<li class="news-item"><a href="#">Текст новости №1.</a></li>
<li class="news-item"><a href="#">Текст новости №2.</a></li>
<li class="news-item"><a href="#">Текст новости №3.</a></li>
<li class="news-item"><a href="#">Текст новости №4.</a></li>
</ul>
</div>jQuery News Ticker также работает с элементами списка <ol>.
Запускаем бегущую строку
Для работы плагина News Ticker нужно добавить код JavaScript:
<script type="text/javascript">
$(function () {
$('#js-news').ticker();
});
</script>
Опции
Вы можете поменять внешний вид бегущей строки с помощью редактирования СSS кода.
Ниже приводится список доступных опций плагина с указанием значений по умолчанию:
$(function () {
$('#js-news').ticker(
speed: 0.10, // Скорость вывода строки текста
ajaxFeed: false, // Наполнение News Ticker через фид RSS
feedUrl: false, // Адрес URL фида
// ДОЛЖЕН РАСПОЛАГАТЬСЯ В ТОМ ЖЕ ДОМЕНЕ, ЧТО И БЕГУЩАЯ СТРОКА
feedType: 'xml', // Пока только XML
htmlFeed: true, // Наполненние News Ticker через HTML
debugMode: true, // Вывод некоторой информации в консоль или в виде сообщений
// ДЛЯ ОПУБЛИКОВАННОГО ПРОЕКТА ДОЛЖНО ИМЕТЬ ЗНАЧЕНИЕ FALSE!
controls: true, // Выводить или нет кнопки управления
titleText: 'Latest', // Текст рядом с новостями
displayType: 'reveal', // Тип анимации. Доступные опции 'reveal' или 'fade'
direction: 'ltr' // Направление вывода строки.
Доступные опции 'ltr'(слева-направо) или 'rtl'(справа-налево)
pauseOnItems: 2000, // Длительность паузы перед сменой новости
fadeInSpeed: 600, // Скорость проявления анимации fade
fadeOutSpeed: 300 // Скорость исчезания анимации fade
);
});
Как использовать опции?
При вызове плагина нужно передать ему желаемые параметры:
<script type="text/javascript">
$(function () {
$('#js-news').ticker({
speed: 0.10,
htmlFeed: false,
fadeInSpeed: 600,
titleText: 'О плагине'
});
});
</script>Какие браузеры поддерживают плагин?
Плагин тестировался в следующих браузерах: IE6+, FF 3.6+, Chrome, Safari, Safari Mobile и Opera.
Какая лицензия используется для плагина?
GPL v2 - текст лицензии находится здесь: http://www.gnu.org/licenses/gpl-2.0.html
Как загружать содержание из фида RSS?
Код для использования фида RSS выглядит следующим образом:
<script type="text/javascript">
$(function () {
$('#js-news').ticker({
htmlFeed: false,
ajaxFeed: true,
feedUrl: 'ЗДЕСЬ НАДО УКАЗАТЬ АДРЕС URL ФИДА RSS - например, http://example.com/rss.xml',
feedType: 'xml'
});
});
</script>Описание формата RSS можно найти здесь.
Фид RSS должен располагаться в том же домене, что и плагин, так как jQuery не разрешает кросс-доменные запросы.
Если вам надо использовать фид из другого домена, то придется либо реализовывать решение на серверной стороне, либо использовать прокси JSON.