главная

Теги:


Плагин LiveFilter - фильтрация списков и таблиц

В данном уроке мы рассмотрим плагин liveFilter для сортировки списка или таблицы. При удалении или выводе элементов на экран используется анимация.

Как использовать

Для начала нужно скачать архив плагина со страницы разработчика и распаковать его в директорию на вашем сайте. Доступны две версии - минимизированная (Production version) и для разработчиков (Development version). В версии для разработчиков текст плагина представлен в структурированном виде с комментариями, что удобно для того, чтобы разобраться в принципе работы (в исходниках к уроку содержится версия плагина для разработчиков с переведенными комментариями).

Затем в секцию <head> страницы, на которой планируется использовать фильтрацию, нужно вставить код подключения плагина:




Нужно заменить “/путь_к_плагину/” на путь, где расположен плагин liveFilter, который вы распаковали ранее. Также нужно заменить “элемент_для_фильтрации” селектором CSS, который соответствует нужному элементу.

Параметр плагина 'опция' управляет использованием анимации при скрытии и выводе элементов во время фильтрации. Доступны следующие значения: basic - элементы просто отключаются/включаются без какой-либо анимации, slide - фильтруемые элементы будут сворачиваться/разворачиваться, fade - фильтруемые элементы будут постепенно включаться/выключаться.

Например:

$(ul#filter_me').liveFilter('slide');

Выше приведенный код указывает плагину LiveFilter фильтровать неупорядоченный список с id “filter_me” и использовать анимацию “slide”.

Плагин можно использовать для неупорядоченных и упорядоченных списков и таблиц. Нужно указать требуемый селектор при вызове плагина.

Важно! Для работы плагина нужно добавить на страницу поле ввода текста с классом “filter”. Данное поле будет использоваться для ввода текста фильтрации:


Пример страницы с использованием фильтра:



	
		
		Пример использования плагина LiveFilter
		
		
		
	
	
		
		
  • Пункт № 1.
  • Пункт № 2.
  • Пункт № 3.
  • Пункт № 4.
  • Пункт № 5.
  • Пункт № 6.
  • Пункт № 7.
  • Пункт № 8.
  • Пункт № 9.
  • Пункт № 10.

Код плагина

 

(function($){
	$.fn.liveFilter = function (aType) {
		
		// Определяем, что будет фильтроваться.
		var filterTarget = $(this);
		var child;
		if ($(this).is('ul')) {
			child = 'li';
		} else if ($(this).is('ol')) {
			child = 'li';
		} else if ($(this).is('table')) {
			child = 'tbody tr';
		}
		
		// Определяем переменные
		var hide;
		var show;
		var filter;
		
		// Событие для элемента ввода
		$('input.filter').keyup(function() {
			
			// Получаем значение фильтра
			filter = $(this).val();
			
			// Получаем то, что нужно спрятать, и то, что нужно показать
			hide = $(filterTarget).find(child + ':not(:Contains("' + filter + '"))');
			show = $(filterTarget).find(child + ':Contains("' + filter + '")')
			
			// Анимируем пункты, которые нужно спрятать и показать
			if ( aType == 'basic' ) {
				hide.hide();
				show.show();
			} else if ( aType == 'slide' ) {
				hide.slideUp(500);
				show.slideDown(500);
			} else if ( aType == 'fade' ) {
				hide.fadeOut(400);
				show.fadeIn(400);
			}
			
		});		
		
		// Пользовательское выражение для нечувствительной к регистру текста функции contains()
		jQuery.expr[':'].Contains = function(a,i,m){
		    return jQuery(a).text().toLowerCase().indexOf(m[3].toLowerCase())>=0;
		}; 

	}

})(jQuery);

Источник урока: www.mikemerritt.me/blog/jquery-plugin-livefilter-1-2/

Урок Создан:2011-02-10 Просмотров:7166

Добавить комментарий:


Copyright© 2009 Hosted by Zhost