jQuery UI API

Все плагины 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