UPD: поковырял. В принципе, более стройная архитектура, чем у того же backbone, у которого часть логики контроллера во вью. Но из коробки нет router и не так просто с pushState, так что не стал использовать серьёзно. Возможно, через полгода-год этот фреймворк будет интереснее.

(function( $ ) {
	$.widget( "ui.numerationMaskGenerator", {
		options:
		{
			"buttonsData":
			{
				"Day":
				{
					"value": "%D",
					"isPressed": false,
					"example": "01"
				},
				"Month":
				{
					"value": "%M",
					"isPressed": false,
					"example": "01"
				},
				"Year":
				{
					"value": "%Y",
					"isPressed": false,
					"example": "1970"
				},
				"Number":
				{
					"value": "%N",
					"isPressed": false,
					"example": "1",
					"required": true
				}
			}
		},
	//{{{ _init
	/**
	 * Инициализация виджета
	 */
		_init: function()
		{
			var self = this;
		// обкладывающий див
			this.buttonsParent = $( "<div></div>" )
				.addClass( "numeration-mask-parent" )
				.addClass( "ui-helper-clearfix" );
			this.buttons = [];
			this.valuesExamples = [];
			this.required = [];
		// инитим все кнопки
			for ( var buttonName in this.options.buttonsData ) {
				this._initiateButton( buttonName, this.options.buttonsData[buttonName] )
					.appendTo( this.buttonsParent );
			}
			this.element.before( this.buttonsParent )
				.addClass( "numeration-mask" );
		// вывод примера сгенерированного значения
			this.exampleElement = $( "<div></div>" )
				.addClass( "numeration-mask-example" );
			this.element.after( this.exampleElement );
			this.element.bind( "keyup", function(){ self._generateExample(); } );
			this._generateExample();
		},
	/**
	 * Инициализация кнопки
	 */
		_initiateButton: function( ButtonName, ButtonData )
		{
			var self = this,
				button;
			button = this.buttons[ButtonName] = $( "<div></div>" );
			button
			// запрещаем выделение текста
				.disableSelection()
				.addClass( "numeration-mask-button " + ButtonName )
				.text( ButtonName )
				.bind( "click", function( Event ) {
					self.buttonClick( self.buttons[ButtonName] );
				})
				.data( "name", ButtonName )
				.data( "value", ButtonData["value"] )
				.data( "isPressed", this.element.val().indexOf( ButtonData["value"] ) > -1 ? true : ButtonData["isPressed"] )
				.data( "example", ButtonData["example"] )
			// если уже введён текст - делаем кнопку нажатой
				.toggleClass( "pressed", button.data( "isPressed" ) );
			this.valuesExamples[ButtonData["value"]] = ButtonData["example"];
		// сюда складываем названия обязательных кнопок
			if ( "required" in ButtonData && ButtonData.required ) {
				this.required.push( ButtonName );
			}
			return this.buttons[ButtonName];
		},
	/**
	 * Нажатие на кнопку
	 */
		buttonClick: function( Button )
		{
			var button = Button;
			button
				.data( "isPressed", ! button.data( "isPressed" ) )
				.toggleClass( "pressed", button.data( "isPressed" ) );
		// при нажатии на кнопку вставляем значение кнопки в позицию курсора
			if ( button.data( "isPressed" ) ) {
				$( this.element ).insertAtCaret( Button.data( "value" ) );
			}
		// иначе - удаляем все вхождения значения кнопки
			else {
				this._clearButtonValue( Button.data( "value" ) );
			}
		// перегенерируем пример
			this._generateExample();
			$( this.element ).focus();
		},
	/**
	 * Меняем текст в строке
	 */
		_replace: function( String, Value, Replace )
		{
			var re = new RegExp( Value, "g" );
			return String.replace( re, Replace );
		},
	/**
	 * Убираем из значения инпута все вхождения значения кнопки
	 */
		_clearButtonValue: function( Value )
		{
			$( this.element ).val( this._replace( $( this.element ).val(), Value, "" ) );
		},
	/**
	 * Генерация примера
	 */
		_generateExample: function()
		{
			var maskString = $( this.element ).val();
			maskString = this._appendRequiredParamsToExampleString( maskString );
			for ( var val in this.valuesExamples ) {
				maskString = this._replace( maskString, val, this.valuesExamples[val] );
			}
			$( this.exampleElement ).text( maskString );
		},

	/**
	 * Добавляем значения требуемых кнопок
	 */
		_appendRequiredParamsToExampleString: function( String )
		{
			if ( this.required.length )
			{
				for ( var i =0; i < this.required.length; i++ )
				{
					var name = this.required[i];
					var value = this.buttons[name].data( "value" );
					if ( String.indexOf( value ) == -1 ) {
						String += value;
					}
				}
			}
			return String;
		}
	});

}( jQuery ));

