В сервисе Google «Вопросы и ответы» одним пользователем был задан этот вопрос и, к моему удивлению, очень долго никто не давал на него ответа. А на самом деле эта задача очень просто решается благодаря встроенному методу serialize.

Сейчас я хочу разобрать только основную функцию программы:

Сохраняем ссылку на корневой элемент сортируемого списка. Он не однократно потребуется нам в дальнейшем. Хоть эта функция и работает очень быстро, но так получить доступ можно будет еще быстрее.

var root = $('#items');

Назначаем всем элементам списка уникальные идентификаторы. Это обязательное условие правильной работы метода serialize . Префикс может быть произвольным, но в наших интересах, чтобы он был как можно короче. В качестве разделителя можно использовать символы подчеркивание, равенство или дефис.

$('> *', root).each(function (index) {
    this.id = 'item-' + index;
});

Инициализируем виджет Sortable и перехватываем событие update, чтобы сохранять состояние списка.

root.sortable({
    'update': function (event, ui) {
        var order = $(this).sortable('serialize');
        $.cookies.set('sortable', order);
    }
});

Восстанавливаем порядок элементов списка после загрузки страницы.

var c = $.cookies.get('sortable');
if (c) {
    $.each(c.split('&'), function () {
        var id = this.replace('[]=', '-');
        $('#' + id).appendTo(root);
    });
}

Пробегаемся по всем элементам, сохраненным в cookie , и перемещаем их в конец списка. Если был сохранен порядок для всех элементов, то они естественным образом займут свои места. Если для каких-то элементов позиция не сохранялась, то они «всплывут» наверх списка.

Отдельно хочу заметить, что в этом примере вместо штатного API для доступа к cookies использовался плагин, который значительно облегчил работу с ними.

В статьях jQuery UI API и Фабрика элементов интерфейса jQuery UI я кратко рассказал о внутреннем устройстве надстройки jQuery UI. На примере кнопки я покажу, как можно писать очень полезные виджеты.

Задача: Написать виджет, имитирующий нажатие и блокирование кнопки. Он так же должен оповещать подписчиков о событиях, происходящих с этой кнопкой.

Объявляем наш виджет.

$.widget("trv.button", {

Так как я его изначально писал для проекта под кодовым названием «TRAVEL», то и пространство имен у меня будет особое, а не стандартное «ui». Если вы будете использовать свое пространство имен (а я настоятельно рекомендую вам это, чтобы избежать путаницы), то не забудьте переименовать классы CSS.

Далее объявляем инициализирующий метод нашего будущего виджета.

    _init: function() {
        var me = this;
        me.element
            .bind('mousedown.' + me.name, function() {
                me._down();
                return false;
            })
            .bind('mouseup.' + me.name, function () {
                me._up();
                return false;
            })
            .bind('click.' + me.name, function(event) {
                if (!me._getData('disabled')) {
                    me._trigger('press', event);
                }
                return false;
            });
    },

В этом методе подписываемся на события, связанные с нажатием левой кнопки мыши — «mousedown», «mouseup» и «click». Я не буду создавать дополнительные элементов для оформления кнопки, так-как предполагаю, что вся необходимая верстка присутствует на странице.

    destroy: function() {
        var me = this;
        me.element
            .unbind('mousedown.' + me.name)
            .unbind('mouseup.' + me.name)
            .unbind('click.' + me.name);
    },

Лично я в своей практике не применял метод удаления виджета, но тем не мене создал его, как предписывает руководство.

Следующие методы носят исключительно вспомогательный характер и не доступны извне.

    _down: function () {
        var me = this;

        if (!me._getData('disabled')) {
            me.element
                .addClass(me.widgetBaseClass + '-pressed')
                .one('mouseout.' + me.name, function () {
                    me._up();
                    me.element.one('mouseover.' + me.name, function () {
                        me._down();
                    });
                });

            $(document).one('mouseup.' + me.name, function () {
                me._up();
            });
        }
    },

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

Стоит заметить, что событие «mouseup» ловится на документе потому, что когда указатель мышки покинет элемент, то он уже не сможет ловить это событие.

    _up: function () {
        var me = this;
        me.element
            .unbind('mouseout.' + me.name)
            .unbind('mouseover.' + me.name)
            .removeClass(this.widgetBaseClass + '-pressed');
    }

Убираем дополнительный CSS класс с элемента, чтобы вернуть кнопку в исходное состояние, и отписываемся от событий «mouseout» и «mouseover».

});

