JqueryUI - Фабрика виджетов

Раньше единственным способом написания пользовательских элементов управления в jQuery было расширение пространства имен $ .fn . Это хорошо работает для простых виджетов. Предположим, вы создаете больше виджетов с отслеживанием состояния, это быстро становится громоздким. Чтобы помочь в процессе создания виджетов, в пользовательском интерфейсе jQuery была представлена ​​Widget Factory, которая удаляет большую часть шаблонов, которые обычно связаны с управлением виджетами.

Фабрика виджетов jQueryUI - это просто функция ($ .widget), которая принимает имя строки и объект в качестве аргументов и создает подключаемый модуль jQuery и «Класс» для инкапсуляции его функциональности.

Синтаксис

Ниже приведен синтаксис метода фабрики виджетов jQueryUI:

jQuery.widget( name [, base ], prototype )

name- Это строка, содержащая пространство имен и имя виджета (разделенное точкой) создаваемого виджета.

base- Базовый виджет для наследования. Это должен быть конструктор, который можно создать с помощью ключевого слова `new`. По умолчанию jQuery.Widget .

prototype- Объект, который будет использоваться в качестве прототипа для наследования виджета. Например, пользовательский интерфейс jQuery имеет подключаемый модуль «мышь», на котором основаны остальные подключаемые модули взаимодействия. Для этого перетаскиваемые, отбрасываемые и т. Д. Все наследуются от плагина мыши следующим образом: jQuery.widget ("ui.draggable", $ .ui.mouse, {...}); Если вы не укажете этот аргумент, виджет будет наследовать непосредственно от «базового виджета» jQuery.Widget (обратите внимание на разницу между строчными буквами «w» jQuery.widget и прописными буквами «W» jQuery.Widget).

Базовый виджет

Базовый виджет - это виджет, используемый фабрикой виджетов.

Параметры

В следующей таблице перечислены различные параметры, которые можно использовать с базовым виджетом.

Sr.No. Вариант и описание
1 отключен

Эта опция отключает виджет, если установлено значение true . По умолчанию его значениеfalse.

Option - disabledhide

Эта опция отключает виджет, если установлено значение true . По умолчанию его значениеfalse.

Example

$( ".selector" ).widget({ disabled: true });
2 скрывать

Этот параметр определяет, как анимировать скрытие элемента. По умолчанию его значениеnull.

Option - hide

Этот параметр определяет, как анимировать скрытие элемента. По умолчанию его значениеnull.

Это может быть типа -

  • Boolean- Если установлено значение false, анимация использоваться не будет. Элемент будет исчезать с продолжительностью по умолчанию и с ослаблением по умолчанию, если установлено значение true .

  • Number - Элемент исчезнет с указанной продолжительностью и ослаблением по умолчанию.

  • String - Элемент будет скрыт с использованием указанного эффекта.

  • Object- Если значение является объектом, могут быть предоставлены свойства эффекта, задержки, продолжительности и замедления .

Example

$( ".selector" ).widget({ hide: { effect: "explode", duration: 1000 } });
3 Показать

Этот параметр определяет, как анимировать отображение элемента. По умолчанию его значениеnull.

Option - show

Этот параметр определяет, как анимировать отображение элемента. По умолчанию его значениеnull.

Это может быть типа -

  • Boolean- Если установлено значение false, анимация не будет использоваться для отображения элемента. Элемент будет плавно отображаться с продолжительностью по умолчанию и ослаблением по умолчанию, если установлено значение true .

  • Number - Элемент будет плавно отображаться с указанной продолжительностью и замедлением по умолчанию.

  • String - Элемент будет показан с указанным эффектом.

  • Object- Если значение является объектом, могут быть предоставлены свойства эффекта, задержки, продолжительности и замедления .

Example

$( ".selector" ).widget({ show: { effect: "explode", duration: 1000 } });

Методы

В следующей таблице перечислены различные методы, которые можно использовать с базовым виджетом.

Sr.No. Действие и описание
1 _Создайте()

Этот метод является конструктором виджета. Параметры отсутствуют, но параметры this.element и this.options уже заданы.