$.fn.extend({
	insertAtCaret: function( Value )
	{
		var $element =  $( this );
		var caretPosition = $element.caret();
		var value = $element.val();
		$element.val( value.substr( 0, caretPosition.start ) + Value + value.substr( caretPosition.end, value.length ) );
		var pos = caretPosition.start + Value.length;
		$element.caret( pos, pos );
	}
});

Ещё пример, попроще:

	/**
	 * Виджет редактирования текста на странице (использует уже существующий DOM для формы редактирования)
	 */
		jQuery.widget( "ui.simpleInlineEditor",
		{
			options:
			{
				selectorForm: null,
				selectorText: null,
				selectorSwitchToForm: null,
				selectorSave: null,
				selectorCancel: null,
				messageSuccess: 'Данные сохранены',
				messageError: 'Не удалось сохранить данные. Попробуйте ещё раз.',
				messagePositionTop: 30,
				eventsNs: 'simpleInlineEditor'
			},
			_init: function()
			{
				var $ = jQuery,
					me = this;
				var $el = me.element;
				if ( ! me.options.selectorForm || ! me.options.selectorText || ! me.options.selectorSwitchToForm || ! me.options.selectorSave || ! me.options.selectorCancel ) {
					throw new Error( 'not enough params' );
				}
				$( me.options.selectorSwitchToForm, $el ).bind( 'click.' + me.options.eventsNs, function() {
					me._toggle( true );
				} );
				$( me.options.selectorCancel, $el ).bind( 'click.' + me.options.eventsNs, function( Event ) {
					Event.stopPropagation();
					Event.preventDefault();
					me._toggle( false );
				} );
				$( me.options.selectorSave, $el ).bind( 'click.' + me.options.eventsNs, function( Event ) {
					Event.stopPropagation();
					Event.preventDefault();
					me._submit();
				} );
			},
		//переключатель текст/форма
			_toggle: function( ShowForm )
			{
				var $ = jQuery,
					me = this;
				var $el = me.element;
				$( me.options.selectorForm, $el ).toggle( ShowForm );
				$( me.options.selectorText, $el ).toggle( ! ShowForm );
			},
		// сохранение данных формы
			_submit: function()
			{
				var me = this,
					$ = jQuery;
				var $el = me.element;
				var $form = $( me.options.selectorForm, me.element );
				$.post( $form.attr( 'action' ), $form.serialize(), function( Answer )
					{
						if ( Answer.done )
						{
							me._showMessage( me.options.messageSuccess );
							me._toggle( false );
							if ( 'text' in Answer ) {
								$( me.options.selectorText, $el ).text( Answer.text );
							}
						}
						else {
							me._showMessage( me.options.messageError );
						}
					}, 'json');
			},
		// показ сообщения об ошибке или о сохранении
			_showMessage: function( Text )
			{
				var me = this;
				showPopupMessage( me.element, Text, { top: me.options.messagePositionTop } );
			}
		} );

// вызов:
			$( '.js-collection-name' ).simpleInlineEditor( {
				selectorForm: 'form',
				selectorText: '#collection-name',
				selectorSwitchToForm: '#collection-name',
				selectorSave: 'input[type="submit"]',
				selectorCancel: 'input[type="reset"]'
			} );

