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

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

JQueryUI Widget Factory — это просто функция ($ .widget), которая принимает строковое имя и объект в качестве аргументов и создает плагин jQuery и «класс» для инкапсуляции его функциональности.

Синтаксис

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

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

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

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

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

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

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

Опции

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

$( ".selector" ).widget({ disabled: true });

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

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

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

Опция — отключить шкуру

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

пример

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

Вариант — скрыть

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

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

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

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

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

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

пример

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

Вариант — показать

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

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

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

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

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

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

пример

методы

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

_create: function() {
   this.element.css( "background-color", this.options.color );
}

this._delay( this._foo, 100 );

_destroy: function() {
   this.element.removeClass( "my-widget" );
}

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

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

_getCreateOptions: function() {
   return { id: this.element.attr( "id" ) };
}

this._hide( this.element, this.options.hide, function() {
   $( this ).remove();
});

this._hoverable( this.element.find( "div" ) );

_init: function() {
   if ( this.options.autoOpen ) {
      this.open();
   }
}

this._off( this.element, "click" );

this._on( this.element, {
   "click a": function( event ) {
      event.preventDefault();
   }
});

_setOption: function( key, value ) {
   if ( key === "width" ) {
      this.element.width( value );
   }
   if ( key === "height" ) {
      this.element.height( value );
   }
   this._super( key, value );
}

_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();
   }
}

_this._show( this.element, this.options.show, function() {
   // Focus the element when it's fully visible.
   this.focus();
}

_setOption: function( key, value ) {
   if ( key === "title" ) {
      this.element.find( "h3" ).text( value );
   }
   this._super( key, value );
}

_setOption: function( key, value ) {
   if ( key === "title" ) {
      this.element.find( "h3" ).text( value );
   }
   this._superApply( arguments );
}

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()
      });
   }
});

this._on( this.element, {
   "click a": function( event ) {
      event.preventDefault();
      this.destroy();
   }
});

this._on( this.element, {
   "click a": function( event ) {
      event.preventDefault();
      this.disable();
   }
});

this._on( this.element, {
   "click a": function( event ) {
      event.preventDefault();
      this.enable();
   }
});

this.option( "width" );

var options = this.option();
for ( var key in options ) {
   console.log( key, options[ key ] );
}

this.option( "width", 500 );

this.option({
   width: 500,
   height: 500
});

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

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

Действие — _create ()

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

пример

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

Действие — _delay (fn [, задержка])

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

пример

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

Действие — _destroy ()

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

пример

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

Действие — _focusable (элемент)

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

пример

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

Действие — _getCreateEventData ()

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

пример

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

Действие — _getCreateOptions ()

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

пример

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

Действие — _hide (элемент, опция [, обратный вызов])

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

пример

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

Действие — _hoverable (элемент)

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

пример

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

Действие — _init ()

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

пример

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

Действие — _off (element, eventName)

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

пример

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

Действие — _on ([suppressDisabledCheck] [, element], обработчики)

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

пример

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

Действие — _setOption (ключ, значение)

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

пример

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

Действие — _setOptions (параметры)

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

пример

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

Действие — _show (элемент, опция [, обратный вызов])

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

пример

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

Действие — _super ([arg] [, …])

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

пример

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

Действие — _superApply (аргументы)

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

пример

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

Действие — _trigger (тип [, событие] [, данные])

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

пример

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

Действие — уничтожить ()

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

пример

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

Действие — отключить ()

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

пример

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

Действие — включить ()

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

пример

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

Действие — опция (optionName)

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

пример

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

Действие — опция ()

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

пример

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

Действие — опция (optionName, value)

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

пример

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

Действие — опция (варианты)

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

пример

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

Действие — виджет ()

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

пример

События

$( ".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. Первый параметр — это имя события, второй — любой стандартный объект события, который вы хотите передать, и третий — любой пользовательский объект события, который вы хотите передать.

Здесь мы запускаем событие, когда кнопка выходит за пределы х = 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, открывается окно с предупреждением.