Заметки с тегом «jquery» (страница 4)

jQuery UI виджет, имитирующий кнопку

В статьях 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». Выбирайте, что вам больше нравится.

Оставте свой комментарий

Фабрика элементов интерфейса jQuery UI

Обновление: Некоторые свойства и методы фабрики в версии 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 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

Оставте свой комментарий

Центрирование элементов страницы в окне

Чтобы поместить какой-то элемент страницы, например, картинку, посредине окна нужно определить его размеры и положения полос прокрутки. Остальное уже простая арифметика. Все необходимы действия я завернул в плагин jQuery.


jQuery.fn.centering = function () {
    return this.each(function () {
        var offset = jQuery(this).offset(),
            w = jQuery(this).width(),
            h = jQuery(this).height();
        jQuery(this).css({
            'position': 'absolute',
            'width': w,
            'height': h,
            'top': parseInt(jQuery(window).scrollTop() - offset.top +
                     (jQuery(window).height() - h) / 2, 10),
            'left': parseInt(jQuery(window).scrollLeft() - offset.left +
                     (jQuery(window).width() - w) / 2, 10)
        });
    });
};

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

Оставте свой комментарий

Lightbox: презентационный инструмент

На мой взгляд, одним из эффектных презентационных инструментов для документов или изображений является 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();

Оставте свой комментарий