Верстка кнопки может варьироваться вне зависимости от кода. Например, я использую такую:

<span class="trv-button">
    <span class="first-child">
        <em>Press me!</em>
    </span>
</span>

Кнопка полностью состоит из строчных элементов и теоретически может быть размещена внутри текста.

Когда на нее нажимают, то к основному элементу добавляется класс «trv-button-press». Этот класс автоматически создается из названия виджета и суффикса «-press».

Отслеживать нажатие кнопки можно через функцию обратного вызова «press» или соответствующее событие «buttonpress». Выбирайте, что вам больше нравится.

Обновление: Некоторые свойства и методы фабрики в версии 1.8 были изменены. Данная статья актуальна только для версий jQuery UI 1.7.x

Фабрика элементов интерфейса или, как их еще называют, виджетов (widget) используется для создания всех элементов jQuery UI . Она защищает от попыток создать несколько экземпляров виджета в одном элементе и от вызова скрытых методов (помеченных подчеркиванием).

Элементы интерфейса создаются функцией $.widget, в качестве параметров которой передается название и прототип:

$.widget('ui.myWidget', { … });

Свойства

• this.element

  Элемент, который используется для создания экземпляра плагина. Это поле всегда содержит jQuery объект с одним элементом. Если при создании виджета была использована выборка с несколькими элементами, то для каждого элемента из коллекции будет создан свой экземпляр.

• this.options

  Настройки экземпляра, которые при создании объединяются с настройками по умолчанию, определенными в $.ui.myWidget.defaults . Если у плагина есть какие-то метаданные, то они тоже объединяются с настройками.

• this.namespace

  Пространство имен плагина (в нашем примере это «ui»). Обычно не используется внутри плагинов.

• this.name

  Имя плагина (например, «myWidget»). Также редко используется внутри плагина как и пространство имен.

• this.widgetEventPrefix

  Это свойство используется для определения названия событий, которые генерирует плагин. Например, у диалогового окна есть функция обратного вызова callback close . Когда выполняется эта функция, генерируется событие «dialogclose». Название события — конкатенированные префикс события и название функции обратного вызова. Префикс по умолчанию совпадает с названием виджета, но может быть заменен. Например, для плагина draggable были бы не приемлемы названия событий «draggablestart» и т.п. По этому, меняя префикс на «drag», получаем названия «dragstart» и т.п. Требуемое значение нужно установить $.ui.myWidget.eventPrefix.

• this.widgetBaseClass

  Это полезное свойство помогает создавать названия CSS классов элементов внутри вашего виджета. Например, чтобы отметить элемент как «активный» вы делаете

  
  element.addClass(this.widgetBaseClass + '-active').
  

  Это свойство широко используется в фабрике и абстрактных плагинах типа $.ui.mouse.

Методы

• _init

  Это метод, где происходит инициализация и настройка всего необходимого для работы виджета, например, создание элементов или привязка к событиям. Метод выполняется сразу после создания экземпляра.

• destroy

  Это метод уничтожает экземпляр и делает всю необходимую работу по восстановлению прежнего состояния элемента. Все изменения, которые сделал плагин, например, добавление CSS классов, привязка к событиям и создание дополнительных элементов, должны быть уничтожены.

• option

  Используется для получения и изменения настроек плагина после создания экземпляра. Сигнатура метода аналогична css и attr . Вы можете указать только имя, чтобы получить значение настройки, имя и значение, чтобы изменить настройку или объект для изменения нескольких настроек. Этот метод внутри вызывает _getData или _setData.

• _getData

  Вызывается, когда пользователь получает значения настроек или через метод option. Это метод никогда не должен переопределяться плагином.

• _setData

  Вызывается, когда пользователь устанавливает значения настроек или через метод option . Этот метод может быть переопределен, чтобы плагин реагировал на изменение какой-то настройки. Например, когда меняется значение заголовка диалогового окна, текст в заголовке тоже должен обновиться.

• enable

  Вспомогательный метод, который вызывает _setData(‘disabled’, false) .

• disable

  Вспомогательный метод, который вызывает _setData(‘disabled’, true).

• _trigger

  Метод должен использоваться для запуска функций обратного вызова. Обязательным параметром метода является название функции, который нужно выполнить. Все функции так же генерируют события. Так же вы можете передать объект event, который вызвал запуск. Например, событие перетаскивания «drag» было вызвано событием «mousemove», поэтому в метод _trigger должно быть передано исходное значение события. Третьим параметром может быть произвольные данные, которые передаются в функцию и обработчик события.

Когда плагин переопределяет методы из $.widget.prototype, то оригинальные методы тоже должны быть вызваны:

$.widget('ui.myPlugin', {
    destroy: function() {
        this.element.removeAttr('something');
        $.widget.prototype.destroy.apply(this, arguments);
    }
});

Источник: http://wiki.jqueryui.com/Widget-factory

Все плагины jQuery UI (widget) имеют общий программный интерфейс (API). Это сокращает этап изучения новых плагинов — если вы уже использовали какой-то плагин, то можно сказать, что знаете как использовать другие. Все плагины имеют настройки, но при этом могут быть проинициализированы без их указания.

Инициализация и настройка

Для инициализации плагина с настройками по умолчанию вы просто вызываете его как любой другой метод jQuery:

$('#my-elem').draggable();

Чтобы задать какие-то опции на этапе инициализации, вы передаете их в одном объекте:

$('#my-elem').draggable({
    axis: 'x',
    containment: 'window'
});

Настройки, которые не были явно определены, примут значения по умолчанию. После инициализации плагина его конфигурацию можно в любой момент изменить, используя метод option:

$('#my-elem').draggable('option', 'axis', 'y');

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

$.ui.draggable.defaults.containment = 'window';

Методы

Вызов методов уже был продемонстрирован выше на примере метода option . Чтобы не захламлять jQuery горой методов для каждого плагина, все методы вызываются через функцию инициализации. Для вызова какого-то метода плагина вы передаете его имя первым параметром, затем следуют параметры для этого метода. Другими словами, вызов метода method(‘param1’, ‘param2’) становится plugin(‘method’, ‘param1’, ‘param2’).

У каждого плагина есть несколько общих методов:

• option

  Получить или задать настройки; использует формат параметров аналогичный css или attr

  
  $('#my-elem').draggable('option', 'axis');
  $('#my-elem').draggable('option', 'axis', 'y');
  $('#my-elem').draggable('option', {
      axis: 'y',
      containment: 'window'
  });
  

• enable

  Включить плагин

  $('#my-elem').draggable('enable');
  

• disable

  Отключить плагин

  $('#my-elem').draggable('disable');
  
  

• destroy

  Удалить экземпляр плагина и вернуть элемент в первоначальное состояние.

  $('#my-elem').draggable('destroy');
  

События

Все UI плагины генерируют события, позволяющие разработчику взаимодействовать с ним. Например, draggable генерирует события start, drag и stop . Каждому событию назначается функция обратного вызова (callback). При возникновении события соответствующей функции передаются два параметра — объекты event и ui.

Для объявления функции обратного вызова при настройке укажите ее в соответствующей опции:

$('#my-elem').draggable({
    start: function(event, ui) {
        // обработчик события
    }
});

Так же вы можете привязаться к событию через метод bind jQuery. Нужно отметить, что имя события в этом случае указывается с префиксом для предотвращения коллизий с событиями браузера.

$('#my-elem')
    .draggable()
    .bind('dragstart', function(event, ui) {
        // обработчик события
    });

Оригинал: http://wiki.jqueryui.com/API