jQuery UI funciona

jQuery UI contém muitas peças pequenas para manter o estado (Widget), portanto, é um plugin jQuery típico usa um padrão ligeiramente diferente. Sua instalação é semelhante à instalação da maior parte do plugin jQuery, os widgets jQuery UI é baseado peças biblioteca (Widget Factory) criado biblioteca widget fornece uma API comum. Então, enquanto você aprender a usar um, você sabe como usar outros widgets (Widget). Este tutorial (progressbar) barra de progresso exemplos de código Widget descreve os recursos comuns.

instalar

A fim de acompanhar o status dos componentes, primeiro introduzir o ciclo de vida completo do widget. Quando o widget é instalado e ciclo de vida começa. Nós só precisamos chamar o plug-in em um ou mais elementos, isto é widgets instalados.

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

Isto irá inicializar cada elemento no objeto jQuery, neste caso, o ID de elemento como "elem". Porque nós chamamos o sem argumentos .progressbar() método, o widget é a opção padrão, de acordo com sua inicialização. Podemos passar um conjunto de opções no momento da instalação, de modo que pode substituir a opção padrão.

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

O número de opções ao instalar passou muito de acordo com as nossas necessidades. Nós não passar qualquer opções que você usa seus valores padrão.

As opções são parte de um pequeno Estado-Membro, por isso também pode definir opções após a instalação. Vamos seguir a option descreve esta parte do método.

caminho

Desde o widget foi inicializado, podemos consultar o estado, ou executar ações no widget. Todas as ações são realizadas após a inicialização na forma de uma chamada de método. Para chamar um método no widget, nós podemos passar o nome do método para o plugin jQuery. Por exemplo, para chamar a barra de progresso (progressbar) Widget value método, devemos usar:

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

Se o método usa parâmetros, podemos passar parâmetros após o nome do método. Por exemplo, para passar um parâmetro 40 ao value método, podemos usar:

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

Como outros métodos do jQuery, a maioria dos widgets ligar método retorna o objeto jQuery.

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

Método público

Cada elemento tem seu próprio conjunto de widgets que fornecem abordagem baseada funcionalidade. No entanto, existem maneiras que todos têm em comum são widgets.

opção

Como mencionamos anteriormente, podemos depois de inicializar option para alterar o método de selecção. Por exemplo, podemos chamar a option de alterar o método de progressbar (barra de progresso) o valor de 30.

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

Por favor note que este é, antes de chamar value exemplos do método é diferente. Neste exemplo, nós chamamos option método, a opção de alterar o valor para 30.

Nós também pode obter o valor atual de uma opção.

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

Além disso, podemos dar option passar um método de objeto, atualizar várias opções.

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

Você pode ter notado que option método tem os valores de código jQuery e mesma bandeira setter, como .css() e .attr() . A única diferença é que você deve passar a "opção" string como o primeiro parâmetro.

incapacitar

disable maneira de desativar o widget. Na barra de progresso instâncias (ProgressBar), isso irá mudar o estilo de modo que a barra de progresso está desativado.

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

Chamada disable método é equivalente a definir o disabled opção true .

permitir

enable método é disable abordagem oposta.

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

Ligue para enable método é equivalente a definir o disabled opção false .

destruir

Se você não precisa mais do widget, você pode destruí-lo, volte para a marca original. Isto significa que o término do ciclo de vida do widget.

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

Uma vez que você destruir um widget, você não pode chamar qualquer método do componente, a menos que você reinicializar o widget. Se você quiser remover o elemento diretamente através .remove() , também pode .html() ou .empty() para modificar os ancestrais, o widget será destruído automaticamente.

Widget

Alguns widgets gerados elemento ou elementos ligados para o elemento original invólucros é desligada. No exemplo a seguir, widget retornos gerados elementos. No exemplo da barra de progresso (progressbar), não gera o wrapper, widget método retorna os elementos originais.

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

evento

Eventos de todos os widgets têm uma variedade de comportamentos associados com eles, pois quando as mudanças de estado que você saiba. Para a maioria das peças pequenas, quando o evento é disparado, o nome para o nome do widget como um prefixo. Por exemplo, podemos ligar o evento barra de progresso () de mudança, uma vez que as alterações de valor acionado.

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

Cada evento tem uma correcção correspondente, como uma opção para renderização. Podemos usar a barra de progresso (progressbar) a change de retorno de chamada, o que equivale a ligação progressbarchange evento.

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

eventos públicos

A maioria dos eventos são para widgets específicos, todos os widgets têm um comum create eventos. O evento é acionado quando o widget for criado.