О работе с самой библиотекой jQuery написано много, но внятных туториалов по созданию расширений для неё я не видел. А раз так, значит этот туториал исправит ситуацию. Начнём сразу с разбора кода:
var first_plugin_class = function( element , options )
{
this._element = element;
this.init( options );
}
Тут эксплуатируется тот факт, что в JavaScript'е понятие между объектами и типами весьма размыто. Мы можем создать пустой объект, затем динамически добавить ему поля и методы, и в завершение начать использовать его для создания инстансов этого объекта. В примере выше всё несколько забавнее. Мы создали функцию first_plugin_class, добавили ей поле _element и создали вызов функции init (строго говоря именно создали вызов, а не вызвали, т.к. самой вызываемой функции ещё нет). Эта функция как раз и будет нашим типом данных. Здесь element это элемент DOM, которым мы будем оперировать, а options это параметры создания объектов нашего плагина. Теперь нужно определить функцию инициализации:
first_plugin_class.prototype.init = function( options )
{
this._title = options.title;
}
В общем-то всё достаточно незатейливо — просто добавили ещё поле и инициализировали его. Теперь напишем геттер для этого поля:
first_plugin_class.prototype.get_title = function()
{
return( this._title );
}
Всё, можно уже протестировать:
ob = new first_plugin_class( false , { 'title':'Это первый плагин!' } );
document.write( ob.get_title() );
Если все сделано правильно, то этот код выведет строку 'Это первый плагин!' Однако цель не достигнута. Созданный плагин нужно интегрировать в jQuery. Делается это так:
jQuery.fn.first_plugin = function( options )
{
// ...
}
Здесь first_plugin - это фабричная функция, которая будет создавать объекты нашего плагина, для указанных с помощью селекторов элементов DOM. Выглядеть это будет так:
ob = $( '#id1' ).first_plugin( { 'title':'Это первый плагин!' } );
В данном примере создается один объект для одного элемента DOM. А что если $( selector ) вернёт несколько элементов? Мы это обязательно предусмотрим. А пока начнем с подготовки данных:
options = jQuery.extend(
{
title : 'Это дефолтовое значение!'
} ,
options
);
Здесь, если title не задано, то мы присваиваем дефолтовое значение. Теперь создаем объекты:
if( this.length == 0 )
{
result = false;
}
else if( this.length == 1 )
{
result = new first_plugin_class( $( this ) , options );
}
else
{
result = [];
for( i = 0 ; i < this.length ; i++ )
{
result.push( new first_plugin_class( $( this[ i ] ) , options ) );
}
}
return( result );
Всё, теперь сколько бы элементов не выбрали, для всех будет создан объект. Ну если ничего не выбрано, то будет возвращено false. Добавим теперь ещё одну функцию (можно было обойтись и без неё, но чтобы пример совсем уж мелким не был):
first_plugin_class.prototype.attach = function()
{
$( this._element ).html( this.get_title() );
}
Теперь делаем вызов:
ob = $( '#id1' ).first_plugin( { 'title':'Это первый плагин!' } );
ob.attach();
Вуаля!