Подробнее о simplejson – в документации

В теории всё так: в шаблон передаём формы из формсета (подводный камень тут – для правильной валидации нужно в шаблоне внутри формы нужно не забыть вписать скрытые инпуты, отвечающие за количество форм формсета на странице, для этого пишем в шаблоне {{ exercisesFormset.management_form }}).
В шаблоне у каждого упражнения присутствуют контролы для удаления/добавления и перемещения упражнений, после загрузки страницы ненужные контролы у каждого упражнения скрываются, а после, к примеру, добавления нового упражнения контролы перерисовываются.
Для удаления все поля ввода упражнения очищаются, после чего скрываются.

Это была теория, теперь практика. Ниже гольный код с комментариями.

Во вьюхе нужно добавить следующее:

from django.forms.formsets import formset_factory
...
class NameForm( forms.ModelForm ):
	name = forms.CharField( max_length = 250 )
	description = forms.CharField( widget = forms.Textarea, required = False )

class ExerciseNameForm( forms.Form ):
	name = forms.ModelChoiceField( Exercise.objects.all() )
	sets = forms.IntegerField( min_value = 1, max_value = 200 )
...
@login_required
def add( request, id ):
	user = request.user
	other = Other()
	if request.method == "POST":
		nameForm = NameForm( request.POST, instance = other )
		exercisesFormsetClass = formset_factory( ExerciseNameForm )
		exercisesFormset = exercisesFormsetClass( request.POST, prefix = "exercises" )
		if nameForm.is_valid() and exercisesFormset.is_valid():
			nameData = nameForm.cleaned_data
			other.name = nameData["name"]
			other.description = nameData["description"]
			other.save()
			for position, exerciseForm in enumerate( exercisesFormset.forms, start = 1 ):
				exerciseData = exerciseForm.cleaned_data
				exercise = Exercise()
				exercise.exercise = exerciseData["name"]
				exercise.other = other
				exercise.sets = exerciseData["sets"]
				exercise.position = position
				exercise.save()
			return HttpResponseRedirect( "/other/%s/" % other.id )
		hide_exercises = request.POST["hide_exercises"]
	else:
		exercisesFormsetClass = formset_factory( ExerciseNameForm, extra = 1 )
		nameForm = NameForm( instance = other )
		exercisesFormset = exercisesFormsetClass( prefix = "exercises" )
		hide_exercises = ""
	return render_to_response( "add.html", { "nameForm": nameForm, "exercisesFormset": exercisesFormset, "hide_exercises": hide_exercises }, context_instance = RequestContext( request ) )

В шаблоне следующий код:

<script>
$(document).ready(function() {
	fixTotalFormsNumber();
	initiateControls();
	hideDeletedExercises();
});
</script>
{% block content %}
	<form action="" method="POST">
		<div class="parent">
			{% csrf_token %}
			<ul>
				{{ nameForm.as_ul }}
				{{ exercisesFormset.management_form }}
			</ul>
			{% for exerciseForm in exercisesFormset.forms %}
				<ul class="exercise-form-data">
					{{ exerciseForm.as_ul }}
					<li class="controls">
						<span class="up clickable">вверх</span>
						<span class="down clickable">вниз</span>
						<span class="delete clickable">удалить</span>
						<span class="add clickable">добавить</span>
					</li>
				</ul>
			{% endfor %}
		</div>
		<input type="hidden" name="hide_exercises" value="{{ hide_exercises }}" />
		<input type="submit" name="Добавить" />
	</form>
{% endblock %}

В шаблоне также грузится яваскрипт:

/**
* При обновлении страницы лишние элементы со страницы пропадут, а количество форм для обработки на стороне сервера останется (фф запомнит)
*/
function fixTotalFormsNumber()
{
	var inputNamePrefix = "exercises-",
		$parent = $( ".parent" );
	var count = $parent.find( "ul.exercise-form-data" ).length;
	$parent.find( "input[name=" + inputNamePrefix + "TOTAL_FORMS]" ).val( count );
}

