Справочник функций

Ваш аккаунт

Войти через: 
Забыли пароль?
Регистрация
Информацию о новых материалах можно получать и без регистрации:

Последние темы форума

Показать новые сообщения »

Почтовая рассылка

Подписчиков: 11639
Последний выпуск: 19.06.2015

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

Автор: Павел Марковнин
10 июня 2009 года

Сегодня я расскажу о том, как сделать 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>

Оставить комментарий

Комментарий:
можно использовать BB-коды
Максимальная длина комментария - 4000 символов.
 

Комментарии

1.
274
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
Хотелось бы увидеть в действии...
Реклама на сайте | Обмен ссылками | Ссылки | Экспорт (RSS) | Контакты
Добавить статью | Добавить исходник | Добавить хостинг-провайдера | Добавить сайт в каталог