06:40 Вывод новостей в 2 колонки (jQuery edition) | |
| Сегодня я покажу вам, простейший и в то же время универсальный способ вывода новостей в две колонки с помощью CSS и jQuery. Способ этот примечателен двумя моментами: 1 - Корректный вывод новостей, независимо от высоты каждой новости в отдельности (объясню этот момент пожже, если кому то не понятно). 2 - Если в браузере отключены яваскрипты, новости будут выводиться в 1 колонку, не уродуя дизайн сайта. Итак, обо всём по порядку: Для начала взгляните на того о чём будет эта статья. Введение. Вывод новостей в две колонки в DLE довольно распространённая проблема, имеющая решения как на php так и более простой вариант - на CSS, о котором я рассказывал ещё давно, с тех пор утекло немало воды, и вот сегодня на ум пришло ещё одно решение данной проблемы, и, насколько мне известно, через jQuery никто даже не пытался реализовать вывод новостей в 2 колонки. А между тем мне кажется это самый, универсальный и эффективный способ. Чтобы не быть голословным, рассмотрим нижеприведённый скриншот. На картинке отчётливо видны различия вывода новостей между чистым css и jQuery. Реализация. Идея реализации проста: через jquery присваивать блокам с новостями определённые свойства. 1. HTML-код Как пример возьмём шаблон Tango_RUS, его shortstory.tpl после небольшой доработки будет выглядить вот так: ........пропущен код.......... Я показал только ключевые блоки, чтобы не отвлекать от сути вопроса. Блок с классом news_clr - это будующий разделитель пар новостей. 2. Подключаем jQuery Открываем main.tpl и перед пишем: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> <script type="text/javascript"> $(document).ready( function() { $("div.news").addClass("alt"); $("div.news_clr:even").addClass("alt"); }); Теперь каждому блоку с классом news и каждому второму блоку с классом news_clr будет присваиваться дополнительно класс alt. 3. CSS Открываем style.css и дописываем несложные свойства: .news.alt { float: left; width: 45%;/*значение подбирается индивидуально*/ } .news_clr { height: 0; clear: both; } .news_clr.alt { clear: none; } Итог При работе jQuery скрипта каждый блок с новостями будет иметь 45 процентную ширину и обтекание слева, а каждый второй блок news_clr не будет иметь обтекания вообще. Таким образом каждые 2 новости визуально будут отделяться от двух следующих, а при отключенных яваскриптах новости будут отображаться стандартно - в 1 колонку. Остаётся только добавить, откуда взялось 45% - эта цифра взята не с потолка а подобрана "методом научного тыка", т.е. взависимости от отступов у блока с классом news, ширины шаблона (фиксированной или "резиновой") в каждом конкретном случаи эта цифра будет разная и не обязательно должна указываться в процентах, для фиксированной ширины шаблона можно указывать точную ширину блока. Демо тут: _http://demo1.pafnuty.name/index.php?action_skin_change=yes&skin_name=tango_2_cols | |
|
| |
| Всего комментариев: 0 | |