» » Вывод новостей в 2 колонки (jQuery edition)

Вывод новостей в 2 колонки (jQuery edition)

30.05
37
31 183
Вывод новостей в 2 колонки (jQuery edition)

Сегодня я покажу вам, простейший и в то же время универсальный способ вывода новостей в две колонки с помощью CSS и jQuery.
Способ этот примечателен двумя моментами:
1 - Корректный вывод новостей, независимо от высоты каждой новости в отдельности (объясню этот момент пожже, если кому то не понятно).
2 - Если в браузере отключены яваскрипты, новости будут выводиться в 1 колонку, не уродуя дизайн сайта.

Итак, обо всём по порядку:


Для начала взгляните на демонстрацию того о чём будет эта статья.
Введение.
Вывод новостей в две колонки в DLE довольно распространённая проблема, имеющая решения как на php так и более простой вариант - на CSS, о котором я рассказывал ещё в самой первой статье моего блога, с тех пор утекло немало воды, и вот сегодня на ум пришло ещё одно решение данной проблемы, и, насколько мне известно, через jQuery никто даже не пытался реализовать вывод новостей в 2 колонки. А между тем мне кажется это самый, универсальный и эффективный способ.

Чтобы не быть голословным, рассмотрим нижеприведённый скриншот.

Вывод новостей в 2 колонки (jQuery edition)


На картинке отчётливо видны различия вывода новостей между чистым css и jQuery.

Реализация.

Идея реализации проста: через jquery присваивать блокам с новостями определённые свойства.

1. HTML-код

Как пример возьмём шаблон Tango_RUS, его shortstory.tpl после небольшой доработки будет выглядить вот так:
<div class="news">
    ........пропущен код..........
</div>
<div class="news_clr"></div>

Я показал только ключевые блоки, чтобы не отвлекать от сути вопроса.
Блок с классом news_clr - это будующий разделитель пар новостей.

2. Подключаем jQuery
Открываем main.tpl и перед </head> пишем:
<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>

Теперь каждому блоку с классом 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, ширины шаблона (фиксированной или "резиновой") в каждом конкретном случаи эта цифра будет разная и не обязательно должна указываться в процентах, для фиксированной ширины шаблона можно указывать точную ширину блока.


Немного о цветах: заказать букет.

Похожие материалы

Комментарии

Yanetta
Yanetta 3 августа 2010 13:08
У меня почему-то сливаются сверху колонки (зеленый фон заголовков) - как это исправить подскажите, пожалуйста...
ПафНутиЙ
ПафНутиЙ 3 августа 2010 14:16
для класса .news.alt пропишите отступ справа
например:
.news.alt {
float: left;
width: 45%;/*значение подбирается индивидуально*/
margin-right: 10px;
}
salam
salam 14 февраля 2011 15:55
ПафНутиЙ,
В 9.2 не работает. Точнее работает, но при этом блокирует работу этого libs.js скрипта.
Есть варианты как их подружить, а то надо бы обновиться а тут затык?
ПафНутиЙ
ПафНутиЙ 14 февраля 2011 16:15
Для 9.2 не нужно подключать библиотеку jquery< она уже подключена.
А вообще тут просто присваивается класс к каждой новости, проблем впринципе не должн быть
salam
salam 14 февраля 2011 17:09
ПафНутиЙ,
Попробовал на шаблоне Gemini, не работает

получаю это:

<div class="news">
<div class="base shortstory">
</div>
<div class="news_clr"/>
<div class="news">
<div class="news_clr"/>
<div class="news">
<div class="news_clr"/>
.... и т.д.

Вроде классы присваивает...

а где класс alt ?
ПафНутиЙ
ПафНутиЙ 14 февраля 2011 17:19
Адрес сайта в студию!
salam
salam 14 февраля 2011 17:38
ПафНутиЙ,
Сайт на локальном денвере, к сожалению. Но могу скинуть майн шорт-стори и css файлы
ПафНутиЙ
ПафНутиЙ 14 февраля 2011 17:41
Код скрипта подключается после тега {heаders} или до?
если ДО, тогда понятна проблема, а если после, тогда надо проверить.
salam
salam 14 февраля 2011 17:50
Код шапки майн тпл

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
{headers}
<link rel="shortcut icon" href="{THEME}/images/favicon.ico" />
<link media="screen" href="{THEME}/style/styles.css" type="text/css" rel="stylesheet" />
<link media="screen" href="{THEME}/style/engine.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="{THEME}/js/libs.js"></script>
<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>
</head>