/**
* Инициируем контролы
*/
function initiateControls()
{
	var $parent = $( ".parent" );
	$parent.find( ".controls .add" ).live( "click", function( Event ) { controlClicked( Event, "add" ) } );
	$parent.find( ".controls .delete" ).live( "click", function( Event ) { controlClicked( Event, "delete" ) } );
	$parent.find( ".controls .up" ).live( "click", function( Event ) { controlClicked( Event, "up" ) } );
	$parent.find( ".controls .down" ).live( "click", function( Event ) { controlClicked( Event, "down" ) } );
	updateControlsVisibility();
}

/**
* Скрывает "удалённые" упражнения при перезагрузке страницы
*/
function hideDeletedExercises()
{
	var $hideExercisesInput = $( "input[name=hide_exercises]" );
	var hideByIndexes = $hideExercisesInput.val().split( "," );
	if ( hideByIndexes.length )
	{
		var $rows = $( ".exercise-form-data" );
		for ( var rowNum = 0, count = $rows.length; rowNum < count; rowNum ++ )
		{
			var $row = $( $rows[rowNum] );
			if ( $.inArray( rowNum + "", hideByIndexes ) > -1 ) {
				$row.hide();
			}
		}
	}
}

function updateControlsVisibility()
{
	var $rows = $( ".exercise-form-data:visible" );
	for ( var rowNum = 0, count = $rows.length; rowNum < count; rowNum ++ )
	{
		var $row = $( $rows[rowNum] );
		if ( rowNum == 0 ) {
			$row.find( ".up" ).hide();
		}
		else {
			$row.find( ".up" ).show();
		}
		if ( rowNum == ( count - 1 ) )
		{
			$row.find( ".down" ).hide();
			$row.find( ".add" ).show();
		}
		else
		{
			$row.find( ".down" ).show();
			$row.find( ".add" ).hide();
		}
		if ( count == 1 ) {
			$row.find( ".delete" ).hide();
		}
		else {
			$row.find( ".delete" ).show();
		}
	}
}

