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

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

<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>

Смотрим Загружаем jQueryЗагружаем Mootools