Как использовать библиотеку виджетов JQuery UI

Мы создадим индикатор прогресса. Как показано в следующих примерах, которые по телефону jQuery.widget() для завершения, она принимает два параметра: имя подключаемого модуля должен быть создан, текст , который содержит объект является функцией плагина поддержки. Когда плагин вызывается, он создает новый плагин экземпляра все функции будут выполняться в контексте данного примера. Это два важных способа различных стандартных JQuery плагин. Во-первых, контекст является объектом, а не элемент DOM. Во-вторых, контекст всегда один объект, а не сборник.

$.widget( "custom.progressbar", {
    _create: function() {
        var progress = this.options.value + "%";
        this.element
            .addClass( "progressbar" )
            .text( progress );
    }
});

Должен содержать имя пространства имен плагина, в этом примере, мы используем custom пространство имен. Вы можете создать только один слой глубокое пространство имен, поэтому, custom.progressbar является эффективным имя подключаемого модуля, very.custom.progressbar не является допустимым имя подключаемого модуля.

Мы увидели библиотеку частей (Widget Factory) дает нам с двумя свойствами. this.element является объект JQuery , содержащий один элемент. Если мы называем плагин в JQuery объект , который содержит несколько элементов, это создаст отдельный плагин экземпляр для каждого элемента, и каждый экземпляр будет иметь свой собственный this.element . Второе свойство, this.options , представляет собой подключаемый модуль в опции включают все ключевые пары имя / значение хэш (хэш). Эти параметры могут быть переданы в плагин, следующим образом:

$( "<div></div>" )
    .appendTo( "body" )
    .progressbar({ value: 20 });

Когда мы называем jQuery.widget() , который, давая jQuery.fn (используется для создания стандартного подключаемого модуля системы) добавить функцию , чтобы расширить Jquery. Название функции добавляется на основе вашего прохода jQuery.widget() имя без имен - "ProgressBar". Опция Plug-проход, чтобы получить значение, установленное в экземпляра плагина. Как показано в следующем примере, мы можем указать значение по умолчанию для любого параметра. При разработке API, вы должны быть осведомлены о наиболее распространенных использования вашего плагина, так что вы можете установить соответствующее значение по умолчанию, и убедитесь, что все опции необязательной.

$.widget( "custom.progressbar", {
 
    // Default options.
    options: {
        value: 0
    },
    _create: function() {
        var progress = this.options.value + "%";
        this.element
            .addClass( "progressbar" )
            .text( progress );
    }
});

Назовите подключаемые методы

Теперь мы можем инициализировать наш прогресс бар, мы будем выполнять действие с помощью вызова метода на экземпляре плагина. Для того, чтобы определить метод подключаемого модуля, мы только проходим jQuery.widget() ссылку на объект функции. Мы можем также определить "частные" метод к имени функции с префиксом подчеркивания.

$.widget( "custom.progressbar", {
 
    options: {
        value: 0
    },
 
    _create: function() {
        var progress = this.options.value + "%";
        this.element
            .addClass( "progressbar" )
            .text( progress );
    },
 
    // Create a public method.
    value: function( value ) {
 
        // No value passed, act as a getter.
        if ( value === undefined ) {
            return this.options.value;
        }
 
        // Value passed, act as a setter.
        this.options.value = this._constrain( value );
        var progress = this.options.value + "%";
        this.element.text( progress );
    },
 
    // Create a private method.
    _constrain: function( value ) {
        if ( value > 100 ) {
            value = 100;
        }
        if ( value < 0 ) {
            value = 0;
        }
        return value;
    }
});

Для вызова метода на экземпляре плагина, вы можете передать имя метода в плагин JQuery. При вызове метода принимать параметры, вы просто передать имя метода за этими параметрами.

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

var bar = $( "<div></div>" )
    .appendTo( "body" )
    .progressbar({ value: 20 });
 
// Get the current value.
alert( bar.progressbar( "value" ) );
 
// Update the value.
bar.progressbar( "value", 50 );
 
// Get the current value again.
alert( bar.progressbar( "value" ) );

Используйте параметры

