Создаем jQuery плагин на примере поискового поля

Сегодня я расскажу о том, как сделать jQuery плагин. А чтобы не делать что-то абстрактное, давайте сделаем вот такой плагин для текстового поля: есть текст по умолчанию и какой-то класс. При фокусе в это поле убирается класс и дефолтный текст, при блюре на нем — если ничего не введено, то текст и класс возвращаются домой. Такие штуки модные парни обычно используют для полей поиска, но они могут пригодиться нам и для других полей.

В программе урока: как делать плагин к jQuery, реализация простого плагина и аналог такого скрипта под Mootools (не все же одно jQuery).

Структура плагина

Для начала посмотрим на общую структуру плагина. Я написал комментарии к каждой строчке, так что смотрим на код:

<script type="text/javascript">
// так вот начинается описание плагина (с названием somePlugin) 
(function($) {
    $.fn.somePlugin = function(options) {
           // значение по умолчанию для опциональных аргументов
           // в виде имя: значение
           var defaults = {
             someOption: 'someValue'
           };
           // расширяем дефолтные значения опциями
           var opts = $.extend(defaults, options);
           // они теперь доступны как opts[имя_опции]
           // вот тут сам плагин
    };	
})(jQuery); 
</script>

Вызывается плагин следующим образом:

<script type="text/javascript">
 $('my_element').somePlugin({
      someOption: 'anotherValue' 
});
</script>Ну чтож, более-менее ясно, давайте перейдем к конкретике.

Плагин для текстового поля

В общем, есть у нас какое-то текстовое поле:

<input type="text" id="search-input" name="q" />

Немного стилей для красоты:

#search-input {
    font-size: 3em;
    width: 15em;
}

// это стиль для неактивного состояния
.inactive {
    color: #AAA;
}

Сделать нам нужно вот так:

1. при загрузке страницы добавить к полю класс для неактивного состояния (.inactive);
2. поставить дефолтное значение («Поиск»);
3. при фокусе убирать класс и обнулять значение, если там стоит слово «Поиск»;
4. при блюре проверяем, если поле пустое или там стоит слово «Поиск», то добавляем класс .inactive и выставляем дефолтное значение.

Вот такая схема. Реализуется она следующим образом (смотрим комментарии в коде):

<script type="text/javascript">
(function($) {
	$.fn.inputDefualts = function(options) {
		// дефолтные значения
		var defaults = {
 			cl: 'inactive', // имя класса для неактивного состояния
 			text: this.val()   // значение берется из самого инпута
  		}, 	opts = $.extend(defaults, options);	
  		
  		this.addClass(opts['cl']); 	// добавляем класс к инпуту
  		this.val(opts['text']);			// ставим значение по умолчанию
  		
  		// обрабатываем события фокуса на поле
  		this.focus(function() {
  			if($(this).val() == opts['text']) $(this).val(''); // обнуляем его, если надо
  			$(this).removeClass(opts['cl']); // убираем класс
  		});
  		
  		// теперь очередь блюра
  		this.blur(function() {
  			if($(this).val() == '') {
  				$(this).val(opts['text']); 			// возвращаем значение
  				$(this).addClass(opts['cl']); 	// и класс, если надо
  			}
  		});
	};
	
})(jQuery);

$(document).ready(function() {

	// вызов плагина
	$('#search-input').inputDefualts({
		cl: 'inactive',
		text: 'Поиск'
	});
});
</script>

1.

312

26 ноября 2006 года

dead_star

392 / / 26.11.2006

20 августа 2009, 20:47:48

интересно, но есть и свои баги
1. в начале компонента добавить
this = this.filter('input');
выбрать из обертки поля ввода input
лучше конечно под элемент ввода завести отдельную переменную
2. заменить $.extend(defaults, options);
на $.extend(defaults, options||{});
комментарии излишни
3. не стоит забывать о том что у элементов в обертке уже могу быть установлены события focus и blur поэтому для подключения дополнительных обработчиков лучше использовать функцию bind
this.bind('focus', function(event){ ... });
4. использование
$(document).ready(function() {
$('#search-input').inputDefualts({
cl: 'inactive',
text: 'Поиск'
});
});
можно упростить до
$(function(){
$('#search-input').inputDefualts({cl:'inactive', text:'Поиск'})
});
5. к элементам opts['text'] и opts['cl'] можно обращаться как к объектам ибо таковыми они и являются opts.text и opts.cl
пункты 4 и 5 это только замечания
также хочется сказать что выбирать элементы по id в данном случае не совсем корректно
логичней былоб ввести специальный класс, например тот же inactive, и выбирать все элементы с этим классом
$(function(){
$('input .inactive').inputDefualts()
});

2.

37K

07 марта 2008 года

dobs

0 / / 07.03.2008

20 августа 2009, 18:30:38

Хотелось бы увидеть в действии...