Action - _create()

Это действие полностью разрушает функциональность элемента «аккордеон». Элементы возвращаются в свое состояние до инициализации. Этот метод является конструктором виджета. Параметры отсутствуют, но параметры this.element и this.options уже заданы.

Example

_create: function() {
   this.element.css( "background-color", this.options.color );
}
2 _delay (fn [, задержка])

Этот метод вызывает предоставленную функцию после указанной задержки. Возвращает идентификатор тайм-аута для использования с clearTimeout () .

Action - _delay( fn [, delay ] )

Этот метод вызывает предоставленную функцию после указанной задержки. Возвращает идентификатор тайм-аута для использования с clearTimeout () .

Example

this._delay( this._foo, 100 );
3 _destroy ()

Метод public destroy () очищает все общие данные, события и т. Д., А затем делегирует этому методу _destroy () специальную очистку, специфичную для виджета.

Action - _destroy()

Метод public destroy () очищает все общие данные, события и т. Д., А затем делегирует этому методу _destroy () специальную очистку, специфичную для виджета.

Example

_destroy: function() {
   this.element.removeClass( "my-widget" );
}
4 _focusable (элемент)

Этот метод настраивает элемент для применения класса ui-state-focus к фокусу. Обработчики событий автоматически очищаются при уничтожении.

Action - _focusable( element )

Этот метод настраивает элемент для применения класса ui-state-focus к фокусу. Обработчики событий автоматически очищаются при уничтожении.

Example

_create: function() {
   this._focusable( this.element.find( ".my-items" ) );
}
5 _getCreateEventData ()

Все виджеты запускают событие создания . По умолчанию данные в событии не предоставляются, но этот метод может возвращать объект, который будет передан как данные события создания.

Action - _getCreateEventData()

Все виджеты запускают событие создания . По умолчанию данные в событии не предоставляются, но этот метод может возвращать объект, который будет передан как данные события создания.

Example

_getCreateEventData: function() {
   return this.options;
}
6 _getCreateOptions ()

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

Action - _getCreateOptions()

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

Example

_getCreateOptions: function() {
   return { id: this.element.attr( "id" ) };
}
7 _hide (элемент, параметр [, обратный вызов])

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

Action - _hide( element, option [, callback ] )

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

Example

this._hide( this.element, this.options.hide, function() {
   $( this ).remove();
});
8 _hoverable (элемент)

Этот метод Устанавливает элемент для применения класса ui-state-hover при наведении курсора. Обработчики событий автоматически очищаются при уничтожении.

Action - _hoverable( element )

Этот метод Устанавливает элемент для применения класса ui-state-hover при наведении курсора. Обработчики событий автоматически очищаются при уничтожении.

Example

this._hoverable( this.element.find( "div" ) );
9 _в этом()

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

Action - _init()

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

Example

_init: function() {
   if ( this.options.autoOpen ) {
      this.open();
   }
}
10 _off (элемент, имя_события)

Этот метод отвязывает обработчики событий от указанных элементов.

Action - _off( element, eventName )

Этот метод отвязывает обработчики событий от указанных элементов.

Example

this._off( this.element, "click" );
11 _on ([suppressDisabledCheck] [, элемент], обработчики)

Привязывает обработчики событий к указанным элементам. Делегирование поддерживается с помощью селекторов внутри имен событий, например, «click .foo».

Action - _on( [suppressDisabledCheck ] [, element ], handlers )

Привязывает обработчики событий к указанным элементам. Делегирование поддерживается с помощью селекторов внутри имен событий, например, «click .foo».

Example

this._on( this.element, {
   "click a": function( event ) {
      event.preventDefault();
   }
});
12 _setOption (ключ, значение)

Этот метод вызывается из метода _setOptions () для каждой отдельной опции. Состояние виджета должно обновляться в зависимости от изменений.

Action - _setOption( key, value )

Этот метод вызывается из метода _setOptions () для каждой отдельной опции. Состояние виджета должно обновляться в зависимости от изменений.

Example