/**
* При клике на контрол
* @param Event
* @param string ControlType
*/
function controlClicked( Event, ControlType )
{
	if ( ControlType == "add" )
	{
		addNewExerciseInputs();
		updateControlsVisibility();
	}
	else
	{
		var $el = $( Event.target ),
			inputSelectors = [ "select[name$=name]", "input[name$=sets]" ],
			rowSelector = ".exercise-form-data";
		var $currentRow = $el.parents( rowSelector );
		if ( ControlType == "delete" )
		{
			deleteExercise( $currentRow, inputSelectors );
			updateControlsVisibility();
		}
		else
		{
			rowSelector += ":visible"
			var $changeToRow;
			if ( ControlType == "up" ) {
				$changeToRow = $currentRow.prevAll( rowSelector );
			}
			else {
				$changeToRow = $currentRow.nextAll( rowSelector )
			}
			if ( $changeToRow.length ) {
				$changeToRow = $changeToRow.eq( 0 );
			}
			changeExerciseInputValues( $currentRow, $changeToRow, inputSelectors );
		}
	}

/**
 * Добавляем поля ввода для ещё одного упражнения
 */
	function addNewExerciseInputs()
	{
		var inputNamePrefix = "exercises-",
			$parent = $( ".parent" ),
		// в качестве шаболна используем последний ul для ввода упражнения
			$sourceExercise = $parent.find( "ul.exercise-form-data:last" );
	// если нашли ul и он правильный
		if ( $sourceExercise.length && $sourceExercise.find( "input[name^=" + inputNamePrefix + "]" ).length )
		{
		// для вычисления номера в шаблоне
			var re1 = new RegExp( inputNamePrefix + "(\\d*)-" );
		// для замены номеров
			var re2 = new RegExp( inputNamePrefix + "\\d*(-[^'\"]*)", "g" );
		// копируем html шаблона
			var newExerciseHtml = $sourceExercise.html();
		// получаем номер
			var sourceRowNum = parseInt( re1.exec( newExerciseHtml )[1] );
			var newRowNum = sourceRowNum + 1;
		// в html нового ul вписываем правильный номер
			newExerciseHtml = newExerciseHtml.replace( re2, inputNamePrefix + newRowNum + "$1" );
			$parent.append( "<ul class='exercise-form-data'>" + newExerciseHtml + "</ul>" );

		// увеличиваем количество форм для обработки на стороне сервера
			var $managerNums = $parent.find( "input[name=" + inputNamePrefix + "TOTAL_FORMS]" );
			$managerNums.val( parseInt( $managerNums.val() ) + 1 );
		}
	}

/**
 * "Удаляем" упражнение
 */
	function deleteExercise( $Row, InputSelectors )
	{
		if ( $Row.length )
		{
		// с пустым параметром просто сбросит все значения
			exerciseData( $Row, InputSelectors, "set" );
			$Row.hide();
			// для скрывания этого упражнения при перезагрузке страницы
				var $hideExercisesInput = $( "input[name=hide_exercises]" );
				$hideExercisesInput.val( $hideExercisesInput.val() + $Row.index( "ul.exercise-form-data" ) + "," );

		}
	}

	/**
	 * Меняем два упражнения местами
	 * @param jquery $Row1
	 * @param jquery $Row2
	 * @param Array InputSelectors
	 */
	function changeExerciseInputValues( $Row1, $Row2, InputSelectors )
	{
		if ( $Row1.length && $Row2.length )
		{
			var row1Values = exerciseData( $Row1, InputSelectors, "get" ),
				row2Values = exerciseData( $Row2, InputSelectors, "get" );
			 exerciseData( $Row1, InputSelectors, "set", row2Values );
			 exerciseData( $Row2, InputSelectors, "set", row1Values );
		}
	}

/**
 * Геттер/сеттер всех инпутов упражнения (так сложно - чтобы сеттер всегда понимал формат геттера)
 * @param jquery $Row
 * @param Array InputSelectors
 * @param string Type - get/set
 * @param Array Values - для сеттера массив значений
 */
	function exerciseData( $Row, InputSelectors, Type, Values )
	{
		Type = Type == "set" ? "set" : "get";
		Values = Values ? Values : [];
	// Пробегаемся по всем нужным элементам ввода
	// если элемент элемент типа select, то получаем/заполняем выбранный option, для инпутов - то же самое с value
		for ( var i = 0, count = InputSelectors.length; i < count; i ++ )
		{
			var inputSelector = InputSelectors[i];
			var $input = $Row.find( inputSelector );
			if ( $input.is( "select" ) )
			{
				if ( Type == "get" ) {
					Values[i] = $input[0].selectedIndex;
				}
				else {
					$input[0].selectedIndex = i in Values ? Values[i] : 0;
				}
			}
			else
			{
				if ( Type == "get" ) {
					Values[i] = $input.val();
				}
				else {
					$input.val( i in Values ? Values[i] : "" );
				}
			}
		}
		return Values;
	}
}

Альтернативы:
http://stackoverflow.com/questions/801354/django-equivalent-of-phps-form-value-array-associative-array.
http://eikke.com/django-generic-ajax-form-validation/ - для валидации формы ajax'ом.

$( "checkbox[checked]" )

Выбрать все чекбоксы с атрибутом «checked».
2. Элемент с атрибутом A, равным B [A=B]
Пример:

$( "input[name='my-name']" )

Выбрать все инпуты с атрибутом «name», равным «my-name».
3. Элемент с атрибутом A, не равным B [A!=B]
Пример:

$( "input[name!='my-name']" )

Выбрать все инпуты с атрибутом «name», не равным «my-name».
4. Элемент с атрибутом A, начинающимся с B [A^=B]
Пример:

$( "input[name^='my-nam']" )

Выбрать все инпуты с атрибутом «name», начинающимся с «my-nam».
5. Элемент с атрибутом A, заканчивающимся на B [A$=B]
Пример:

$( "input[name$='-name']" )

