prowebber.ru - Тут есть все для настоящих вебмастеров

Чтение RSS Мы в твиттере
«    Декабрь 2016    »
ПнВтСрЧтПтСбВс
 
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
31
 

Всё для вебмастера » Уроки » Выводим новости в несколько колонок DLE

Выводим новости в несколько колонок DLE


Данный материал предоставлен сайтом ProWebber.ru исключительно в ознакомительных целях. Администрация не несет ответственности за его содержимое.
У нас вы можете скачать бесплатно Выводим новости в несколько колонок DLE.


Выводим новости в несколько колонок DLE

Реализуем вывод новостей в несколько колонок по средствам jQuery.
Данный метод позволяет страничке значительно быстрее загружаться.


Код в shortstory.tpl должени иметь примерно такой вид:

<div class="news">

содержание shortstory и всякие теги,
главное тут - "обёртка" всего содержимого shortstory.tpl
</div>


Обязательные стили в CSS:

.news.float {
    float: left;
    width: 30%; //значение зависит от желаемого количества колонок (например для 5ти колонок нужно указать 18-20%)
    }
.clr {
    clear: both;
    height: 0;
    overflow: hidden;
    }


Ну и самое главное - jQuery-код:

<script type="text/javascript">
jQuery(function($) {
    $(".news").addClass("float").filter(":nth-child(3n)").after('<div class="clr"></div>');
});
</script>


Как видно из строки кода - всё совершенно просто - сначала дописываем всем блокам с классом news дополнительный класс, а потом дописываем после каждого третьего блока пустой div с слассом clr - это для того, чтобы новости имели ровное горизонтальное положение, а не плавали так, как им захочется.

Как настроить?

Легко!
Всё что нужно - это заменить цифру три в строке :nth-child(3n) на желаемую, и в CSS заменить width: 30%; на нужное значение (как правило методом подбора).


0
Просмотры: 5212 VIP ProWebber | Комментарии (5)
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

#1SaD

  • 22 февраля 2012 20:31
  • Регистрация: 23.02.2011
  • ICQ: --
  • Комментариев: 502
Дружище, я не буду даже говорить что это говнокод...А просто спрошу: А нафиг тут вообще Jquery, когда эту строчку
:nth-child(3n)").after('<div class="clr"></div>

можно заменить чистым CSS.

--------------------

0

#2eXteRnaL

  • 22 февраля 2012 22:10
  • Регистрация: 13.02.2010
  • ICQ: 395951912
  • Комментариев: 69
  • Выкл.
ппц, этой статье уже года 4

0

#3ПафНутиЙ

  • 23 февраля 2012 08:37
  • Регистрация: 8.03.2010
  • ICQ: 817233
  • Комментариев: 400
Похоже тупой перепост с кагокото ГС, ибо в оригинале (_http://pafnuty.name/statyi/96-novosti-v-dve-tri-chetyre-i-td-kolonki-razvitie-
mysli.html ) объясняетя откуда взялся js.
Да и статья уже не актуальна, в свете использования CSS3 можно обойтись чистым css и какими нибудь костылями для говнобраузера ie<9)_http://htmlbook.ru/css/nth-child
В демке же (сейчас недоступна, забыл я про этот поддомен при переносе) было показано как динамически менять кол-во колонок.

В общем в топку такой перепост!

--------------------

0

#4hatahana

  • 24 февраля 2012 10:39
  • Регистрация: 5.08.2011
  • ICQ: --
  • Комментариев: 58
Ну наконец-то. Спасибо, добрый человек.

0

#5sparky5000

  • 13 апреля 2014 23:09
  • Регистрация: 10.05.2010
  • ICQ: --
  • Комментариев: 22
Каша из постов ....
И чо это за хрень? crazy

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

Max-energy.top - Заработок на электросчетчиках;)

Skripters.info - все для вебмастера. Только эксклюзивный контент.

Создание шаблонов DLE, быстро и недорого! 3wave.com.ua

Бро лей на лучшую партнёрку

Почти бесплатный VDS хостинг!

Поддержи сайт
Скрипты, cms, шаблоны, статьи по раскрутке

Опросы

Как часто вы бываете на сайте?

Захожу 1-2 раза в день
1-2 часа в сутки
Более 2 часов
Почти целый день тут smile

Архив новостей
Ноябрь 2016 (7)
Октябрь 2016 (10)
Сентябрь 2016 (8)
Август 2016 (11)
Июль 2016 (14)
Июнь 2016 (17)

Последние комментарии:

Искать людей

Ваши переписки