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

Постраничный вывод текста на JQuery

Столкнулись с такой задачей: дизайн сайта ограничивает количество текста в высоту (на сайте текст выводится на листики А4, которые по задумке должны иметь настоящие пропорции, так что «растягивать» их в высоту нельзя.

Делать постраничный вывод текст на PHP — накладно из-за и без того сложной структуры URL. Решили делать на Javascript.

Идея:

  • Определить максимально допустимую высоту блока (без растяжения по высоте)
  • Разбить высоту блока с текстом на подблоки допустимой высоты
  • Показывать необходимый подблок, остальные скрывать

Все просто. И занимает не так уж много времени в реализации.

Реализация:

Есть 2 пути реализации:

  1. Действительно скрывать не нужные блоки через значение display
  2. Сделать что-то вроде видоискателя проектора, и проходящего мимо него пленки, когда у нас есть2-й вариант отображения блока 2 блока: контайнер текста и контейнер контейнера. Мы просто сдвигаем контейнер текста внутри контейнера контейнера, тем самым обнажая нужную часть блока.

Мы выбрали второй способ (он быстрее выполняется на клиенте, а значит больше нам подходит).

Итак, у нас должен быть такой html:

[sourcecode language="html"]

[/sourcecode]

Теперь Javascript:

[sourcecode language="javascript"]

$(document).ready(function(){

[/sourcecode]

…говорим, чтоб выполнилось сразу после полной загрузки страницы…

[sourcecode language="javascript"]

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

$(‘#pager’).css(‘position’,'absolute’).css(‘left’,’0px’).css(‘top’,’0px’);

[/soursecode]

…устанавливаем css для контейнера с текстом и объектива…

Объектив должен скрывать все, что вылазит за края (overflow: hidden), а контейнер текста должаен быть абсолютно позиционирован, чтобы «ползать» по всему объективу.

[sourcecode language="javascript"]

var pages=$(‘#pager’).height()/pageHeight;

totalPages=pages;

[/soursecode]
[sourcecode language="javascript"]

[/soursecode]

…считаем количество страниц…

[sourcecode language="javascript"]

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

{

var a=document.createElement('a');

a.href='#';

if(i==0) a.className='curPage ';

a.onclick=function()

{

showPage(this.id.replace('_page',''));

}

a.id=i+'_page';

a.innerHTML=i+1;

a.className+=' pagination';

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

}

[/soursecode]

...создаем ссылки на страницы...

[sourcecode language="javascript"]

});

[/sourcecode]

Так. Осталась только функция showPage(i), которая смещает контейнер текста относительно объектива.

[sourcecode language="javascript"]

function showPage(i)

{

$('#pager').css('top',-i*pageHeight);

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

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

curPage=i;

}

[/sourcecode]

Здесь мы просто умножаем максимально допустимую высоту контейнера текста на номер страницы i и смещаем контейнер текста вверх на получившееся количество пикселов.

Да. чтоб все работало мы еще использовали вот эти глобальные переменные:

[sourcecode language="javascript"]

var pageHeight=200;

var totalPages=0;

var curPage=0;

[/sourcecode]

В конце поста можно скачать полный пример.

Решение, конечно, не доработанное, так-как некоторые строчки выводятся половинками (половина на 1-й страница, половина — на 2-й), но это можно решить внедрив систему подсчета высоты контейнера и переноса строки на следующую страницу.

Подсчет высоты котейнера, например:

[sourcecode language="javascript"]

$('#pager').children().each(function(i){

var pageHeight=0;

var z=0;

//Считаем высоту контейнеров

if(i>lastElem &amp;amp;amp;amp;amp;amp;amp;&amp;amp;amp;amp;amp;amp;amp; i

{

while(pageHeight<200)

{

pageHeight+=$(this).height();

z++;

}

alert(pageHeight+' '+z);

curCount=z;

lastElem+=curCount;

return false;

}

[/sourcecode]

И вот пример: Скачать

Для справки: WinHex – hex editor, а если по-русски, шестнадцатиричный редактор
онлайн игры бесплатно

207286