Блог арт-директора

Итак… Задача таже, что и в прошлой статье, но теперь подключим возможности PHP.

Мы все так же не можем переключать страницы при помощи PHP, и нам нужно как-то обрабатывать их на сервере.

Реализация снова очень проста. Определяем сколько символов нам нужно выводить на странице, и разбиваем весь текст на подблоки при помощи PHP-функции «умной» разбивки wordwrap (умной, потому, что она может разбивать не посреди слова, а после конца слова).

Итак:

<?php

//$text - здесь лежит весь текст

if(strlen($text)>2000) //проверяем, нужно ли разбивать

{

//нужно

$text2='<ul id="pages2"><li class="chili">';

$text2.=wordwrap($text, 2000, '</li><li class="split">',false);

$text2.="</ul>";

$text=$text2;

}
echo $text;

?>

Поясню. Если текст нужно разбивать (в нем больше, чем определенное количество символов), то обрамляем текст тэгами <ul> и разбиваем текст на элементы списка.

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

$(document).ready(function(){

$('#pageWrap').css('overflow','hidden').css('position','relative');

$('#pages2').css('width',$('#pages2').children().size()*700).css('position','absolute');

$('#pages2 li.chili').css('float','left').css('width','700px').css('list-style','none').css('margin','0px');

var pagecount=$('#pages2').children().size();

var text='';

for (i=0;i<pagecount;i++)

{

if(i==0)cp='curPage';else cp='';

var a="<a class='pagination "+cp+"' id='"+i+"_page' href='javascript: void(0)' onclick='showPage("+i+");'>"+(i+1)+"</a>";

text+=a;

}

if(pagecount<2)$('#pages').css('display','none');

$('#pages').append(text);

});

Не забудем про функцию «перелистывания страниц»:

function showPage(i)

{

$('#pages2').css('left',-i*700);

$('.pagination').removeClass('curPage');

$('#'+i+'_page').addClass('curPage');

}

Верстка в этом варианте такая:

<div id='pageWrap'>

<ul id='pages2'>

<!--Генерируется на PHP-->

</ul>

</div>

<div id='pages'></div>

Все работает. Для работы нужен JQuery.

Торговые стратегии форекс на основе индикатора опционных уровней

Также по теме:

1. Постраничный вывод текста на JQuery Столкнулись с такой задачей: дизайн сайта ограничивает количество текста в...
2. Почитать: Кнопки на CSS Новая отличная статья от креативного агентства «chili» по CSS. Кнопки...