Создание постраничной навигации

Однажды, передо мной стала задача - разработки "перелистывателя страниц". Подойдя к проблемее несколько оригинально, я создал универсальный, легко встраиваемый "пейдженатор". Путем изменения всего нескольких строк - Вы сможете быстро достичь желаемого результата - получить на своей странице элегантный постраницный навигатор. Особенностью является работа полностью на сороне клиента, поэтому скорость зависит только от мощности компьютера пользователя.(блоки для изменения отмечены комментариями) var pagenator_col=10;//количество элементов вывода var name_pagenator='ul_pages';//Место где будет пейдженатор <ul id='ul_pages'></ul> var name_list='paganator';//Место, куда выедены элементы, В данном случае элементы должны быть дивами var length_list; var length_steps; var buff_content=new Array(); content=document.getElementById('paganator'); var j=0; for (var i=0;i<content.childNodes.length;i++) { if (content.childNodes[i].tagName=='DIV') { j++; buff_content[j]=content.childNodes[i]; content.childNodes[i].setAttribute('style', 'display: none'); } } length_list=j; if (parseInt(length_list)>parseInt(pagenator_col)) { length_steps=parseFloat(length_list/pagenator_col); buf_length_steps=length_steps; length_steps=length_steps.toFixed(0); if (length_steps<buf_length_steps) { length_steps++; } write_pagenator(1); } some_block(1); function some_block(begin) { content=document.getElementById('paganator'); for (var i=0;i<content.childNodes.length;i++) { if (content.childNodes[i].tagName=='DIV')//Случай, если элементы не DIV { content.childNodes[i].setAttribute('style', 'display: none'); } } end=parseInt(begin)+parseInt(pagenator_col)-1; if (parseInt(end)>parseInt(length_list)) { end=length_list; } for (i=parseInt(begin); i<=end; i++) { buff_content[i].setAttribute('style', 'display: block'); } } function write_pagenator(now_step) { var res=''; if (now_step!='1') res="<li class='li_pages' style='margin-left:3px'><a onClick='pagenator(1,this);return false;' href='#'> << first</a></li><li class='li_pages' style='margin-left:3px'><a onClick='pagenator(2,this);return false;' href='#'> < previous</a></li>"; for (i=1; i<=length_steps; i++) { if (i==now_step) res=res+"<li class='li_pages' id='changed' style='margin-left:3px'><a onClick='return false;' href='#'>"+i+"</a></li>"; else res=res+"<li class='li_pages' style='margin-left:3px'><a onClick='pagenator(0,this);return false;' href='#'>"+i+"</a></li>"; } if (now_step!=length_steps) { res=res+"<li class='li_pages'><a href='#' onClick='pagenator(3,this);return false;'>next > </a></li><li class='li_pages'><a href='#' onClick='pagenator(4,this);return false;'>last >> </a></li>"; } document.getElementById(name_pagenator).innerHTML=res; } function pagenator(id,obj) { switch (id) { case 0: now_number=parseInt(obj.innerHTML); step_now=(parseInt(now_number)-1)*pagenator_col+1; some_block(step_now); write_pagenator(now_number); break; case 1: some_block(1); write_pagenator(1); break; case 2: now_number=parseInt(document.getElementById('changed').getElementsByTagName('a')[0].innerHTML); now_number--; step_now=(parseInt(now_number)-1)*pagenator_col+1; some_block(step_now); write_pagenator(now_number); break; case 3: now_number=parseInt(document.getElementById('changed').getElementsByTagName('a')[0].innerHTML); now_number++; step_now=(parseInt(now_number)-1)*pagenator_col+1; some_block(step_now); write_pagenator(now_number); break; case 4: step_now=(parseInt(length_steps)-1)*pagenator_col+1; some_block(step_now); write_pagenator(length_steps); break; } Scroll.to(window,{'x':500,'y':300},2000); }