JQuery UI виджетов с помощью расширения библиотеки виджетов

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

Примечание: Прежде чем изучать эту главу, вы должны понимать , что виджет библиотеки (Widget Factory), и как она работает. Если вы не знакомы с этим знанием, поэтому , пожалуйста , рассмотреть , как использовать библиотеку частей (Widget Factory) раздел.

Создать расширение виджета

Создание виджета с помощью виджетов библиотеки (Widget Factory) до $.widget() передается имя виджета и объекта - прототипа для завершения. Ниже приведен пример, чтобы создать "superDialog" виджет в "Custom" пространства имен.

$.widget( "custom.superDialog", {} );

Для того, чтобы поддержать расширение, $.widget() Дополнительно принят в качестве члена использовать конструктор родительского виджета. При указании родительского элемента, когда он передается в качестве второго аргумента, имя виджета на спине, в передней части объекта виджета прототипа.

Как и выше, например, следующие должны также создать "superDialog" виджет в "Custom" пространства имен. Но эта передача диалог (диалог) виджет JQuery UI в конструктор ( $.ui.dialog ), представляет собой superDialog виджет должен использовать диалог (диалог) виджет JQuery UI в качестве родительского элемента.

$.widget( "custom.superDialog", $.ui.dialog, {} );

Здесь superDialog два диалоговых виджетов по существу эквивалентны, просто другое имя и пространство имен только. Для того, чтобы новый виджет больше возможностей, мы можем добавить некоторые методы к своему объекту прототипа.

Виджет прототип объекта передается в $.widget() последний аргумент. До сих пор, наш пример использует объект нулевой. Теперь давайте добавим метод к объекту:

$.widget( "custom.superDialog", $.ui.dialog, {
    red: function() {
        this.element.css( "color", "red" );
    }
});
 
// Create a new <div>, convert it into a superDialog, and call the red() method.
$( "<div>I am red</div>" )
    .superDialog()
    .superDialog( "red" );

Теперь superDialog имеют red() метод, который изменит свой цвет текста красный. Обратите внимание , что библиотеки - члены (Widget Factory) как автоматически установить this в качестве виджета объекта экземпляра. Для получения списка всех свойств и методов , доступных на экземпляре, посещают библиотеки - члены (Widget Factory) документацию по API .

Расширение существующих методов

Иногда вам нужно настроить поведение существующего компонента или добавления методов. Вы можете указать имя имя метода метода на прототипе объекта необходимо перезагрузить. Следующий пример отменяет диалог (диалог) в open() метод . Поскольку диалоговое окно по умолчанию включена, при запуске этого кода, "open" он будет записан.

$.widget( "custom.superDialog", $.ui.dialog, {
    open: function() {
        console.log( "open" );
    }
});
 
// Create a new <div>, and convert it into a superDialog.
$( "<div>" ).superDialog();

При выполнении этого кода, есть проблема. Так как мы не перегружена open() поведение по умолчанию, поэтому диалог (диалог) больше не отображается на экране.

Когда мы используем объект-прототип, мы на самом деле перекрывает оригинальный метод, используя новый метод в цепочке прототипов.

Для того , чтобы родитель методы сборки доступны, член библиотеки (Widget Factory) предоставляет два метода - _super() и _superApply() .

Используйте _super() и _superApply() , чтобы получить доступ к родительский элемент

_super() и _superApply() вызовы таким же образом , что и родительский компонент. Рассмотрим следующие примеры. Как и в прошлом , например, которые перегруженного open() метод для записи "open" . Тем не менее, этот запуск _super() вызывается диалог (диалог) из open() и в диалоговом окне Открыть.

$.widget( "custom.superDialog", $.ui.dialog, {
    open: function() {
        console.log( "open" );
 
        // Invoke the parent widget's open().
        return this._super();
    }
});
 
$( "<div>" ).superDialog();

_super() и _superApply() практически идентично оригинальному Function.prototype.call() и Function.prototype.apply() метод. Поэтому _super() принимает список параметров, _superApply() принимает массив в качестве параметра. Следующий пример демонстрирует, что разные между ними.

$.widget( "custom.superDialog", $.ui.dialog, {
    _setOption: function( key, value ) {
 
        // Both invoke dialog's setOption() method. _super() requires the arguments
        // be passed as an argument list, _superApply() as a single array.
        this._super( key, value );
        this._superApply( arguments );
    }
});

Пересмотрите виджет

JQuery UI 1.9 добавлен переопределить функцию виджета. Таким образом, вы не можете создать новый виджет, нам нужно только передать $.widget() , так что имя существующего виджета и конструктора. Следующие примерах из open() , чтобы добавить ту же запись, но не путем создания нового виджета , чтобы закончить.

$.widget( "ui.dialog", $.ui.dialog, {
    open: function() {
        console.log( "open" );
        return this._super();
    }
});
 
$( "<div>" ).dialog();

С помощью этого метода мы можем расширить небольшую часть существующего метода, но вы все равно можете использовать _super() , чтобы получить доступ к оригинальный метод - это не путем создания нового виджета , чтобы закончить, но это напрямую переопределить виджет может.

Виджеты (Widgets) и полиморфизм (полиморфизм)

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

$.widget( "custom.superDialog", $.ui.dialog, {} );
 
var dialog = $( "<div>" ).superDialog();
 
// This works.
dialog.superDialog( "close" );
 
// This doesn't.
dialog.dialog( "close" );

Примеры выше, родительский член плагина, dialog() , вы не можете назвать superDialog элементы на close() метод. Для получения дополнительной информации вызовите метод виджета, см вызова метода виджета (Widget) .

Примеры пользовательских персонализированные

До сих пор мы видели экземпляры методов расширения виджетов прототипа. На прототипе перегруженный метод влияет на все экземпляры виджета.

Чтобы проиллюстрировать этот момент, рассмотрим следующие примеры. диалог (диалог) две силы используют один и тот же open() метод.

$.widget( "ui.dialog", $.ui.dialog, {
    open: function() {
        console.log( "open" );
        return this._super();
    }
});
 
// Create two dialogs, both use the same open(), therefore "open" is logged twice.
$( "<div>" ).dialog();
$( "<div>" ).dialog();

Иногда вам просто нужно изменить поведение экземпляра виджета. Для этого вам нужно использовать обычный атрибут назначения JavaScript, получить ссылку на экземпляры и переопределить этот метод. Как показано ниже конкретных примеров.

var dialogInstance = $( "<div>" )
    .dialog()
    // Retrieve the dialog's instance and store it.
    .data( "ui-dialog" );
 
// Override the close() method for this dialog
dialogInstance.close = function() {
    console.log( "close" );
};
 
// Create a second dialog
$( "<div>" ).dialog();
 
// Select both dialogs and call close() on each of them.
// "close" will only be logged once.
$( ":data(ui-dialog)" ).dialog( "close" );

Перегруженные Техническая персонализация является прекрасным примером одноразовой настройки в.