option() метод автоматически предоставляется плагином. option() метод позволяет получить и опции устанавливается после инициализации. Метод , как JQuery в .css() и .attr() Метод: Вы можете только передать имя в качестве аргумента заключается в использовании, вы можете также передать имя и значение в качестве набора с использованием или передавая имя ключа пар / значение хэш, чтобы установить несколько значений. При использовании в качестве значения, плагин возвращает имя входящего опции соответствующего текущего значения. При использовании в качестве сеттер, виджет _setOption метод будет вызываться для каждого параметра установлено. Мы можем указать плагин в нашем _setOption методе , чтобы отразить изменение параметров. Изменение параметров для действий , которые будут выполняться независимо друг от друга, мы можем переопределить _setOptions .

$.widget( "custom.progressbar", {
    options: {
        value: 0
    },
    _create: function() {
        this.options.value = this._constrain(this.options.value);
        this.element.addClass( "progressbar" );
        this.refresh();
    },
    _setOption: function( key, value ) {
        if ( key === "value" ) {
            value = this._constrain( value );
        }
        this._super( key, value );
    },
    _setOptions: function( options ) {
        this._super( options );
        this.refresh();
    },
    refresh: function() {
        var progress = this.options.value + "%";
        this.element.text( progress );
    },
    _constrain: function( value ) {
        if ( value > 100 ) {
            value = 100;
        }
        if ( value < 0 ) {
            value = 0;
        }
        return value;
    }
});

Добавить функцию обратного вызова

Самое простое расширение, чтобы добавить функцию обратного вызова, так что пользователи могут реагировать, когда изменения происходят в съемном состоянии. Мы можем посмотреть на следующем примере, как добавить функцию обратного вызова для индикатора выполнения, если индикатор хода достигает 100 процентов. _trigger() метод принимает три аргумента: имя функции обратного вызова, обратный вызов JQuery событие начала объекты, и хэш - данных , связанных с этим событием. Обратный вызов имя является только один параметр требуется, но требуется реализовать пользовательских функций пользователей на плагин, остальные параметры являются очень полезными. Например, если мы создаем перемещаемой плагин, мы можем передать MouseMove событие перетаскивания при срабатывании обратного вызова, которая позволит пользователям реагировать на события на основе объекта, предоставленной X / Y координаты сопротивления. Пожалуйста , обратите внимание , передается _trigger() исходного события должно быть событие Jquery вместо нативного событий браузера.

$.widget( "custom.progressbar", {
    options: {
        value: 0
    },
    _create: function() {
        this.options.value = this._constrain(this.options.value);
        this.element.addClass( "progressbar" );
        this.refresh();
    },
    _setOption: function( key, value ) {
        if ( key === "value" ) {
            value = this._constrain( value );
        }
        this._super( key, value );
    },
    _setOptions: function( options ) {
        this._super( options );
        this.refresh();
    },
    refresh: function() {
        var progress = this.options.value + "%";
        this.element.text( progress );
        if ( this.options.value == 100 ) {
            this._trigger( "complete", null, { value: 100 } );
        }
    },
    _constrain: function( value ) {
        if ( value > 100 ) {
            value = 100;
        }
        if ( value < 0 ) {
            value = 0;
        }
        return value;
    }
});

Обратный вызов функции по существу только дополнительный вариант, так что вы можете получить то же самое, как и другие параметры и установить их. Всякий раз, когда обратного вызова, то будет соответствующее событие. тип события по имени и имени функции обратного вызова, чтобы определить соединительный штекер. Обратный звонок и события принимают одни и те же два аргумента: объект события и хэш данных, связанных с этим событием, в частности, как показано в следующих примерах. Возможно, вам потребуется включить подключаемый модуль функции, чтобы запретить пользователям, для того, чтобы сделать это, лучший способ заключается в создании любви вы можете отменить функции обратного вызова. Пользователи могут отменить обратный вызов или событие , связанное с уроженцем отменить любое событие с ними, они по телефону event.preventDefault() или возвращать false , чтобы достичь. Если отменить обратный вызов, _trigger() метод будет возвращать false , так что вы можете достичь соответствующую функцию в плагинах.

var bar = $( "<div></div>" )
    .appendTo( "body" )
    .progressbar({
        complete: function( event, data ) {
            alert( "Callbacks are great!" );
        }
    })
    .bind( "progressbarcomplete", function( event, data ) {
        alert( "Events bubble and support many handlers for extreme flexibility." );
        alert( "The progress bar value is " + data.value );
    });
 
