Чтение RSS каналов

Форум

Открыть Ответить

Вывод материала модулей в 2 колонки - jQuery Edition

0

0
1
29.03.2012 21:10:0029.03.2012 21:24:51
Представляю вашему вниманию простой, но в то же время универсальный способ вывода материала модулей в две колонки с помощью CSS и jQuery. Использование данного метода не требует модификации PHP файлов и приемлем для всех модулей системы как стандартных так и не стандартных.

Пример использования в модуле новостей

Вывод материала в 2 колонки - jQuery Edition


Реализация для версии SLAED CMS 5.* Pro

Открываем файл: plugins/jquery/jquery.slaed.js

В нижней части вставляем:
// Two columns
$(document).ready(function() {
$("div.sl_news").addClass("alt");
$("div.sl_news_clr:even").addClass("alt");
});


Открываем файл: templates/celestial/css/main.css
Для не стандартной темы оформления используйте свой CSS файл.

В нижней части вставляем:
/* Материал в две колонки */
.sl_news.alt {
float: left;
width: 50%; /* Данное значение подбирается индивидуально */
}
.sl_news_clr {
height: 0;
clear: both;
}
.sl_news_clr.alt {
clear: none;
}


Открываем файл: templates/celestial/basic.html
Для не стандартной темы оформления используйте свой HTML файл.

В начале кода указываем:
<div class="sl_news">


В конце кода указываем:
</div>
<div class="sl_news_clr"></div>


Получаем примерно такой вид:
<div class="sl_news">

Содержание и различные теги...

</div>
<div class="sl_news_clr"></div>


Учитывайте что при модификации файла: templates/celestial/basic.html материал будет отображаться в две колонке, во всех модулях которые используют данный шаблон. Если необходимо модифицировать отображения материала в две колонки, например только для модуля магазина потребуется модифицировать стандартный шаблон оформления: basic-shop.html и т.д. для каждого модуля. Как создать шаблон персонально для определённого модуля читайте в данной теме.


Реализация для версии Open SLAED 1.3

Открываем файл: templates/paradise/index.html
Для не стандартной темы оформления используйте свой HTML файл.

Перед </head> вставляем:
<script type="text/javascript">
$(document).ready(function() {
$("div.sl_news").addClass("alt");
$("div.sl_news_clr:even").addClass("alt");
});
</script>


Открываем файл: templates/paradise/css/theme.css
Для не стандартной темы оформления используйте свой CSS файл.

В нижней части вставляем:
/* Материал в две колонки */
.sl_news.alt {
float: left;
width: 50%; /* Данное значение подбирается индивидуально */
}
.sl_news_clr {
height: 0;
clear: both;
}
.sl_news_clr.alt {
clear: none;
}


Открываем файл: templates/paradise/basic.html
Для не стандартной темы оформления используйте свой HTML файл.

В начале кода указываем:
<div class="sl_news">


В конце кода указываем:
</div>
<div class="sl_news_clr"></div>


Получаем примерно такой вид:
<div class="sl_news">

Содержание и различные теги...

</div>
<div class="sl_news_clr"></div>


Учитывайте что при модификации файла: templates/paradise/basic.html материал будет отображаться в две колонке, во всех модулях которые используют данный шаблон. Если необходимо модифицировать отображения материала в две колонки, например только для модуля файлов потребуется создать шаблон оформления: basic-files.html скопировав содержания из basic.html и т.д. для каждого модуля. Как создать шаблон персонально для определённого модуля читайте в данной теме.

Реализация для всех более ранних версий SLAED

Для пользователей более ранних версий системы метод подключения практически не меняется, единственное что потребуется, это подключение библиотеки jQuery.

Для этого в файле index.html вашей темы оформления, перед </head> укажите следующий код:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>


Как вариант, вы можете загрузить актуальную версию jQuery в директорию вашего сайта и указать ссылку на него.

О сколько нам открытий чудных,
Готовит просвещенья дух,
И опыт, сын ошибок трудных,
И гений, парадоксов друг...
3.24

3.24
2
09.01.2013 20:21:55
Спасибо за ценную информацию!
5

5
3
18.02.2016 07:38:21
А как сделать ,чтобы в 1 колонке отображались новости а во 2 статьи?


Версия системы: SLAED CMS 5.* Pro
3.89

3.89
4
18.02.2016 17:23:58
Aquamarine, как блок на главной или вообще?

О сколько нам открытий чудных,
Готовит просвещенья дух,
И опыт, сын ошибок трудных,
И гений, парадоксов друг...
3.24

3.24
5
20.02.2016 10:13:49

Aquamarine, как блок на главной или вообще?



Вообще.
Чтобы в одной колонке отображались новости в другой статьи.
3.89

3.89
6
20.02.2016 12:11:51
Aquamarine, в таком случае обычным блоком не обойтись. Потребуется модифицировать существующий модуль новостей или написать новый, для отображения новостей и статей. Получается два модуля в одном которые будут работать с разными таблицами базы, а именно с таблицей новостей и статей одновременно.

О сколько нам открытий чудных,
Готовит просвещенья дух,
И опыт, сын ошибок трудных,
И гений, парадоксов друг...
3.24

3.24
Открыть Ответить
Хотите опробовать SLAED CMS в действии?

Технологии

PHP MySQL HTML 5 CSS 3 jQuery jQuery UI

Контакты

  • D-49179, Deutschland
    Ostercappeln, Im Siek 6
  • +49 176 61966679

  • https://slaed.net
Идеи и предложения
Обратная связь