_setOption: function( key, value ) {
   if ( key === "width" ) {
      this.element.width( value );
   }
   if ( key === "height" ) {
      this.element.height( value );
   }
   this._super( key, value );
}
13 _setOptions (параметры)

Этот метод вызывается всякий раз, когда вызывается метод option (), независимо от формы, в которой был вызван метод option ().

Action - _setOptions( options )

Этот метод вызывается всякий раз, когда вызывается метод option (), независимо от формы, в которой был вызван метод option ().

Example

_setOptions: function( options ) {
   var that = this,
   resize = false;
   $.each( options, function( key, value ) {
      that._setOption( key, value );
      if ( key === "height" || key === "width" ) {
         resize = true;
      }
   });
   if ( resize ) {
      this.resize();
   }
}
14 _show (элемент, параметр [, обратный вызов])

Показывает элемент сразу, используя встроенные методы анимации или пользовательские эффекты. Смотрите опцию показа для возможных значений опций.

Action - _show( element, option [, callback ] )

Показывает элемент сразу, используя встроенные методы анимации или пользовательские эффекты. Смотрите опцию показа для возможных значений опций.

Example

_this._show( this.element, this.options.show, function() {
   // Focus the element when it's fully visible.
   this.focus();
}
15 _super ([аргумент] [, ...])

Этот метод вызывает метод с тем же именем из родительского виджета с любыми указанными аргументами. По сути .call ().

Action - _super( [arg ] [, ... ] )

Этот метод вызывает метод с тем же именем из родительского виджета с любыми указанными аргументами. По сути .call ().

Example

_setOption: function( key, value ) {
   if ( key === "title" ) {
      this.element.find( "h3" ).text( value );
   }
   this._super( key, value );
}
16 _superApply (аргументы)

Вызывает одноименный метод родительского виджета с массивом аргументов.

Action - _superApply( arguments )

Вызывает одноименный метод родительского виджета с массивом аргументов.

Example

_setOption: function( key, value ) {
   if ( key === "title" ) {
      this.element.find( "h3" ).text( value );
   }
   this._superApply( arguments );
}
17 _trigger (тип [, событие] [, данные])

Этот метод запускает событие и связанный с ним обратный вызов. Параметр с именем, равным типу, вызывается как обратный вызов.

Action - _trigger( type [, event ] [, data ] )

Этот метод запускает событие и связанный с ним обратный вызов. Параметр с именем, равным типу, вызывается как обратный вызов.

Example

this._on( this.element, {
   keydown: function( event ) {
      // Pass the original event so that the custom search event has
      // useful information, such as keyCode
      this._trigger( "search", event, {
         // Pass additional information unique to this event
         value: this.element.val()
      });
   }
});
18 уничтожить ()

Этот метод полностью удаляет функциональность виджета. Это вернет элемент обратно в состояние до инициализации.

Action - destroy()

Этот метод полностью удаляет функциональность виджета. Это вернет элемент обратно в состояние до инициализации.

Example

this._on( this.element, {
   "click a": function( event ) {
      event.preventDefault();
      this.destroy();
   }
});
19 отключить ()

Этот метод отключает виджет.

Action - disable()

Этот метод отключает виджет.

Example

this._on( this.element, {
   "click a": function( event ) {
      event.preventDefault();
      this.disable();
   }
});
20 включить()

Этот метод включает виджет.

Action - enable()

Этот метод включает виджет.

Example

this._on( this.element, {
   "click a": function( event ) {
      event.preventDefault();
      this.enable();
   }
});
21 год option (optionName)

Этот метод получает значение, связанное в настоящее время с указанным optionName .

Action - option( optionName )

Этот метод получает значение, связанное в настоящее время с указанным optionName .

Example

this.option( "width" );
22 option ()

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

Action - option()

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

Example

var options = this.option();
for ( var key in options ) {
   console.log( key, options[ key ] );
}
23 option (optionName, значение)

Этот метод устанавливает значение параметра виджета, связанного с указанным optionName.

Action - option( optionName, value )

Этот метод устанавливает значение параметра виджета, связанного с указанным optionName.

Example

this.option( "width", 500 );
24 вариант (варианты)

Этот метод устанавливает один или несколько параметров для виджета.

Action - option( options )

Этот метод устанавливает один или несколько параметров для виджета.

Example

this.option({
   width: 500,
   height: 500
});
25 виджет ()

Этот метод возвращает объект jQuery, содержащий исходный элемент или другой соответствующий сгенерированный элемент.

Action - widget()

Этот метод возвращает объект jQuery, содержащий исходный элемент или другой соответствующий сгенерированный элемент.

Example

_create: function() {
   this.widget().css( "border", "2px solid red" );
}

События

Sr.No. Метод и описание события
1 создать (событие, пользовательский интерфейс)

Это событие запускается при создании виджета.

Event - create( event, ui )

Это событие запускается при создании виджета. Где событие имеет тип Event , а ui имеет тип Object .

Syntax

$( ".selector" ).widget({
   create: function( event, ui ) {}
});

Жизненный цикл фабрики виджетов jQueryUI

Фабрика виджетов jQueryUI предоставляет объектно-ориентированный способ управления жизненным циклом виджета. Эти действия жизненного цикла включают:

Создание и уничтожение виджета: например,

$( "#elem" ).progressbar();

Изменение параметров виджета: например

$( "#elem" ).progressbar({ value: 20 });

Выполнение "супер" вызовов в подклассах виджетов: например

$( "#elem" ).progressbar( "value" );
or 
$( "#elem" ).progressbar( "value", 40 );

Уведомления о событиях: например

$( "#elem" ).bind( "progressbarchange", function() {
   alert( "The value has changed!" );
});

пример

Теперь давайте создадим собственный виджет в следующем примере. Мы создадим виджет кнопки. Мы увидим, как создавать параметры, методы и события в виджете в следующих примерах:

Создание собственного виджета

Давайте сначала создадим простой пользовательский виджет.

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Widget - Default functionality</title>
      <link rel = "stylesheet" href = "//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <script>
         $(function() {
            $.widget("iP.myButton", {
               _create: function() { 
                  this._button = $("<button>"); 
                  this._button.text("My first Widget Button");
                  this._button.width(this.options.width) 
                  this._button.css("background-color", this.options.color);    
                  this._button.css("position", "absolute");   
                  this._button.css("left", "100px");            
                  $(this.element).append(this._button);
               },
            });
            $("#button1").myButton();
         });
      </script>
   </head>
   
   <body>
      <div id = "button1"></div>
   </body>
</html>

Сохраним приведенный выше код в HTML-файл. widgetfactoryexample.htm и откройте его в стандартном браузере, который поддерживает javascript, вы также должны увидеть следующий вывод -

Добавление параметров в пользовательский виджет

В предыдущем примере мы использовали функцию _create для создания настраиваемого элемента управления. Но пользователи обычно хотят настроить элемент управления, задав и изменив параметры. Мы можем определить объект параметров, который хранит значения по умолчанию для всех определяемых вами параметров. Для этого используется функция _setOption . Он вызывается для каждой отдельной опции, которую устанавливает пользователь. Здесь мы устанавливаем ширину и цвет фона кнопки.

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Widget - Default functionality</title>
      <link rel = "stylesheet" href = "//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <script>
         $(function() {
            $.widget("iP.myButton", {
               _create: function() { 
                  this._button = $("<button>"); 
                  this._button.text("My first Widget Button");
                  this._button.width(this.options.width) 
                  this._button.css("background-color", this.options.color);    
                  this._button.css("position", "absolute");   
                  this._button.css("left", "100px");            
                  $(this.element).append(this._button);
               },
               _setOption: function(key, value) { 
                  switch (key) { 
                     case "width": 
                     this._button.width(value); 
                     break; 
                     case "color":
                     this._button.css("background-color",value);
                     break; 
                  } 
               },
            });
            $("#button2").myButton();
            $("#button2").myButton("option", {width:100,color:"#cedc98"});
         });
      </script>
   </head>
   
   <body>
      <div id = "button2"></div>
   </body>
</html>

Сохраним приведенный выше код в HTML-файл. widgetfactoryexample.htm и откройте его в стандартном браузере, который поддерживает javascript, вы также должны увидеть следующий вывод -

Добавление методов в пользовательский виджет

В следующем примере мы добавим методы, которые может использовать пользователь, и их очень легко встроить в структуру. Мы напишем метод Move, который сдвигает кнопку на заданное расстояние по горизонтали. Чтобы это работало, нам также необходимо установить свойства position и left в функции _create -

this._button.css("position", "absolute");   
this._button.css("left", "100px");

После этого пользователь может теперь вызвать ваш метод обычным способом jQuery UI -

this._button.css("position", "absolute");   
this._button.css("left", "100px");
$("button3").myButton("move", 200);
<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Widget - Default functionality</title>
      <link rel = "stylesheet" href = "//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

      <script>
         $(function() {
            $.widget("iP.myButton", {
               _create: function() { 
                  this._button = $("<button>"); 
                  this._button.text("My first Widget Button");
                  this._button.width(this.options.width) 
                  this._button.css("background-color", this.options.color);    
                  this._button.css("position", "absolute");   
                  this._button.css("left", "100px");            
                  $(this.element).append(this._button);
               },
         
               move: function(dx) { 
                  var x = dx + parseInt(this._button.css("left")); 
                  this._button.css("left", x); 
                  if(x>400) { this._trigger("outbounds",{},  {position:x}); }
               }
            });
            $("#button3").myButton();
            $("#button3").myButton("move", 200);
         });
      </script>
   </head>
   
   <body>
      <div id = "button3"></div>
   </body>
</html>

Сохраним приведенный выше код в HTML-файл. widgetfactoryexample.htm и откройте его в стандартном браузере, который поддерживает javascript, вы также должны увидеть следующий вывод -

Добавление событий в пользовательский виджет

В этом примере мы продемонстрируем, как создать событие. Все, что вам нужно сделать, чтобы создать событие, - это использовать метод _trigger. Первый параметр - это имя события, второй - любой стандартный объект события, который вы хотите передать, а третий - любой настраиваемый объект события, который вы хотите передать.

Здесь мы запускаем событие, когда кнопка перемещается за пределы x = 400. Все, что вам нужно сделать, это добавить к функции перемещения -

if(x<400) { this._trigger("outbounds",{}, {position:x}); }

В этом случае событие называется outbounds, и пустой объект события передается с настраиваемым объектом события, который просто предоставляет позицию как свое единственное свойство.

Вся функция перемещения -

move: function(dx) {
   var x = dx + parseInt(this._button.css("left")); 
   this._button.css("left", x); 
   if(x<400) { this._trigger("outbounds",{}, {position:x}); }
}

Пользователь может установить функцию обработки событий, просто определив одноименный параметр.

$("button4").myButton("option", {
   width: 100, 
   color: "red",
   outbounds:function(e,ui) {
      alert(ui.position);}
});
<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Widget - Default functionality</title>
      <link rel = "stylesheet" href = "//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <script>
         $(function() {
            $.widget("iP.myButton", {
               _create: function() { 
                  this._button = $("<button>"); 
                  this._button.text("My first Widget Button");
                  this._button.width(this.options.width) 
                  this._button.css("background-color", this.options.color);    
                  this._button.css("position", "absolute");   
                  this._button.css("left", "100px");            
                  $(this.element).append(this._button);
               },
               move: function(dx) { 
                  var x = dx + parseInt(this._button.css("left")); 
                  this._button.css("left", x); 
                  if(x>400) { this._trigger("outbounds",{},  {position:x}); }
               }
            });
            $("#button4").myButton();
            $("#button4").on("mybuttonoutbounds", function(e, ui) {
               alert("out");
            });
            $("#button4").myButton("move", 500);
         });
      </script>
   </head>
   
   <body>
      <div id = "button4"></div>
   </body>
</html>

Сохраним приведенный выше код в HTML-файл. widgetfactoryexample.htm и откройте его в стандартном браузере, поддерживающем javascript, откроется окно с предупреждением.