|
Как сделать новости в несколько колонок?
|
|
| [1] likbezz [18.02.2011, 03:07] |
|
По мотивам вопроса с форума uCoz: (18-Фев-2011, 01:53:42 | Сообщение # 269) Quote (bojoklv) Подскажите пожалуйста, как сделать так чтобы например на странице с новостями, новости на главной странице отображались не по одной в ряд, а по две или три в ряд. Раньше пробовала так делать но подзабыла sad Заранее спасибо за помощь. |
|
| [2] likbezz [18.02.2011, 03:37] |
Самый простой вариант - через информер, у информеров есть функция колонок.
...
* * * * *
Вариант посложнее - при помощи скрипта:
Идём в ПУ » Редактор страниц » Страницы сайта ... или в тот шаблон, в котором думаем это организовать ...
И заменяем: стандартный оператор $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 создаваемой скриптом таблицы.
...
...
* * * * *
Вариант с зафлоченными дивами:
Вид материалов:
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 (две) ....
...
Результат, как впрочем, и следовало ожидать, точно такой же , как и в предыдущих примерах. ...
....
Прочее:
Желательно, чтобы число материалов на странице было кратным количеству колонок ... ヅ ...
Что бы не было вот такого:
...
Понятно, о чём я? ... ヅ ...
...
☑ Пример ...
...
На данный момент идеи на тему иссякли, а вам - удачи ... ヅ ...
...
|
|
| [3] Oldfox-1 [29.03.2012, 15:40] |
|
При использовании последнего способа необходимо следить за тем, чтобы все новости умещались на одной странице. Я попытался им воспользоваться, и у меня на первой странице новости разбились по колонкам, а на второй - остались, как были - в одну колонку (хотя, может, я где-то что-то пропустил). |
|
| [4] likbezz [29.03.2012, 19:01] |
Oldfox-1, Quote (Oldfox-1) При использовании последнего способа необходимо следить за тем, чтобы все новости умещались на одной странице. Я попытался им воспользоваться, и у меня на первой странице новости разбились по колонкам, а на второй - остались, как были - в одну колонку (хотя, может, я где-то что-то пропустил).
Отключите аякс для переключателей страниц, это общих настройках, и всё будет нормально.
... |
|
| [5] Skysly [18.04.2013, 13:57] |
Вариант с зафлоченными дивами подошел наиболее, но что бы исправить проблему с "переездом" $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; подгонять по необходимости.
Автору благодарность! |
|
