Постраничная навигация для содержания с использованием jQuery

В данном уроке мы сделаем генератор постраничной навигации, который будет разделять содержание на основе заданной высоты элемента. Также, при переключении страниц будет использоваться визуальный эффект затухания.

 

Разметка HTML

В разметке должны содержаться элементы, которые станут основой навигации:

<!DOCTYPE html>
<html lang="ru" >
	<head>
		<meta charset="utf-8" />
		<title>Постраничная навигация на jQuery | Материалы сайта RUSELLER.COM</title>
		
		<link rel="stylesheet" href="/css/main.css" type="text/css" />
		<script src="/js/jquery.min.js"></script>
		<script src="/js/main.js"></script>
	</head>
 <body>
	<div class="example">
		<h2>Заголовок</h2>
		<div id="content" class="content">
			. . . Содержание . . .
		</div>
		<hr />
		<div class="pagination">
			<ul>
				<li><a href="#" id="prev" class="prevnext">« Туда</a></li>
				<li><a href="#" id="next" class="prevnext">Сюда »</a></li>
			</ul>
			<br />
			<div id="page_number" class="page_number">1</div>
		</div>
	</div>
</body>
</html>

 

CSS

body{background:#eee;margin:0;padding:0}
.example{background:#FFF;width:800px;border:1px #000 solid;margin:20px auto;padding:15px;-moz-border-radius: 3px;-webkit-border-radius: 3px}

#content {
    position:relative;
    height:400px;
}
#content .page {
    position:absolute;
    top:0px;
}
.pagination{
    padding: 2px;
}
.pagination ul{
    margin: 0;
    padding: 0;
    text-align: left;
    font-size: 16px;
}
.pagination li{
    list-style-type: none;
    display: inline;
    padding-bottom: 1px;
}
.pagination a, .pagination a:visited{
    padding: 0 5px;
    border: 1px solid #9aafe5;
    text-decoration: none;
    color: #2e6ab1;
}
.pagination a:hover, .pagination a:active{
    border: 1px solid #2b66a5;
    color: #000;
    background-color: #FFFF80;
}
.pagination a.prevnext{
    font-weight: bold;
}
.page_number {
    border: 1px solid #9aafe5;
    color: #2e6ab1;
    padding:5px;
    text-align: center;
    width: 20px;
}


 

jQuery

Код представляет собой пример построения плагина для jQuery. При инициализации плагин принимает два параметра - высоту страницы и время переключения между страницами.

(function($){
    $.fn.extend({ 
        MyPagination: function(options) {
            var defaults = {
                height: 400,
                fadeSpeed: 400
            };
            var options = $.extend(defaults, options);

            // Создаем ссылку на объект
            var objContent = $(this);

            // Внутренние переменные
            var fullPages = new Array();
            var subPages = new Array();
            var height = 0;
            var lastPage = 1;
            var paginatePages;

            // Функция инициализации
            init = function() {
                objContent.children().each(function(i){
                    if (height + this.clientHeight > options.height) {
                        fullPages.push(subPages);
                        subPages = new Array();
                        height = 0;
                    }

                    height += this.clientHeight;
                    subPages.push(this);
                });

                if (height > 0) {
                    fullPages.push(subPages);
                }

                // Оборачиваем каждую полную страницу
                $(fullPages).wrap("<div class='page'></div>");

                // Скрываем все обернутые страницы
                objContent.children().hide();

                // Создаем коллекцию для навигации
                paginatePages = objContent.children();

                // Показываем первую страницу
                showPage(lastPage);

                // Выводим элементы управления
                showPagination($(paginatePages).length);
            };

            // Функция обновления счетчика
            updateCounter = function(i) {
                $('#page_number').html(i);
            };

            // Функция вывода страницы
            showPage = function(page) {
                i = page - 1; 
                if (paginatePages[i]) {

                    // Скрываем старую страницу, показываем новую
                    $(paginatePages[lastPage]).fadeOut(options.fadeSpeed);
                    lastPage = i;
                    $(paginatePages[lastPage]).fadeIn(options.fadeSpeed);

                    // и обновлем счетчик
                    updateCounter(page);
                }
            };

            // Функция вывода навигации (выводим номера страниц)
            showPagination = function(numPages) {
                var pagins = '';
                for (var i = 1; i <= numPages; i++) {
                    pagins += '<li><a href="#" onclick="showPage(' + i + '); return false;">' + i + '</a></li>';
                }
                $('.pagination li:first-child').after(pagins);
            };

            // Выполняем инициализацию
            init();

            // Привязываем два события - нажатие на кнопке "Предыдущая страница"
            $('.pagination #prev').click(function() {
                showPage(lastPage);
            });
            // и "Следующая страница"
            $('.pagination #next').click(function() {
                showPage(lastPage+2);
            });

        }
    });
})(jQuery);

// Инициализация при загрузке страницы
jQuery(window).load(function() {
    $('#content').MyPagination({height: 400, fadeSpeed: 400});
});

Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/U6ahUV1hvSw/lessons.php

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

Постраничная навигация для содержания с использованием jQuery | | 2012-07-01 15:01:25 | | Статьи Web-мастеру | | В данном уроке мы сделаем генератор постраничной навигации, который будет разделять содержание на основе заданной высоты элемента. Также, при переключении страниц будет использоваться визуальный | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: