Участник:Artem Korzhimanov/easypaginate.js

Материал из Викиновостей, свободного источника новостей

Замечание: Возможно, после публикации вам придётся очистить кэш своего браузера, чтобы увидеть изменения.

  • Firefox / Safari: Удерживая клавишу Shift, нажмите на панели инструментов Обновить либо нажмите Ctrl+F5 или Ctrl+R (⌘+R на Mac)
  • Google Chrome: Нажмите Ctrl+Shift+R (⌘+Shift+R на Mac)
  • Internet Explorer / Edge: Удерживая Ctrl, нажмите Обновить либо нажмите Ctrl+F5
  • Opera: Нажмите Ctrl+F5.
/*
 * 	Easy Paginate 1.0 - jQuery plugin
 *	written by Alen Grakalic	
 *	http://cssglobe.com/
 *
 *	Copyright (c) 2011 Alen Grakalic (http://cssglobe.com)
 *	Dual licensed under the MIT (MIT-LICENSE.txt)
 *	and GPL (GPL-LICENSE.txt) licenses.
 *
 *	Built for jQuery library
 *	http://jquery.com
 *
 */
 
(function($) {

	$.fn.easyPaginate = function(options){

		var defaults = {
			pause:4000,
			controls: 'pagination',
			current: 'current',
		}; 

		var options = $.extend(defaults, options);
		var children = $(this).children();
		var obj;
		var pages = children.length;
		var page = 1;
		var timeout;
		var clicked = false;

		function show(){
			clearTimeout(timeout);
			$(children).each(function(i){
				var child = $(this);
				child.hide();
				if(i==page-1){ child.fadeIn('slow'); }
			});
			$('li','#'+ options.controls).removeClass(options.current);
			$('li[data-index="'+page+'"]','#'+ options.controls).addClass(options.current);
 
			timeout = setTimeout(auto,options.pause);
		};

		function auto(){
			if(page >= pages){ page=0; show(); }
			if(page < pages){ page++; show(); }
		};

		this.each(function(){

			obj = this;

			if(pages>1){

				var ol = $('<ol id="'+ options.controls +'"></ol>').insertBefore(obj);

				for(var i=1;i<=pages;i++){
					$('<li data-index="'+ i +'">'+ i +'</li>')
					.appendTo(ol)
					.click(function(){
						clicked = true;
						page = $(this).attr('data-index');
						show();
					});
				};

				show();
			};
		});
	};

})(jQuery);

jQuery(function($){
	$('ul#items').easyPaginate({
	});

});