bar.progressbar( "option", "value", 100 );

природа

Теперь мы уже видели, как использовать виджет библиотеки (Widget Factory) для создания плагина, давайте посмотрим на то, как он на самом деле работает. При вызове jQuery.widget() , он создает функцию конструктора для подключаемого модуля и установить ваш плагин экземпляр передается в качестве объекта - прототипа. Все функции автоматически добавляются в виджет происходит от базового виджета опытный образец, определяется как jQuery.Widget.prototype . При создании плагина экземпляра будет использоваться jQuery.data сохраняет его на оригинальном DOM элемент, плагин имя в качестве имени ключа.

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

var bar = $( "<div></div>" )
    .appendTo( "body" )
    .progressbar()
    .data( "progressbar" );
 
// Call a method directly on the plugin instance.
bar.option( "value", 50 );
 
// Access properties on the plugin instance.
alert( bar.options.value );

Кроме того, можно создать экземпляр плагина без методов обхода, а также возможность называть элементы конструктора напрямую:

var bar = $.custom.progressbar( {}, $( "<div></div>" ).appendTo( "body") );
 
// Same result as before.
alert( bar.options.value );

Расширение прототипа

Widget конструкторы и прототипы большим преимуществом является то легко расширений. Путем добавления или изменения метода плагин прототип, мы можем изменить поведение виджета всех экземпляров. Например, если мы хотим, чтобы добавить метод к индикатору выполнения, чтобы сбросить до 0% прогресса, мы можем добавить этот метод к прототипу, который будет называться на всех вставной экземпляра.

$.custom.progressbar.prototype.reset = function() {
    this._setOption( "value", 0 );
};

Для получения расширенных виджетов для получения более подробной информации и как создать новый виджет на существующий виджет более подробной информации см расширенный виджет (Widget) с помощью библиотек - членов ЕС (Widget Factory в) .

прибирать

В некоторых случаях приложение позволяет пользователю плагинов, а затем аннулировать заявку. Вы можете _destroy() , чтобы сделать этот метод. В _destroy() внутри метода, вы должны отменить все действия во время инициализации и после использования плагинов делают. _destroy() с помощью .destroy() метод вызывается, .destroy() метод представляет собой подключаемый модуль в тех случаях , когда удаление элемента из DOM привязок вызывается автоматически, так что он может быть использован для сбора мусора. Основная .destroy() метод также широко используется для борьбы с некоторыми очистки операций, таких как удаление элемента DOM из экземпляра виджета цитируется, UNBIND имен виджета все события из элементов, используйте отвязать все _bind() добавлять события.

$.widget( "custom.progressbar", {
    options: {
        value: 0
    },
    _create: function() {
        this.options.value = this._constrain(this.options.value);
        this.element.addClass( "progressbar" );
        this.refresh();
    },
    _setOption: function( key, value ) {
        if ( key === "value" ) {
            value = this._constrain( value );
        }
        this._super( key, value );
    },
    _setOptions: function( options ) {
        this._super( options );
        this.refresh();
    },
    refresh: function() {
        var progress = this.options.value + "%";
        this.element.text( progress );
        if ( this.options.value == 100 ) {
            this._trigger( "complete", null, { value: 100 } );
        }
    },
    _constrain: function( value ) {
        if ( value > 100 ) {
            value = 100;
        }
        if ( value < 0 ) {
            value = 0;
        }
        return value;
    },
    _destroy: function() {
        this.element
            .removeClass( "progressbar" )
            .text( "" );
    }
});

Закрыть примечания

Библиотеки компонентов (Widget Factory) является способ создания состояния для штепсельной вилки. Есть могут быть использованы другие различные модели, и каждый из них имеет свои преимущества и недостатки. Библиотеки компонентов (Widget Factory) решает много общих проблем, и значительно повышает эффективность, но и существенно повысить повторное использование кода, что делает его пригодным для JQuery UI и другого состояния плагинов.

Обратите внимание , что в данном разделе мы используем custom пространство имен. ui пространство зарезервировано официальный плагин JQuery UI. При создании собственных плагинов, вы должны создать собственное пространство имен. Таким образом, чтобы более ясно, откуда пробка, которая принадлежит к диапазону.