Содержание страницы размещается в контейнере <div id="content"> в элементах p. А jQuery будет формировать навигацию в специальном контейнере <div id="pagingControls"></div>.1 <div id="content"> 2 <p>Текст содержания.</p> 3 . . . 4 </div> 5 <div id="pagingControls"></div>
JavaScript
В HTML файл помещается код инициализации и запуска скрипта для формирования навигации:1 script type="text/javascript"> 2 var pager = new Imtech.Pager(); 3 $(document).ready(function() { 4 pager.paragraphsPerPage = 5; // Устанавливаем количество элементов на странице 5 pager.pagingContainer = $('#content'); // Устанавливаем основной контейнер 6 pager.paragraphs = $('p', pager.pagingContainer); // Подсчитываемые элементы 7 pager.showPage(1); // Начинаем просмотр с первой страницы 8 }); 9 </script>
А сам скрипт располагается в отдельном файле:
01 var Imtech = {};
02 Imtech.Pager = function() { 03 04 // Парметры по умолчанию 05 this.paragraphsPerPage = 3; // Количество элементов на странице 06 this.currentPage = 1; // Страница, которая открыается при инициализации 07 this.pagingControlsContainer = "#pagingControls"; // Контейнер для навигации 08 this.pagingContainerPath = "#content"; // Контейнер c содержанием 09 10 // Подсчет общего количества страниц 11 this.numPages = function() { 12 var numPages = 0; 13 if (this.paragraphs != null && this.paragraphsPerPage != null) { 14 numPages = Math.ceil(this.paragraphs.length / this.paragraphsPerPage); 15 } 16 17 return numPages; 18 }; 19 20 // Выводим страницу. 21 // Аргументы: 22 // page - номер страницы, которую нужно вывести 23 this.showPage = function(page) { 24 this.currentPage = page; 25 var html = ""; 26 // Формируем содержание текущей страницы 27 for (var i = (page-1)*this.paragraphsPerPage; i < ((page-1)*this.paragraphsPerPage) + this.paragraphsPerPage; i++) { 28 if (i < this.paragraphs.length) { 29 var elem = this.paragraphs.get(i); 30 html += "<" + elem.tagName + ">" + elem.innerHTML + "</" + elem.tagName + ">"; 31 } 32 } 33 34 // Включаем сформированное содержание в структуру DOM 35 $(this.pagingContainerPath).html(html); 36 37 // Обновляем навигацию 38 renderControls(this.pagingControlsContainer, this.currentPage, this.numPages()); 39 } 40 41 // Обновляем навигацю. 42 // Аргументы: 43 // container - контейнер для содержания текущей страницы; 44 // currentPage - номер текущей страницы; 45 // numPages - общее колчисетво страниц. 46 var renderControls = function(container, currentPage, numPages) { 47 // Формируем разметку навигации 48 var pagingControls = "Страница: <ul>"; 49 for (var i = 1; i <= numPages; i++) { 50 if (i != currentPage) { 51 pagingControls += "<li><a href='#' onclick='pager.showPage(" + i + "); return false;'>" + i + "</a></li>"; 52 } else { 53 pagingControls += "<li>" + i + "</li>"; 54 } 55 } 56 57 pagingControls += "</ul>"; 58 59 // Вставляем разметку навигации в DOM 60 $(container).html(pagingControls); 61 } 62 }
CSS
Внешний вид навигации легко изменить с помощью свойств CSS. В нашей демонстрации используются следующие правила:01 .example{ 02 background:#FFF; 03 color: black; 04 width:800px; 05 font-size:80%; 06 border:1px #000 solid; 07 margin:0.5em 10% 0.5em;padding:1em 2em 2em; 08 -moz-border-radius:3px; 09 -webkit-border-radius:3px 10 } 11 12 #content p{ 13 text-indent:20px; 14 text-align:justify 15 } 16 17 #pagingControls{ 18 margin: 1em; 19 } 20 21 #pagingControls ul{ 22 display:inline; 23 padding-left:0.5em; 24 } 25 26 #pagingControls li{ 27 display:inline; 28 padding:0 0.5em 29 }
Заключение
Несколько строк JavaScript кода позволяют существенно изменить концепцию размещения информации на страницах сайта.