Page Panel

Панель навигации страниц

by Alexey Demin

HTML

<div id="box">
    <div id="page_panel1"></div>
    <div class="clear"></div>   
    <div id="page_panel2"></div>
    <div class="clear"></div>   
    <div id="page_panel3"></div>
</div>

CSS

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    background: linear-gradient(to top, #ddd, #eee);
    height: 100%;
}

.page_panel {
    max-height: 40;
    background: #bbb;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.7), 0 1px 2px white;
    position: relative;
    z-index: 1;
    padding: 7px;
    margin: 0 auto;
    border-radius: 5px;
    float: left;
}
.page_panel ul{
    float: left;
}
.page_panel:before,
.page_panel:after {
    content: '';
    display: table;
}

.page_panel:after {
    clear: both;
}

.page_panel li, .page_panel span {
    float: left;
    position: relative;
    margin-right: 7px;
    text-decoration: none;

    height: 26px;
    width: 26px;

    color: #232323;
    font: 11px/26px "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-align: center;
    text-shadow: 1px 1px 1px white;
    list-style: none;
    cursor: pointer;
}

.page_panel li:before, .page_panel span:before {
    pointer-events: none;
    content: '';
    position: absolute;
    z-index: -1;
    height: 200%;
    width: 100%;
    border-radius: 3px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.25));
    transition: all 0.2s ease;
    left: 0;
    top: 0;
}

.page_panel li:after, .page_panel span:after {
    z-index: -1;
    position: absolute;
    content: '';
    height: 100%;
    width: 100%;
    background-color: #fafafa;
    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.15), transparent);
    border-radius: 3px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), inset 0 2px 2px white;
    left: 0;
    right: 0;
    top: 0;
    transition: all 0.2s ease;
}

.page_panel li:last-child, span.last {
    margin: 0;
}
span.next{margin-left: 7px;}

.page_panel li:hover::before, .page_panel span:hover::before {
    height: 220%;
}

.page_panel li:hover::after, .page_panel span:hover::after {
    background-color: #fff;
}

.page_panel li.active::before{
   ...

JavaScript

/**
 * Created by Fedor Vlasenko [email protected]
 */
window.onload = function () {
	Panel(
			{
				inrow: 5, // количество в ряду
				items: 3, // всего элементов
				step: 3, // шаг перелистывания
				current: 2, // текущая позиция
				callback: clickPanel1, //функция обратного вызова
				element: document.getElementById("page_panel1"), // элемент панели
				/* Также можно задать значения */
				prev_txt: '<',
				next_txt: '>',
				last_txt: '>>',
				first_txt: '<<'
			}
	);

	Panel(
			{
				inrow: 6,
				items: 28,
				step: 3,
				current: 14,
				callback: clickPanel2,
				element: document.getElementById('page_panel2')
			}
	);
	Panel(
			{
				inrow: 8,
				items: 72,
				current: 1,
				callback: clickPanel3,
				element: document.getElementById('page_panel3')
			}
	);
};

function clickPanel1(page) {
	alert('clickPanel1, Page: ' +page);
}
function clickPanel2(page) {
	alert('clickPanel2, Page: ' +page);
}
function clickPanel3(page) {
	alert('clickPanel3, Page: ' +page);
}

(function () {
	function Panel(params) {
		if (!(this instanceof Panel)) {
			return new Panel(params);
		}
		this.initialize.apply(this, arguments);
	}

	Panel.prototype.initialize = function (arg) {
		var fragment = document.createDocumentFragment();
        var first = document.createElement('span');        
        var ul = document.createElement('ul');
        var li = document.createElement('li');
		var last = first.cloneNode();
		var prev = first.cloneNode();
		var next = first.cloneNode();
        var callback = arg.callback;
		var element = arg.element;
        var ins_li, end;
		
		first.className = 'first';
		last.className = 'last';
		prev.className = 'prev';
		next.className = 'next';
		arg.step = arg.step || 1;
		arg.inrow = arg.inrow || 5;
		arg.items = arg.items || 25;
		arg.current = arg.current || 1;
		arg.prev_txt = arg.prev_txt || '<';
		arg.next_txt = arg.next_txt || '>';
		arg.last_txt = arg.last_txt || '>>';
		arg.first_txt = arg.first_txt || '<<';
     ...