jQuery News Slider - скользящие новости

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, либо просто целое число.




Рекомендуем почитать

 

Добавить комментарий


Ваше имя:


Комментарий:


Введите: Картинка