JQuery UI API - Part Gallery (Widget Factory)

категория

Utility (Утилиты) | Виджеты (Widgets)

jQuery.widget (имя [, основание], прототип) Использование

Описание: Используйте все виджеты Jquery UI с той же абстракции , чтобы создать динамическую JQuery плагин.

Вы можете использовать $.Widget объект как на основе наследования, или может быть явно или Jquery UI из существующего элемента управления сторонних производителей , созданной с нуля новый виджет. Определение виджета с тем же именем, чтобы наследовать базовый элемент, и даже позволяет правильно расширить виджет.

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

Примечание: В этом разделе с помощью элемента прогресса бар (Progressbar Widget) Демонстрация, но синтаксис применяется для каждого виджета.

инициализация

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

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

Это будет инициализировать объект Jquery для каждого элемента. Примеры указанных выше элементов с идентификатором "elem" .

опции

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

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

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

Можно передать несколько вариантов параметров , которые будут объединены в один объект (например , $.extend( true, target, object1, objectN ) , эффект $.extend( true, target, object1, objectN ) ). Это число устанавливается, чтобы охватить все случаи, обмен информацией между экземплярами опция полезна:

Параметры VAR = {модальный: правда, показать: "медленные"};
$ ( "# Dialog1") .dialog (варианты);
$ ( "# Dialog2") .dialog (опции, {AutoOpen: ложь});

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

Значение по умолчанию сохраняется в свойствах виджета, так что мы можем покрыть значение настройки Jquery UI. Например, после следующих параметров, все последующие экземпляры прогресс бар будет по умолчанию значения 80:

$ .ui.progressbar.prototype.options.value = 80;

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

способ

Теперь виджет был инициализирован, мы можем запросить свой статус, или выполнять действия на виджете. Все действия основаны на после того, как метод инициализации вызывается для выполнения. Для вызова метода виджета, мы передаем имя метода в плагин JQuery. Например, вызов на элемент прогресса бар (Progressbar виджетов) value() метод, мы можем использовать:

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

Если метод принимает параметры, мы можем передать параметры после имени метода. Например, чтобы передать параметр 40 на value() метод, мы можем использовать:

$ ( "#elem") .progressbar ( "Value", 40);

Как и JQuery другими способами, метод большинство виджетов возвращает объект JQuery:

$ ( "#elem")
  .progressbar ( "значение", 90)
  .addClass ( «почти сделано»);

Каждый виджет имеет свои собственные настройки метода, которые основаны на функциональности, обеспечиваемой виджета. Тем не менее, существует несколько способов, присутствует на всех мелких деталей, которые будут подробно описаны ниже.

событие

Все виджеты и у них есть множество поведенческих событий, связанных с тем, чтобы уведомить вас, когда изменение состояния. Для большинства мелких деталей, когда вызывается событие, имя строчными буквами в виде имени виджета в качестве префикса. Например, мы можем связать прогресс бар change событие, которое срабатывает при изменении значения.

$ ( "#elem") .bind ( "Progressbarchange", функция () {
  Alert ( "значение изменилось!");
});

Каждое событие имеет соответствующий откат, который в качестве опции. При необходимости, мы можем понять ход change обратного вызова, а не связывание progressbarchange событие.

$ ( "#elem") .progressbar ({
  изменить: функция () {
    Alert ( "значение изменилось!");
  }
});

Все виджеты имеют change событие, которое срабатывает , когда экземпляр.

Инстанцирование

Примеры виджетов использовать полное имя с небольшой частью в качестве ключевого jQuery.data() магазин. Таким образом, вы можете использовать следующий код из элемента, чтобы получить элемент индикатор прогресса (Progressbar Widget) объект экземпляра.

$ ( "#elem") .data ( "Ui-ProgressBar");

Является ли элемент связан для данного виджета, вы можете использовать :data выбора для обнаружения.

$ ( "#elem") .а ( ": Data ( 'щ-Progressbar')"); // правда
$ ( "#elem") .а ( ": Данные ( 'щ-перетаскиваемыми')"); // ложная

Можно также использовать :data для получения списка данного виджета в качестве примера всех элементов.

$ ( ": Данные ( 'щ-ProgressBar')");

свойство

Все виджеты имеют следующие атрибуты:

• defaultElement: элементы при построении экземпляра виджета Недоступные элементы для использования. Например, поскольку индикатор выполнения defaultElement является "<div> ", $.ui.progressbar({ value: 50 }) в новый <div> на экземпляре экземпляра виджета прогресс бар.
• Документ: содержит мелкие детали внутри элемента document . Полезно, если вам нужно взаимодействовать с в рамках виджета.
• Элемент: объект JQuery , который содержит элементы , используемые для создания экземпляра виджетов. При выборе нескольких элементов и вызвать .myWidget() , вы будете создавать единый виджет экземпляр каждого элемента. Таким образом, свойство всегда содержит элемент.
• Пространство имен: Расположение виджета прототип магазина глобальный объект JQuery. Например, "ui" Пространство namespace представляет собой небольшой части прототипа хранятся в $.ui .
• опции: возможность использования объекта в настоящее время содержит виджеты. При создании экземпляра любой из вариантов , предоставленных пользователем , будут автоматически и $.myNamespace.myWidget.prototype.options слияния по умолчанию определены. Задаваемый пользователем параметры переопределения значения по умолчанию.
• UUID: уникальный целочисленный идентификатор указывает управление.
• Версия: строка версия виджета. Для виджетов JQuery UI, свойство будет установлено на версии виджетов JQuery UI используется. Разработчики подключаемых модулей должны явно установить свойство своего прототипа.
• widgetEventPrefix: добавление виджетов на префикс имени события. Например, можно перетащить виджеты (Draggable Widget) из widgetEventPrefix является "drag" , поэтому при создании перетаскиваемыми, название мероприятия является "dragcreate" . По умолчанию виджет widgetEventPrefix является его имя. Примечание: Эта недвижимость была оставлена, в самом будущем выпуске. Имя события изменяется на widgetName: EventName (например, "draggable:create" ).
• widgetFullName: виджет содержит полное имя пространства имен. За $.widget( "myNamespace.myWidget", {} ) , widgetFullName будет "myNamespace-myWidget" .
• widgetName: название виджета. За $.widget( "myNamespace.myWidget", {} ) , widgetName будет "myWidget" .
• Окно: содержит мелкие детали внутри элемента window . Полезно, если вам нужно взаимодействовать с в рамках виджета.

jQuery.Widget использование основы виджет

Описание: базовая библиотека виджетов виджет (Widget Factory) использование.

Быстрая навигация

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

// getter
var disabled = $( ".selector" ).widget( "option", "disabled" );
 
// setter
$( ".selector" ).widget( "option", "disabled", true );
	

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

// getter
var hide = $( ".selector" ).widget( "option", "hide" );
 
// setter
$( ".selector" ).widget( "option", "hide", { effect: "explode", duration: 1000 } );
	

$( ".selector" ).widget({ show: { effect: "blind", duration: 800 } });
	

// getter
var show = $( ".selector" ).widget( "option", "show" );
 
// setter
$( ".selector" ).widget( "option", "show", { effect: "blind", duration: 800 } );
	

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

this._delay( this._foo, 100 );
	

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

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() {
 
  // Remove the element from the DOM when it's fully hidden.
  $( 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" );
}
	

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

$( ".selector" ).on( "widgetcreate", function( event, ui ) {} );