loading...

Авторизация ...

Имя пользователя :
Пароль :
я всё забыл!

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

Написал ПафНутиЙ, 1 июня 2010 | 10 комментариев | рейтинг новости не нравится   +10   нравится Версия для печати
Вывод новостей в 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 и перед [/b] пишем:
<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>

Теперь каждому блоку с классом [b]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


Отблагодарили: kiosaki, DeNSPb, bsunit, Романыч, pavel31

Комментарии пользователей

  Экспорт комментариев в RSS
 Сортировать по рейтингу, по дате

Написал kiosaki, 1 июня 2010 в 14:17 плохой комментарий   0   хороший комментарий
Новостей: 1, комментариев: 31, Пользователи
Карма:
Прикольно. Вот если бы и высота была одинаковой, а то чуток не красиво смотрится разные высоты новости.

Написал Mek, 1 июня 2010 в 14:44 плохой комментарий   0   хороший комментарий
Новостей: 0, комментариев: 36, Пользователи
Карма:
Чтоб была одинаковая высота нужно количество текста в новостях делать одинаковым, иначе не получится.

Написал vibe, 4 июня 2010 в 05:52 плохой комментарий   0   хороший комментарий
Новостей: 0, комментариев: 1, Пользователи
Карма:
overflow тебе в помощь! :)

Написал ПафНутиЙ, 1 июня 2010 в 15:31 плохой комментарий   0   хороший комментарий
Новостей: 26, комментариев: 330, Пользователи
Карма: 16±
Чтобы была одинаковая высота можно прикрутить вот такой вот скрипт:
<script>
function setEqualHeight(columns)
{
    var tallestcolumn = 0;
    columns.each(
    function()
     {
          currentHeight = $(this).height();
          if(currentHeight > tallestcolumn)
          {
                tall
estcolumn = currentHeight;
          }
    }
    );
    columns.height(tallestcolumn);
}


$(document).ready(function() {
    setEqualHeight($("div.sstory"));

});

</script>

Я изначально хотел сделать одинаковую высоту, но дело в том что скрипт выравнивает высоту по самой "высокой" новости, т.е. той где больше всего контента, и остальные получаются с большим пустым пространством.

Написал Lion__, 2 июня 2010 в 21:22 плохой комментарий   0   хороший комментарий
Новостей: 4, комментариев: 48, Пользователи
Карма:
width: 50% уже не канает?)))

Написал sadead, 2 июня 2010 в 22:28 плохой комментарий   0   хороший комментарий
Новостей: 13, комментариев: 184, Пользователи
Карма:
Есть как минимум 2 модуля с возможность настраивать вывод колонками.

JS не очень хорошо с этим справляется...Но в качестве примера сохраню.

Написал ПафНутиЙ, 3 июня 2010 в 18:40 плохой комментарий   0   хороший комментарий
Новостей: 26, комментариев: 330, Пользователи
Карма: 16±
Цитата: Lion__
width: 50% уже не канает?)))

эта цифра взята не с потолка а подобрана "методом научного тыка", т.е. взависимости от отступов у блока с классом news,
зачастую при установке 50% новости выводятся в 1 колонку шириной чуть больше половины.

Цитата: sadead
Есть как минимум 2 модуля с возможность настраивать вывод колонками.

вот именно что модули, а задача ставилась сделать вывод без правки php. Опять же что будет с модулем при обновлении движка скажем с 7.x до 8.5?

Написал pnul, 25 июня 2010 в 03:10 плохой комментарий   +1   хороший комментарий
Новостей: 0, комментариев: 4, Пользователи
Карма:
А как вывод в две колонки сделать не для главной страницы, а только для одной подкатегории?

Написал ImpulseL, 21 сентября 2010 в 19:14 плохой комментарий   0   хороший комментарий
Новостей: 0, комментариев: 6, Пользователи
Карма:
2. Подключаем jQuery
Открываем main.tpl и перед [/b] пишем:


наверное {headers}?

Написал ИскушениЕ, 21 сентября 2010 в 23:51 плохой комментарий   0   хороший комментарий
Новостей: 6, комментариев: 61, Пользователи
Карма:
Видео урок сделал, как всё это провернуть не устанавливая хаков и всякой лабуды. http://70ts.ru/datalifeengine/91-v-dve-i-bolee-kolonok.html

Информация



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

[removed][removed] [removed] (adsbygoogle = window.adsbygoogle || []).push({}); [removed]