и вот что отдает сервер:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>DataLife Engine Nulled by M.I.D-Team</title>
<meta name="description" content="Демонстрационная страница движка DataLife Engine" />
<meta name="keywords" content="DataLife, Engine, CMS, PHP движок" />
<meta name="generator" content="DataLife Engine Nulled by M.I.D-Team (http://www.mid-team.ws)" />
<meta name="robots" content="all" />
<meta name="revisit-after" content="1 days" />
<link rel="search" type="application/opensearchdescription+xml" href="http://test1.ru/engine/opensearch.php" title="DataLife Engine Nulled by M.I.D-Team" />
<link rel="alternate" type="application/rss+xml" title="DataLife Engine Nulled by M.I.D-Team" href="http://test1.ru/rss.xml" />
<script type="text/javascript" src="/engine/classes/js/jquery.js"></script>
<script type="text/javascript" src="/engine/classes/js/jqueryui.js"></script>
<script type="text/javascript" src="/engine/classes/js/dle_js.js"></script>
<script type="text/javascript" src="/engine/classes/highslide/highslide.js"></script>
<link rel="shortcut icon" href="/templates/Gemini/images/favicon.ico" />
<link media="screen" href="/templates/Gemini/style/styles.css" type="text/css" rel="stylesheet" />
<link media="screen" href="/templates/Gemini/style/engine.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="/templates/Gemini/js/libs.js"></script>
<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>
</head>
ПафНутиЙ
ПафНутиЙ 14 февраля 2011 17:51
первое:
убрать
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

второе:
убрать нул, поставить нормальный двиг.
salam
salam 14 февраля 2011 17:54
ПафНутиЙ,
Первое не проблема, второе на лиценз пока денег нету и для тестирования на локале думаю нулл пойдет
salam
salam 14 февраля 2011 17:58
после того как убрал первое

получил вот что

<div id="dle-content">
<div class="news alt">
<div class="base shortstory">
</div>
<div class="news_clr alt"/>
<div class="news alt">
<div class="base shortstory">
</div>
<div class="news_clr"/>
<div class="news alt">
<div class="base shortstory">
</div>
<div class="news_clr alt"/>
<div class="news alt">
<div class="base shortstory">
</div>
<div class="news_clr"/>
<div class="news alt">
<div class="base shortstory">
</div>
salam
salam 14 февраля 2011 19:24
ПафНутиЙ,
беру свои слова назад, косяк я так и не нашел, НО залил на хостинг и все заработало, только надо убрать это <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> и все ок. Спасибо за помощь.
ПафНутиЙ
ПафНутиЙ 14 февраля 2011 21:58
я же вот тут ответил в чём проблема была smile
Mek
Mek 23 марта 2011 22:48
ПафНутиЙ, спасибо, данный хак работает. У меня вот какой вопрос- если мыслить логически то при изменении значения:
width: 45%;/*значение подбирается индивидуально*/

45% на 33% новости должны выводиться в три колонки, или если поставить 25% то в 4. Но этого не происходит, новости всегда выводятся в две колонки. Вопрос- как на основе этого хака реализовать вывод новостей в 3 или 4 колонки? smile
ПафНутиЙ
ПафНутиЙ 24 марта 2011 01:19
Новости в 2, 3, 4, 100 колонок. smile Думаю я ответил на Ваш вопрос
Игорь
Игорь 14 сентября 2012 22:25
появились 2 проблемы - если на странице отображается 5 блоков с анонсами, блок с постраничной навигацией занимает место 6-го блока,
если ссужаю окно браузера(у меня широкий) блоки становятся друг под другом но шапки блоков немного криво становятся относительно самих блоков - min-width: 400px; в стилях прописал(так как картинки в анонсах именно такой длины и ширины), шаблон MasterSkipt(резина)за хак спасибо.
ПафНутиЙ
ПафНутиЙ 14 сентября 2012 22:48
Я понятия не имею о каком шаблоне идет речь, нужно видеть сайт.
Игорь
Игорь 14 сентября 2012 22:50
отправил через форму обратной связи
ПафНутиЙ
ПафНутиЙ 14 сентября 2012 22:55
style.css строка 431
.newsTop {
min-width: 400px; /*заменить на 422px*/
}
Игорь
Игорь 14 сентября 2012 23:05
спасибо, блоки отображаются красиво
IMP
IMP 15 сентября 2012 10:01
thank u for this helpful article.
ПафНутиЙ
ПафНутиЙ 15 сентября 2012 22:51
Игорь,
IMP,
На здоровье!
boltuk
boltuk 13 октября 2012 10:38
Добрый день. Сделал все как написано, все просто класс, но после появления на странице 2-й колонки появился отступ с права. Помогите пожалуйста его убрать:


В navigation.tpl пришлось вписать следующее:
><div style="clear:both">

Т.к без этого стиля навигация как раз отображалась в правом угле...
ПафНутиЙ
ПафНутиЙ 13 октября 2012 10:40
подберите ширину колонок побольше.
boltuk
boltuk 13 октября 2012 10:47
.news.alt {
    float: left;
    width: 45%;/*значение подбирается индивидуально*/


Щас ширина задана в 450px, увеличиваю до 455 и становится все в одну колонку (вторая пропадает). Как я понимаю слишком большой размер, но по идее той ширины отступа вполне должно хватить...
boltuk
boltuk 13 октября 2012 19:29
Извиняюсь, немного не правильно описал. Когда стоит 50% все нормально на полную ширину отображает, но блоки сливаются, а если выставить margin-right: 10px; (пробовал и 3), то с правого края сразу огромный отступ, который на скриншоте.
ПафНутиЙ
ПафНутиЙ 13 октября 2012 21:46
поставьте margin: 0 5px;
boltuk
boltuk 13 октября 2012 22:41
Спасибо огромное, все получилось!
ПафНутиЙ
ПафНутиЙ 15 октября 2012 16:49
Наздоровье ))

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

Комментировать могут только зарегистрированные пользователи

Информация

Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.