jQuery简单的3D立体分页插件

CSS3 3D立体分页插件是一款简单的jQuery分页插件，这款分页插件不仅可以设置无限页码，而且分页控件的外观也非常漂亮，呈3D立体的效果。/* * * * * * * * * * * * * * * * * * Pagination * javascript page navigation * * * * * * * * * * * * * * * * */var Pagination = { code: '', // -------------------- // Utility // -------------------- // converting initialize data Extend: function(data) { data = data || {}; Pagination.size = data.size || 300; Pagination.page = data.page || 1; Pagination.step = data.step || 3; }, // add pages by number (from [s] to [f]) Add: function(s, f) { for (var i = s; i < f; i++) { Pagination.code += '' + i + ''; } }, // add last page with separator Last: function() { Pagination.code += '...' + Pagination.size + ''; }, // add first page with separator First: function() { Pagination.code += '1...'; }, // -------------------- // Handlers // -------------------- // change page Click: function() { Pagination.page = +this.innerHTML; Pagination.Start(); }, // previous page Prev: function() { Pagination.page--; if (Pagination.page < 1) { Pagination.page = 1; } Pagination.Start(); }, // next page Next: function() { Pagination.page++; if (Pagination.page > Pagination.size) { Pagination.page = Pagination.size; } Pagination.Start(); }, // -------------------- // Script // -------------------- // binding pages Bind: function() { var a = Pagination.e.getElementsByTagName('a'); for (var i = 0; i < a.length; i++) { if (+a[i].innerHTML === Pagination.page) a[i].className = 'current'; a[i].addEventListener('click', Pagination.Click, false); } }, // write pagination Finish: function() { Pagination.e.innerHTML = Pagination.code; Pagination.code = ''; Pagination.Bind(); }, // find pagination type Start: function() { if (Pagination.size < Pagination.step * 2 + 6) { Pagination.Add(1, Pagination.size + 1); } else if (Pagination.page < Pagination.step * 2 + 1) { Pagination.Add(1, Pagination.step * 2 + 4); Pagination.Last(); } else if (Pagination.page > Pagination.size - Pagination.step * 2) { Pagination.First(); Pagination.Add(Pagination.size - Pagination.step * 2 - 2, Pagination.size + 1); } else { Pagination.First(); Pagination.Add(Pagination.page - Pagination.step, Pagination.page + Pagination.step + 1); Pagination.Last(); } Pagination.Finish(); }, // -------------------- // Initialization // -------------------- // binding buttons Buttons: function(e) { var nav = e.getElementsByTagName('a'); nav[0].addEventListener('click', Pagination.Prev, false); nav[1].addEventListener('click', Pagination.Next, false); }, // skeleton Create: function(e) { var html = [ '◄', // previous button '', // pagination container '►' // next button ]; e.innerHTML = html.join(''); Pagination.e = e.getElementsByTagName('span')[0]; Pagination.Buttons(e); }, // init Init: function(e, data) { Pagination.Extend(data); Pagination.Create(e); Pagination.Start(); }};/* * * * * * * * * * * * * * * * ** Initialization* * * * * * * * * * * * * * * * */var init = function() { Pagination.Init(document.getElementById('pagination'), { size: 30, // pages size page: 1, // selected page step: 3 // pages before and after current });};document.addEventListener('DOMContentLoaded', init, false);

在线演示        积分下载        6毛下载        砍两刀下载