Шаблоны DLE тематики:
Все Шаблоны
Уникальные Шаблоны Авто и мото Бизнес Недвижимость Строительство Туризм Спорт Фильмы СМИ / Новости Игры / Софт Минимализм Музыка Общие Блоговые Женские сайты Для взрослых
DataLife Engine
Скачать DLE 9.7 Скачать DLE 9.6 Скачать DLE 9.5 Скачать DLE 9.4 Модули для DLE Оптимизируем DLE Платное бесплатно! SEO Блог SEO Видео Разное
Шаблоны для DLE бесплатно

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

 (голосов: 4)

Выводим новости в несколько колонок 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%; на нужное значение (как правило методом подбора).
   




alert Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
alert Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии в данной новости.
Заработок вебмастера
Популярное
» Строительный шаблон smolotkom для DLE 9.4
» KomStroy - Шаблон строительного портала для DLE 9.6
» Шаблон Biznes-Woman для DLE
» Лёгкий новостной шаблон для DLE 9.6
» DLE v.9.4 Оригинал (no nulled) + nulled
» Бизнес шаблон для DLE 9.6
» Игровые шаблоны сайта Zombie-mod (Оригинал) для DLE 9.6
» Строительный шаблон stroy-master для DLE 9.7
» Функциональный Авто шаблон для DLE 9.4
» Шаблон сайта по ремонту коттеджей для DLE 9.6
» Шаблон сайта фильмов для DLE 9.6
» Шаблон интернет-магазина для DLE 9.6