Постраничный вывод текста на JQuery
Столкнулись с такой задачей: дизайн сайта ограничивает количество текста в высоту (на сайте текст выводится на листики А4, которые по задумке должны иметь настоящие пропорции, так что «растягивать» их в высоту нельзя.
Делать постраничный вывод текст на PHP — накладно из-за и без того сложной структуры URL. Решили делать на Javascript.
Идея:
- Определить максимально допустимую высоту блока (без растяжения по высоте)
- Разбить высоту блока с текстом на подблоки допустимой высоты
- Показывать необходимый подблок, остальные скрывать
Все просто. И занимает не так уж много времени в реализации.
Реализация:
Есть 2 пути реализации:
- Действительно скрывать не нужные блоки через значение display
- Сделать что-то вроде видоискателя проектора, и проходящего мимо него пленки, когда у нас есть
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"]
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; i { while(pageHeight<200) { pageHeight+=$(this).height(); z++; } alert(pageHeight+' '+z); curCount=z; lastElem+=curCount; return false; } [/sourcecode] И вот пример: Скачать
Для справки: WinHex – hex editor, а если по-русски, шестнадцатиричный редактор
онлайн игры бесплатно