Выбрать все инпуты с атрибутом «name», заканчивающимся на «-name».
6. Элемент с атрибутом A, содержащим B [A*=B]
Пример:

$( "input[name*='y-n']" )

Выбрать все инпуты с атрибутом «name», содержащим «y-n».
7. Элемент с атрибутом A, содержащим префикс B [A|=B]
Выбирает все элементы, у которых атрибут A равен B или начинается с B и дефиса.
Пример:

$( "input[name|=my]" )

Выбрать все инпуты с атрибутом «name», равным «my» или начинающимся с «my».
8. Элемент с атрибутом A, содержащим B, ограниченный пробельными символами [A~=B]
Пример:

$( "input[name~='my-name']" )

Выбрать все инпуты с атрибутом «name», равным «my-name» или, к примеру «my-name your-name».

http://api.jquery.com/category/selectors/

// ==UserScript==
// @name           Redmine Ticket
// @namespace      hc
// @include        [урл к Redmine]/issues/*
// ==/UserScript==
var tt = document.createElement('DIV');
tt.innerHTML = "<script>\
var linkInWork = '<a href=\"javascript:void(0);\" onclick=\"setInWork(); return false;\" class=\"icon\">In work</a>';\
$A( $$( '#content .contextual a.icon-del' ) ).each( function( Elem ) {\
	Elem.insert( {'after': linkInWork} );\
});\
function setInWork()\
{\
	var t = $('loggedas').innerHTML;\
	var userId = /\\/users\\/([0-9]*)/.exec(t);\
	if ( userId !== null ) {\
		userId = userId[1];\
	}\
	var statusValue = 2;\
	setSelectOptionSelected( 'issue_assigned_to_id', userId );\
	setSelectOptionSelected( 'issue_status_id', statusValue );\
	$('issue-form').submit();\
}\
function setSelectOptionSelected( SelId, Value )\
{\
	var sel = $( SelId );\
	$A( sel.options ).find( function( option, index ) {\
	   if( option.value == Value ) {\
			sel.selectedIndex = index;\
	   }\
	});\
}\
</script>";

document.getElementById('content').appendChild(tt);

Добавляет ссылки «In work» в список ссылок вверху и внизу страницы.

За последнее время было много просьб рассказать о том, как написать свой собственный плагин к jQuery. Идя навстречу пожеланиям трудящихся бескрайних полей Интернета – выполняю эти просьбы…

Для того, чтобы лучше понять принципы, поставим себе какую-нибудь несложную задачу, имеющую хотя бы минимальную практическую пользу. Давайте вместе напишем плагин к jQuery, который будет раскрашивать в разный цвет четные и нечетные строки любой имеющейся таблицы. Причем мы должны иметь возможность передавать нашему плагину в качестве параметров значение цвета для четных и нечетных строк таблицы, а также значение цвета шрифта в четных и нечетных строках. Еще неплохо сделать, чтобы при перемещении указателя мыши над строкой, цвет фона строки и цвет шрифта тоже изменялся. Задача определена – приступаем к ее выполнению.

Для начала усвоим правила, которым необходимо следовать при написании плагина для jQuery:

• имя файла плагина должно формироваться следующим образом: jquery.[имя_плагина].js;
• все новые методы присоединяются к объекту jQuery.fn, все функции к объекту jQuery;
• в методах, this – это ссылка на текущий объект jQuery;
• любые методы или функции, которые Вы присоединяете, должны иметь точку с запятой в конце – иначе при сжатии код станет некорректным;
• метод должен возвратить объект jQuery, если не предусмотрено иное;
• вы должны использовать this.each, чтобы выполнить итерации по текущему набору элементов – таким путем Вы создадите чистый и совместимый код;
• всегда используйте jQuery вместо $ в коде Вашего плагина – это позволит пользователям изменять псевдоним для jQuery в единственном месте;

Следуя первому правилу, назовем файл нашего плагина jquery.zebra.js и первое, что мы напишем в этом файле, будет определение плагина:

