Вывод новостей в 2 колонки (jQuery edition)
10-07-2010, 07:19. Разместил: Пряник
Способ этот примечателен двумя моментами:
1 - Корректный вывод новостей, независимо от высоты каждой новости в отдельности (объясню этот момент пожже, если кому то не понятно).
2 - Если в браузере отключены яваскрипты, новости будут выводиться в 1 колонку, не уродуя дизайн сайта.
Вывод новостей в две колонки в DLE довольно распространённая проблема, имеющая решения как на php так и более простой вариант - на CSS. А между тем мне кажется это самый, универсальный и эффективный способ.
Чтобы не быть голословным, рассмотрим нижеприведённый скриншот.
На картинке отчётливо видны различия вывода новостей между чистым css и jQuery.
Реализация.
Идея реализации проста: через jquery присваивать блокам с новостями определённые свойства.
1. HTML-код
Как пример возьмём шаблон Tango_RUS, его shortstory.tpl после небольшой доработки будет выглядить вот так:
<div class="news">
........пропущен код..........
</div>
<div class="news_clr"></div>
........пропущен код..........
</div>
<div class="news_clr"></div>
Я показал только ключевые блоки, чтобы не отвлекать от сути вопроса.
Блок с классом 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>
<script type="text/javascript">
$(document).ready(
function() {
$("div.news").addClass("alt");
$("div.news_clr:even").addClass("alt");
});
</script>
<script type="text/javascript">
$(document).ready(
function() {
$("div.news").addClass("alt");
$("div.news_clr:even").addClass("alt");
});
</script>
Теперь каждому блоку с классом 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;
}
float: left;
width: 45%;/*значение подбирается индивидуально*/
}
.news_clr {
height: 0;
clear: both;
}
.news_clr.alt {
clear: none;
}
Итог
При работе jQuery скрипта каждый блок с новостями будет иметь 45 процентную ширину и обтекание слева, а каждый второй блок news_clr не будет иметь обтекания вообще. Таким образом каждые 2 новости визуально будут отделяться от двух следующих, а при отключенных яваскриптах новости будут отображаться стандартно - в 1 колонку. Остаётся только добавить, откуда взялось 45% - эта цифра взята не с потолка а подобрана "методом научного тыка", т.е. взависимости от отступов у блока с классом news, ширины шаблона (фиксированной или "резиновой") в каждом конкретном случаи эта цифра будет разная и не обязательно должна указываться в процентах, для фиксированной ширины шаблона можно указывать точную ширину блока.
DEMO
Вернуться назад