Опрос

Вернешься к нам?
Да
Нет
Все возможно
Голосовать Результаты опроса

Партнеры

  • Место свободно
  • Место свободно
  • Место свободно
  • Место свободно

Наш архив :)

Онлайн

    Всего на сайте: 6
    Гостей: 5
    Пользователи: - отсутствуют
    Роботы: Arraycrawl Bot
    Администраторов: 1
    Редакторов: 0
    Журналистов: 1
    Модераторов: 0
    Дизайнеры: 0
    VIP: 0
    Пользователей: 8307 [+17]

Переходы

123

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

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

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

DEMO


Своё Спасибо, еще не выражали.
Рейтинг:
 (голосов: 3)
Комментариев: 1 | Просмотров: 1695
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Зарегестрировавшись,вы сможете скачивайть файлы с нашего сервера.Общатся в чате просматривать и вести жизнь на нашем форуме,и многое другое)xD
Рекомендуем также:
Репутация: 0
ero205588
Коммент. №1
Группа: Пользователи
Регистрация: 10.07.2010
Комментариев: 4
Публикаций: 7
Статус:Оффлайн
10 июля 2010 18:43
О_о классно,спс
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.
Яндекс Апдейт
Данные временно не доступны.
Календарь
«    Сентябрь 2021    »
ПнВтСрЧтПтСбВс
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
 
Чат
НаписалФилипп
26 августа 2017
Добрый день. Презентация http://jersiker.ru/
Ответить
НаписалАнтон
29 июня 2017
Добрый день. Наша презентация http://omelesu.ru/
Ответить
НаписалВиталий
14 июня 2017
Здравствуйте. Не дозвонились до вас, презентация http://majuster.ru/
Ответить
НаписалЕвгений
12 мая 2017
Добрый день. Это презентация, не дозвонились до Вас, посмотрите http://merternas.ru/?activation=9
f8dd061
Ответить
НаписалАнатолий
4 марта 2017
Не дозвонились до Вас, посмотрите презентацию http://advertuper.ru/video?activa
tion=af8e1257
Ответить
НаписалКирилл
11 января 2017
Здравствуйте! Я звонил вам перед праздниками, вы не перезвонили, результат нашей презентации тут http://patrongiis.ru/
Ответить
НаписалСемён
29 ноября 2016
Добрый день! Вам стоит это увидеть, это касается вашей компании! Смотрите в видео http://customerbass.ru/video
Ответить
НаписалВалерий
22 ноября 2016
Добрый день. Вчера договаривались созвонится с Вами в 14:00, но я до Вас не дозвонился, нужно ваше решение по нашему предложению http://comenst.ru/offer293
Ответить
НаписалДанила
24 октября 2016
Это ссылка на презентацию, о которой я говорил http://prescom.ru/
Ответить
НаписалЕгор
6 октября 2016
Добрый день! Я обещал вам прислать ссылку http://plazametrix.ru/
Ответить

   
Популярное
Коментарии
Автор → Babyn1N
в новости → Поисковая подсказка
Автор → IraFriene
в новости → "Страница ошибки 404 на DLE"
Автор → dficrgFriene
в новости → Поисковая подсказка
Автор → Snovidenius
в новости → "Страница ошибки 404 на DLE"
Автор → buypropeciaon
в новости → Поисковая подсказка
Автор → gcgdgijhheDhaBB
в новости → "Страница ошибки 404 на DLE"
Автор → buypropecia
в новости → Поисковая подсказка
© RIPs.SU DOG
Последние комментарии 2.4
Проследить за всеми новостями мы не можем, так как новости берутся из открытых источников. Если вы считаете, что новость нарушает ваши права на авторство или дизайн, то обратитесь к администрации данного ресурса.
© artsss-web.ru 2010 - 2012 Яндекс.Метрика

{dotcat}