jQuery.fn.zebra = function(){
  // тут мы разместим код плагина
};

И хотя наш плагин еще не содержит вообще никакого кода, его уже можно вызвать следующим образом:

$("selector").zebra();

Но мы договорились, что наш плагин должен уметь принимать некоторые параметры, поэтому давайте немного дополним наш код:

jQuery.fn.zebra = function(options){
  // тут мы разместим код плагина
};

где options – это объект, который может содержит пользовательские настройки. А может и не содержать…. Поэтому первое, что мы сделаем – определим настройки по умолчанию, воспользовавшись для этого jQuery.extend(object).

jQuery.fn.zebra = function(options){
  // настройки по умолчанию
  var options = jQuery.extend({
    bgEven: '#FFC080', // бэкграунд для четных строк
    bgOdd: '#FFDFBF', // бэкграунд для нечетных строк
    fontEven: '#AA7239', // цвет шрифта четных строк
    fontOdd: '#AA7239', // цвет шрифта нечетных строк
    bgHover: '#FF8000', // бэкграунд при hover
    fontHover: '#55391C' // цвет шрифта при hover
  },options);
  // тут мы разместим код
};

Переменная options – это объект, состоящий из пар ключ/значение в которых передаются значения соответствующих опций. Если нашему плагину не будут переданы пользовательские настройки – мы используем настройки по умолчанию. Если же опции, все или некоторые, будут переданы, тогда будут использованы именно они.

Двигаемся дальше, и сейчас самое время вспомнить одно из правил написания плагинов к jQuery – вы должны использовать this.each, чтобы выполнить итерации по текущему набору элементов. Заодно вспомним и это правило тоже – метод должен возвратить объект jQuery, если не предусмотрено иное. Проделаем это:

jQuery.fn.zebra = function(options){
  // настройки по умолчанию
  var options = jQuery.extend({
    bgEven: '#FFC080', // бэкграунд для четных строк
    bgOdd: '#FFDFBF', // бэкграунд для нечетных строк
    fontEven: '#AA7239', // цвет шрифта четных строк
    fontOdd: '#AA7239', // цвет шрифта нечетных строк
    bgHover: '#FF8000', // бэкграунд при hover
    fontHover: '#55391C' // цвет шрифта при hover
  },options);
  return this.each(function() {
    // тут мы разместим код
  });
};

Вспомним еще одно правило (или скорее памятку) – this – это ссылка на текущий объект jQuery. Действительно, в нашем случае this содержит ссылку на объект, который определит пользователь нашего плагина в jQuery-селекторе, например:

$("table.example").zebra();

здесь объект jQuery будет содержать таблицу (или таблицы) с классом example.

Теперь напишем собственно код, который должен реализовать задуманную нами функциональность. Займемся для начала четными строками – отыщем их:

jQuery(this).find('tr:even');

Тут все ясно – this содержит ссылку на текущую таблицу, и в этой таблице мы отбираем только четные строки. Но надо еще установить цвет фона и цвет шрифта для этого набора строк. Воспользуемся для этого css-свойствами background-color и color:

jQuery(this).find('tr:even')
            .css('background-color', options.bgEven)
            .css('color', options.fontEven);

Для всех строк, присутствующих в текущем наборе (сейчас это четные строки текущей таблицы) мы устанавливаем css-свойства background-color и color, получая их значения из объекта options.

Но и этого будет маловато… Нужно обработать прохождение указателя мыши над строкой. Допишем наш код еще немного:

jQuery(this).find('tr:even')
    .css('background-color', options.bgEven)
    .css('color', options.fontEven)
    .hover(
      function () {
	jQuery(this)
              .css('background-color', options.bgHover)
              .css('color', options.fontHover);
      },
      function () {
        jQuery(this)
              .css('background-color', options.bgEven)
              .css('color', options.fontEven);
      }
);

Мы воспользовались методом hover() библиотеки jQuery, передав ему две функции. Первая определит css-свойства в момент, когда указатель мыши находится над строкой, а вторая – вернет старые значения, когда он выйдет за пределы строки.

