Хотите узнать что случилось и что дальше будет с сайтом?
Да, хотелось-бы :-)
Новостная лента на jQuery (jQuery News Ticker) для uCoz
- Плагин jQuery News Ticker поддерживает языки с порядком чтения справа-налево!
- Плагин jQuery News Ticker поддерживает загрузку содержания через фид RSS!
- Плагин jQuery News Ticker имеет опцию включения эффекта затухания для смены новостей!
- Плагин jQuery News Ticker совместим с jQuery 1.3.2!
подключите файлы из архива в head:
ВНИМАНИЕ !!! Если у Вас подключена библиотека JQERY то первую строчку (jquery-1.7.2.js) НЕ ПИШЕМ.
Код
<script type="text/javascript" src="http://s11.ucoz.net/src/jquery-1.7.2.js"></script>
<link href="http://megascripts.ru/demo/News_Ticker/css/ticker-style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://megascripts.ru/demo/News_Ticker/js/site.js"></script>
<script type="text/javascript" src="http://megascripts.ru/demo/News_Ticker/js/jquery.ticker.js"></script>
<link href="http://megascripts.ru/demo/News_Ticker/css/ticker-style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://megascripts.ru/demo/News_Ticker/js/site.js"></script>
<script type="text/javascript" src="http://megascripts.ru/demo/News_Ticker/js/jquery.ticker.js"></script>
разметка HTML для формирования бегущей строки (в то место где будет скрипт):
Код
<ul id="js-news" class="js-hidden">
<li class="news-item">Новость №1 - Здесь будет описание новости №1 ! - <a href="http://megascripts.ru">megascripts.ru</a></li>
<li class="news-item">Новость №2 - Здесь будет описание новости №2 ! - <a href="http://megascripts.ru">megascripts.ru</a></li>
<li class="news-item">Новость №3 - Здесь будет описание новости №3 ! - <a href="http://megascripts.ru">megascripts.ru</a></li>
<li class="news-item">Новость №4 - Здесь будет описание новости №4 ! - <a href="http://megascripts.ru">megascripts.ru</a></li>
<li class="news-item">Новость №5 - Здесь будет описание новости №5 ! - <a href="http://megascripts.ru">megascripts.ru</a></li>
<li class="news-item">Новость №6 - Здесь будет описание новости №6 ! - <a href="http://megascripts.ru">megascripts.ru</a></li>
<li class="news-item">Новость №7 - Здесь будет описание новости №7 ! - <a href="http://megascripts.ru">megascripts.ru</a></li>
</ul>
<li class="news-item">Новость №1 - Здесь будет описание новости №1 ! - <a href="http://megascripts.ru">megascripts.ru</a></li>
<li class="news-item">Новость №2 - Здесь будет описание новости №2 ! - <a href="http://megascripts.ru">megascripts.ru</a></li>
<li class="news-item">Новость №3 - Здесь будет описание новости №3 ! - <a href="http://megascripts.ru">megascripts.ru</a></li>
<li class="news-item">Новость №4 - Здесь будет описание новости №4 ! - <a href="http://megascripts.ru">megascripts.ru</a></li>
<li class="news-item">Новость №5 - Здесь будет описание новости №5 ! - <a href="http://megascripts.ru">megascripts.ru</a></li>
<li class="news-item">Новость №6 - Здесь будет описание новости №6 ! - <a href="http://megascripts.ru">megascripts.ru</a></li>
<li class="news-item">Новость №7 - Здесь будет описание новости №7 ! - <a href="http://megascripts.ru">megascripts.ru</a></li>
</ul>
Опции
Вы можете поменять внешний вид бегущей строки с помощью редактирования JS кода (в файле jquery.ticker.js).
Ниже приводится список доступных опций плагина с указанием значений по умолчанию:
Код
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: 'Новости', // Текст рядом с новостями
displayType: 'reveal', // Тип анимации. Доступные опции 'reveal' или 'fade'
direction: 'ltr' // Направление вывода строки.
Доступные опции 'ltr'(слева-направо) или 'rtl'(справа-налево)
pauseOnItems: 2000, // Длительность паузы перед сменой новости
fadeInSpeed: 600, // Скорость проявления анимации fade
fadeOutSpeed: 300 // Скорость исчезания анимации fade
ajaxFeed: false, // Наполнение News Ticker через фид RSS
feedUrl: false, // Адрес URL фида // ДОЛЖЕН РАСПОЛАГАТЬСЯ В ТОМ ЖЕ ДОМЕНЕ, ЧТО И БЕГУЩАЯ СТРОКА
feedType: 'xml', // Пока только XML
htmlFeed: true, // Наполненние News Ticker через HTML
debugMode: true, // Вывод некоторой информации в консоль или в виде сообщений
// ДЛЯ ОПУБЛИКОВАННОГО ПРОЕКТА ДОЛЖНО ИМЕТЬ ЗНАЧЕНИЕ FALSE!
controls: true, // Выводить или нет кнопки управления
titleText: 'Новости', // Текст рядом с новостями
displayType: 'reveal', // Тип анимации. Доступные опции 'reveal' или 'fade'
direction: 'ltr' // Направление вывода строки.
Доступные опции 'ltr'(слева-направо) или 'rtl'(справа-налево)
pauseOnItems: 2000, // Длительность паузы перед сменой новости
fadeInSpeed: 600, // Скорость проявления анимации fade
fadeOutSpeed: 300 // Скорость исчезания анимации fade
Как загружать содержание из фида RSS ?
Изменим пару строк в JS коде (в файле jquery.ticker.js).
Заменим :
Код
ajaxFeed: false,
feedUrl: false,
feedUrl: false,
на
Код
ajaxFeed: true,
feedUrl: 'http://webmaster-ucoz.ru/load/rss/',
feedUrl: 'http://webmaster-ucoz.ru/load/rss/',
разметка HTML для формирования бегущей строки (в то место где будет скрипт):
Код
<ul id="js-news" class="js-hidden">
<li class="news-item"></li>
</ul>
<li class="news-item"></li>
</ul>
Фид RSS должен располагаться в том же домене, что и плагин, так как jQuery не разрешает кросс-доменные запросы.
Вот и всё. И как обычно - всё необходимое находиться в архиве.
Информация о скрипте:
Материал просмотрен: 1399 раз
Категория материала: Скрипты для uCoz
К материалу оставлено: 0 комментариев
Калькулятор для твоего бизнеса
Полезная информация о uCoz
Создать сайт вместе с uKit.com
Онлайн всего: 1
Гостей: 1
Пользователей: 0
0 комментариев