News Slider - это небольшой, но интересный плагин к
JavaScript-библиотеке jQuery, который позволяет управлять отображением большого
количества новостей на сайте при ограниченном пространстве для их демонстрации.
Нам потребуется подключить в раздел HEAD страницы только два файла: библиотеку
jQuery jquery-1.2.3.js и файл плагина jquery.accessible-news-slider.js
<script type="text/javascript" src="js/jquery-1.2.1.js"></script>
<script type="text/javascript" src="js/jquery.accessible-news-slider.js"></script>
JavaScript-код этого плагина предъявляет определенные требования к организации
HTML-кода новостей и их стилевого оформления, поэтому эти моменты разберем
довольно подробно и начнем с HTML-кода.
<div class="item fl">
<a href="/"><img src="img.gif" alt="" class="fl" /></a>
<div class="fl">
<a href="/">Заголовок в ссылке</a><br />
Здесь написан текст новости...
</div>
</div>
Каждая отдельная новость - это элемент DIV с именами классов
item и fl. Внутри этот элемент может содержать картинки, ссылки, текст. Вы
можете изменять стилевое оформление этих элементов, но не изменять имена
классов, поскольку их использует плагин.
<div class="container fl"></div>
Все элементы DIV, содержащие новости, в свою очередь заключены в DIV с именами
классов container и fl.
<div class="news_items">
<a name="skip_to_news_1"></a>
</div>
Все это опять заключено в DIV с именем класса news_items. Используется для
организации скрытия и показа всего содержимого новостного блока.
<a href="#" class="prev"><img src="news_slider_prev.gif" /></a>
<a href="#" class="next"><img src="news_slider_next.gif" /></a>
В элементы A заключены картинки управляющие движением новостей вперед и назад.
<div class="news_slider"></div>
И наконец все это вместе опять заключено в DIV с именем класса news_slider, ведь
таких новостных блоков на странице может быть и несколько.
Вот такая довольно сложная иерархия, но такова воля автора.
Таблицу стилей целиком приводить не буду, отмечу лишь те моменты на которые
необходимо обратить внимание.
.fl {
float:left;
display:inline;
}
Селектор класса fl включает блок в плавающую модель, смещая его влево с помощью
свойства float и меняет представление блочного элемента с помощью свойства
display, что бы получить возможность отображать элементы DIV в одну линию по
горизонтали.
.news_slider .item {
/* Важно!
Обязательно определяем
свойства width и
margin-right. */
width: 170px;
margin-right: 10px;
}
Важный момент, поскольку, если не определять ширину блока новости,
JavaScript-код просто не сможет рассчитать расстояние для перемещения.
.news_slider .news_items {
/* Важно!
Ширина должна быть
равна .item ((width +
margin-right) * 2) */
position: relative;
width: 360px;
top: 0;
left: 20px;
overflow: hidden;
}
Почему именно так? Просто так посчитал нужным автор плагина. Ширина определяется
таким образом, чтобы были видны одновременно две новости. В принципе можно
исправить и на 3 или например на 1, но тогда придется вносить исправления в
JavaScript-код, поскольку автор остановился на варианте из двух новостей, жестко
определив это в коде.
Осталось разобрать только последний этап - включение в страницу кода, который
собственно и вызывает News Slider.
<script type="text/javascript">
$(document).ready(function(){
// ---- News Slider -----
$(".misc_news").accessNews({
newsHeadline: "Разные новости",
newsSpeed: "normal"
});
// ---- News Slider -----
});
</script>
Вот такой небольшой набор опций. Совершенно очевидно, что newsHeadline - это
заголовок новостного блока, а newsSpeed - скорость с которой "скользят" новости.
Это могут быть еще fast и slow, либо просто целое число.
Автор:
http://isis.habrahabr.ru/
Последние комментарии