JQuery UI работает

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

устанавливать

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

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

Это будет инициализировать каждый элемент в объекте JQuery, в этом случае, элемент идентификатор, как "элем". Потому что мы называем без аргументов .progressbar() метод, виджет является опцией по умолчанию в соответствии с его инициализации. Мы можем передать набор опций во время установки, так что можно переопределить значение по умолчанию.

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

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

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

способ

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

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

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

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

Как и другие методы Jquery, большинство виджетов ссылаются метод возвращает объект JQuery.

$( "#elem" )
    .progressbar( "value", 90 )
    .addClass( "almost-done" );

Открытый метод

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

вариант

Как мы уже упоминали ранее, мы можем после инициализации option для изменения способа выбора. Например, мы можем назвать option изменить метод ProgressBar (прогресс бар) значение 30.

$( "#elem" ).progressbar( "option", "value", 30 );

Пожалуйста , обратите внимание, что это , прежде чем мы называем value примеры способа отличается. В этом примере мы называем option метода, возможность изменить значение 30.

Мы также можем получить текущее значение опции.

$( "#elem" ).progressbar( "option", "value" );

Кроме того, мы можем дать option передать метод объекта, обновить несколько вариантов.

$( "#elem" ).progressbar( "option", {
    value: 100,
    disabled: true
});

Возможно , вы заметили , что option метод имеет кодовые значения Jquery и сеттер же флаг, как и .css() и .attr() . Единственное отличие состоит в том, что вы должны передать строку "параметр" в качестве первого параметра.

запрещать

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

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

Вызов disable метод эквивалентен установить disabled опцию true .

включить

enable метод disable противоположный подход.

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

Вызов enable метод эквивалентен установить disabled опцию false .

уничтожить

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

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

После того, как вы уничтожите виджет, вы не можете вызвать любой метод на компоненте, если вы повторно не инициализировать виджет. Если вы хотите , чтобы удалить элемент непосредственно через .remove() , может также .html() или .empty() , чтобы изменить предков, виджет будет автоматически уничтожен.

виджет

Некоторые виджеты генерируемые обертки элемент или элементы, подключенные к исходному элементу отключен. В следующем примере widget возвращает генерируется элементы. В примере прогресс бар (ProgressBar), не создает обертку, widget метод возвращает исходные элементы.

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

событие

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

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

Каждое событие имеет соответствующую коррекцию, в качестве опции для рендеринга. Мы можем использовать индикатор выполнения (ProgressBar) на change обратного вызова, что эквивалентно связывания progressbarchange события.

$( "#elem" ).progressbar({
    change: function() {
        alert( "The value has changed!" );
    }
});

Общественные мероприятия

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