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

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

Архив с исходным кодом и файлами изображений

Конструктор

• new LightBox(options);

  Создает новый объект Lightbox с указанными параметрами или значениями по-умолчанию.

Методы

• show(options)

  Отображает Lightbox с заданными параметрами или параметрами по-умолчанию.

• hide()

  Закрывает Lightbox. Этот метод автоматически вызывается после нажатия пользователем значка «Закрыть»

Конфигурационные параметры

• baseUrl

  Полный путь до оформления. Необходимость в этом параметре в основном вызвана тем, что для правильного отображения полупрозрачных PNG в IE6 используется фильтр AlphaImageLoader.

• opacity

  Степень прозрачности подложки от 0 до 1.

• color

  Цвет подложки – любое допустимое значение CSS.

• showCallback

  Функция, которая будет вызвана после отображения Lightbox. В качестве аргумента функции передается DOMNode контейнера.

• hideCallback

  Функция, которая будет вызвана после закрытия Lightbox.

• dimensionsCallback

  Функция, которая возвращает требуемые значения ширины и высоты контейнера. Если она не будет определена, то контейнер будет занимать 80% от размеров окна по ширине и высоте.

Чтобы изменить тень, отбрасываемую контейнером, создайте аналогичное рисунку изображение и разрежьте его на 8 частей. Части тени нужно сохранить в формате PNG-24 с прозрачностью.

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

Пример демонстрирует использования Lightbox в качестве просмотрщика изображений с Flickr.

var lb = new LightBox({
    'dimensionsCallback': function () {
        return {
            width: 240,
            height: 160
        };
    },
    'showCallback': function (node) {
        $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=apple,mac&tagmode=all&format=json&jsoncallback=?",
                function(data) {
                    $(node).append('<img src="' + data.items[0].media.m + '" title="' + data.items[0].title + '" />');
                });
    }
});

lb.show();