News Slider - это небольшой, но интересный плагин к
JavaScript-библиотеке jQuery, который позволяет управлять отображением большого
количества новостей на сайте при ограниченном пространстве для их демонстрации.
Нам потребуется подключить в раздел HEAD страницы только два файла: библиотеку
jQuery jquery-1.2.3.js и файл плагина jquery.accessible-news-slider.js
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.
В элементы 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.
Вот такой небольшой набор опций. Совершенно очевидно, что newsHeadline - это
заголовок новостного блока, а newsSpeed - скорость с которой "скользят" новости.
Это могут быть еще fast и slow, либо просто целое число.
Когда существующих возможностей становиться мало, а совершенствовать существующее уже некуда, тогда и происходит технологический прорыв. Таким прорывом и есть AJAX (Asynchronous JavaScript and XML) - подход к построению пользовательских интерфейсов веб-приложений, при котором web-страница, не перезагружаясь, сама догружает нужные пользователю данные. AJAX - один из компонентов концепции DHTML... подробнее
Итак, запись в таблице отредактирована, осталось её сохранить. Первое, что приходит на ум - это целиком AJAX решение, когда данные собираются из редактируемой строки DataGrid, отправляются на сервер, и в случае успеха клиентская PostBack функция перерисовывает строку таблицы уже только для просмотра... подробнее
Не так давно я говорил, что буду предоставлять информацию относительно PHP и Ajax. На конференции которую я провел на прошлой неделе 10 ноября 2005г. Я также обещал людям что переведу все что я приготовил для публикации на моем блоге (автор так и не перевел все это дело на Голландский, тем самым очень мне облегчил перевод )... подробнее
Давайте обсудим более рациональные и эффективные функции для нашего любимого сайта. Начнем с самой простой вещи - кнопки Добавить в закладки. По моему, это самое наболевшее место, которое так и просится чтобы его Ajax’стили... подробнее
Рыская в интернете в поисках Ajax-готового новостного движка, я наткнулся на давно всем известный . Хотя этот довольно продвинутый php ресурс и содержит элементы Ajax, они по-моему не до конца раскрыты и используются довольно скупо... подробнее