Точно такой же код нужно написать и для нечетных строк текущей таблицы и в итоге получится следующее:

jQuery.fn.zebra = function(options){
// настройки по умолчанию
var options = jQuery.extend({
  bgEven: '#FFC080', // бэкграунд для четных строк
  bgOdd: '#FFDFBF', // бэкграунд для нечетных строк
  fontEven: '#AA7239', // цвет шрифта четных строк
  fontOdd: '#AA7239', // цвет шрифта нечетных строк
  bgHover: '#FF8000', // бэкграунд при hover
  fontHover: '#55391C' // цвет шрифта при hover
},options);
return this.each(function() {
  // четные строки
  jQuery(this).find('tr:even')
    .css('background-color', options.bgEven)
    .css('color', options.fontEven)
    .hover(
      function () {
        jQuery(this)
              .css('background-color', options.bgHover)
	      .css('color', options.fontHover);
      },
      function () {
        jQuery(this)
               .css('background-color', options.bgEven)
               .css('color', options.fontEven);
      }
    );
  // нечетные строки
  jQuery(this).find('tr:odd')
    .css('background-color', options.bgOdd)
    .css('color', options.fontOdd)
    .hover(
      function () {
        jQuery(this)
               .css('background-color', options.bgHover)
               .css('color', options.fontHover);
      },
      function () {
        jQuery(this)
               .css('background-color', options.bgOdd)
               .css('color', options.fontOdd);
      }
    );

});
};

Вот такой небольшой, но вполне рабочий плагин у нас получился. А теперь займемся пожалуй даже более важным, чем собственно написание плагина – написанием документации к нему. И для начала сообщим пользователям, а для чего оно вообще надо. Затем опишем этапы установки плагина, приведем список доступных опций и примеры использования. Естественно дадим ссылку на работающий пример.

О плагине jquery.zebra.js

Плагин jquery.zebra.js позволяет легко изменять цвет фона и шрифта для четных и нечетных строк таблицы, выделяет цветом строку над которой находится указатель мыши. Совместим с IE 6.0+, FF 2+, Safari 2.0+, Opera 9.0+.

Установка плагина jquery.zebra.js

Подключите к странице требующиеся для работы файлы – библиотеку jQuery и файл плагина:

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.zebra.js"></script>

Использование плагина jquery.zebra.js

1. Использование плагина с настройками по умолчанию:

<script type="text/javascript">
$(document).ready(function(){
    $("table.bClass").zebra();
});
</script>

В этом примере плагин работает с таблицей (или таблицами), которая имеет класс bClass. К четным и нечетным строкам таблицы будут применены css-правила, которые зададут для них разный цвет фона и разный цвет шрифта. В примере будут использованы настройки по умолчанию.

2. Использование плагина с пользовательскими настройками:

<script type="text/javascript">
$(document).ready(function(){
    $("table.cClass").zebra({
      bgEven: "#CC66CC",
      bgOdd: "#E6ACE6",
      fontEven: "#662266",
      fontOdd: "#662266",
      bgHover: "#331133",
      fontHover: "#FFFFFF"
    });
});
</script>

В этом примере мы передаем плагину объект, содержащий пользовательские настройки, которые и определяют цвет фона и цвет шрифта в строках таблицы.

Доступные опции.

bgEven – строка: цвет фона для четных строк.
bgOdd – строка: цвет фона для нечетных строк.
fontEven – строка: цвет шрифта четных строк.
fontOdd – строка: цвет шрифта нечетных строк.
bgHover – строка: цвет фона при прохождении указателя мыши над строкой.
fontHover – строка: цвет шрифта при прохождении указателя мыши над строкой.

Демонстрация работы.

Здесь можно посмотреть демо

Вот и все. Осталось разве что привести пару ссылок по теме:

http://docs.jquery.com/Plugins/Authoring
http://www.learningjquery.com/2007/10/a-plugin-development-pattern

и теперь Вы знаете как написать свой плагин для библиотеки jQuery. Удачи!

Оригинал статьи.