Как сделать новости в несколько колонок? - Скрипты и коды для юкоз - Форум аццкого кодера
Фильтр по:
  

Страница 1 из 11
Модератор форума: likbezz 
Скрипты и коды для юкоз - Форум аццкого кодера » Как сделать? Информация для вновь прибывших » Как сделать... » Как сделать новости в несколько колонок? (Организация вывода материала в несколько колонок. Варианты)
Как сделать новости в несколько колонок?
Дата: Пятница, 18.02.2011, 03:07 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9096
Награды: 23
Репутация: 457
Статус: Unknown


По мотивам вопроса с форума uCoz: (18-Фев-2011, 01:53:42 | Сообщение # 269)

Quote (bojoklv)
Подскажите пожалуйста, как сделать так чтобы например на странице с новостями, новости на главной странице отображались не по одной в ряд, а по две или три в ряд. Раньше пробовала так делать но подзабыла sad Заранее спасибо за помощь.


 
Дата: Пятница, 18.02.2011, 03:37 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9096
Награды: 23
Репутация: 457
Статус: Unknown


Самый простой вариант - через информер, у информеров есть функция колонок.


...
* * * * *



Вариант посложнее - при помощи скрипта:

Идём в ПУ » Редактор страниц » Страницы сайта ... или в тот шаблон, в котором думаем это организовать ...
И заменяем: стандартный оператор $CONTENT$ или $BODY$ на:
Code
<script type="text/javascript">
var k=0;
document.write('<table width="100%" border="0" cellspacing="0" cellpadding="0">');
</script>
$CONTENT$
<script type="text/javascript">
document.write('<\/table>');
</script>



...

Там же, то бишь в ПУ меняем шаблон - «вид материалов» - того же модуля, в данном случае - шаблон «Новости сайта » Вид материалов» ....
Дописываем скрипт до самого кода шаблона, и после ....
Code
<script type="text/javascript">
k++
if(k==1){document.write('<tr>');};
document.write('<td>')
</script>
<!--Start(Вид материалов)-->
              Здесь сам код шаблона .....
<!--End(Вид материалов)-->
<script type="text/javascript">
document.write('<\/td>');
if(k==2) {document.write('<\/tr>');k = 0}
</script>

Где:
if(k==2) - количество колонок. В данном случае - 2 (две).


...

Результат:


...

Дополнительная инфа:

При применении данного скрипта, переключатели страниц могут “переехать” .... ヅ ....
Для коррекции данного бага, юзаем небольшой скрипт ...
1. Добавляем к создаваемой скриптом таблице ID ...
Quote (JavaScript)
<script type="text/javascript">
var k=0;
document.write('<table id="mTableBox" width="100%" border="0" cellspacing="0" cellpadding="0">');
</script>

2. После закрывающего скрипта, вставляем наш, корректирующий:
Quote (JavaScript)
<script type="text/javascript">
document.write('<\/table>');
</script>
<script type="text/javascript">
$(function(){$('#mTableBox').after($('#pagesBlock1'));});
</script>

Где:
pagesBlock1 - ID блока с переключателями.
mTableBox - ID создаваемой скриптом таблицы.
...

...
© Первоначальный вариант данного скрипта by Бармалей

* * * * *



Вариант с зафлоченными дивами:

Вид материалов:
Code
<div style="float:left;width:50%;height:250px;overflow:hidden;">
<!--Start(Вид материалов)-->
              Здесь сам код шаблона .....
<!--End(Вид материалов)-->
</div>

Где:
<div style="float:left;width:50%;height:250px;overflow:hidden;"> - для двух колонок, то бишь - 100% / 2 == 50%, 100% / 3 == 33,3%.
height:250px; - необходимо для того чтобы блоки не “цеплялись” друг за друга.
overflow:hidden; - сокрытие не влезшего в блок контента.
...
Результат - то же самый, но, иногда, могут возникнуть проблемы - незакрытые теги и прочие ошибки вёрстки/добавления материалов ...
...
* * * * *



Вот ещё вариант ... только что приспособил ... ヅ ... (могут быть ошибки - при тестировании - не обнаружил ... ヅ )
...

Ничё, нигде править не нужно, просто добавить скрипт в необходимые шаблоны ... ПОСЛЕ оператора $BODY$, как ни странно ... ヅ ... Или НИЖЕ, после всего контента ...

Сам скрипт:
Quote
<script type="text/javascript">
function changeColumn(){
$('#allEntries').css({'width':'100%'});
var colWrap=$('#allEntries').width();
var colFixed=Math.floor(colWrap/2); /*Количество колонок*/
$('#allEntries').css({'width':colWrap});
$('#allEntries>div[id^=entry]').css({'float':'left','width':colFixed});
};
$(function(){changeColumn();});
$(window).resize(function(){changeColumn();});
</script>

Где:
var colFixed=Math.floor(colWrap/2); - количество нужных Вам клонок. В данном случае 2 (две) ....


...

Результат, как впрочем, и следовало ожидать, точно такой же , как и в предыдущих примерах. ...
....

Прочее:
Желательно, чтобы число материалов на странице было кратным количеству колонок ... ヅ ...
Что бы не было вот такого:


...

Понятно, о чём я? ... ヅ ...
...

Пример ...
...
На данный момент идеи на тему иссякли, а вам - удачи ... ヅ ...
...

Прикрепления: 9773846.png(9Kb) · 5279457.png(9Kb) · 6759989.png(26Kb) · 2351283.png(8Kb) · 0779189.png(8Kb) · 3073522.png(14Kb)

 
Дата: Четверг, 29.03.2012, 15:40 |
Oldfox-1
Рядовой
Группа: Зарегистрированные
Сообщений: 1
Награды: 0
Репутация: 0
Статус: Offline


При использовании последнего способа необходимо следить за тем, чтобы все новости умещались на одной странице. Я попытался им воспользоваться, и у меня на первой странице новости разбились по колонкам, а на второй - остались, как были - в одну колонку (хотя, может, я где-то что-то пропустил).

 
Дата: Четверг, 29.03.2012, 19:01 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9096
Награды: 23
Репутация: 457
Статус: Unknown


Oldfox-1,
Quote (Oldfox-1)
При использовании последнего способа необходимо следить за тем, чтобы все новости умещались на одной странице. Я попытался им воспользоваться, и у меня на первой странице новости разбились по колонкам, а на второй - остались, как были - в одну колонку (хотя, может, я где-то что-то пропустил).

Отключите аякс для переключателей страниц, это общих настройках, и всё будет нормально.
...


 
Дата: Четверг, 18.04.2013, 13:57 |
Skysly
Рядовой
Группа: Зарегистрированные
Сообщений: 1
Награды: 0
Репутация: 0
Статус: Offline


Вариант с зафлоченными дивами подошел наиболее, но что бы исправить проблему с "переездом" $PAGE_SELECTOR1$ нужно было добавить в страницы модуля:
<tr><td align="center" style="white-space: nowrap;">
<?if($PAGE_SELECTOR$)?><div style="text-align:center;">$PAGE_SELECTOR1$</div><?endif?>
</td></tr>

Ну и естественно height:250px; подгонять по необходимости.

Автору благодарность!


 
Скрипты и коды для юкоз - Форум аццкого кодера » Как сделать? Информация для вновь прибывших » Как сделать... » Как сделать новости в несколько колонок? (Организация вывода материала в несколько колонок. Варианты)
Страница 1 из 11
Поиск: