Check out the Latest Articles:
Постраничный вывод текста на JQuery

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

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

Идея:

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

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

Реализация:

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

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

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

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


<div id=pagewrap><!--Контейнер контейнера (объектив)-->

<div id=page> <!--Здесь полный текст, который нужно вывести постранично --> </div>

</div>

<div id=pages><!--Блок, в который мы добавим ссылки-переключатели страниц--></div>

Теперь Javascript:


$(document).ready(function(){

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


$('#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;
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 876px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">[/soursecode]</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 876px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">[sourcecode language="javascript"]</div>
[/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"]

});

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


function showPage(i)

{

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

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

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

curPage=i;

}

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

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


var pageHeight=200;

var totalPages=0;

var curPage=0;

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

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

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


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

var pageHeight=0;

var z=0;

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

if(i>lastElem &amp;amp;&amp;amp; i<elemCount)

{

while(pageHeight<200)

{

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

z++;

}

alert(pageHeight+' '+z);

curCount=z;

lastElem+=curCount;

return false;

}

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

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

  1. Постраничный вывод текста на JQuery и PHP Итак… Задача таже, что и в прошлой статье, но теперь...
  2. Когда mod_rewrite бессилен Сегодня все привыкли к приянтному на глаз формату URL (человеко...
  3. Почитать: Кнопки на CSS Новая отличная статья от креативного агентства «chili» по CSS. Кнопки...


This website uses IntenseDebate comments, but they are not currently loaded because either your browser doesn't support JavaScript, or they didn't load fast enough.


  1. Miillanna on Четверг 16, 2009

    Действительно удивили и порадовали :) Никогда не поверил бы, что даже такое бывает :)

  2. Постраничный вывод текста на JQuery и PHP | Блог арт-директора

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


You must be logged in to post a comment.