Como usar jQuery UI biblioteca de widgets
Vamos criar uma barra de progresso. Tal como mostrado nos exemplos seguintes, os quais ligando jQuery.widget() para completar, leva-se dois parâmetros: um plug-in nome é para ser criada, um texto que contém o objecto é uma função do plug-in de suporte. Quando a ficha é chamado, ele cria uma nova instância de plug-in, todas as funções serão executadas no contexto deste exemplo. Esta duas maneiras importantes diferente padrão plugin jQuery. Em primeiro lugar, o contexto é um objeto, não um elemento DOM. Em segundo lugar, o contexto é sempre um único objeto, não uma coleção.
$.widget( "custom.progressbar", {
_create: function() {
var progress = this.options.value + "%";
this.element
.addClass( "progressbar" )
.text( progress );
}
});
Deve conter o nome do namespace plugin, neste exemplo, usamos uma custom namespace. Você só pode criar uma camada namespace profunda, portanto, custom.progressbar é um plug-in efetivo nome, very.custom.progressbar não um plug-in nome válido.
Vimos biblioteca de peças (Widget Factory) nos fornece duas propriedades. this.element é um objeto jQuery contendo um elemento. Se chamarmos o objeto plug-in jQuery que contém vários elementos, ele irá criar uma instância de plug-in separado para cada elemento, e cada instância terá o seu próprio this.element . A segunda propriedade, this.options , é uma opções de plug-in incluem todos os pares nome / valor-chave de hash (Hash). Estas opções podem ser passados para o plug-in, como segue:
$( "<div></div>" )
.appendTo( "body" )
.progressbar({ value: 20 });
Quando chamamos jQuery.widget() , que, dando jQuery.fn (usado para criar um sistema plug-in padrão) adicionar a função de estender jQuery. Nome da função é adicionado com base no seu passe jQuery.widget() nome sem o namespace - "progresso". opção-pass ficha é obter o valor definido na instância do plugin. Como mostrado no exemplo a seguir, podemos especificar um valor padrão para qualquer opção. Ao projetar sua API, você deve estar ciente do uso mais comum do seu plug-in, para que possa definir o padrão adequado, e garantir que todas as opções verdadeiramente opcionais.
$.widget( "custom.progressbar", {
// Default options.
options: {
value: 0
},
_create: function() {
var progress = this.options.value + "%";
this.element
.addClass( "progressbar" )
.text( progress );
}
});
Chamar os métodos de plug-in
Agora podemos iniciar a nossa barra de progresso, vamos realizar uma ação, chamando o método na instância do plug-in. Para definir um método plug-in, nós só passamos jQuery.widget() referência a um objeto de função. Também pode definir o método "privado" para o nome da função com um prefixo sublinhado.
$.widget( "custom.progressbar", {
options: {
value: 0
},
_create: function() {
var progress = this.options.value + "%";
this.element
.addClass( "progressbar" )
.text( progress );
},
// Create a public method.
value: function( value ) {
// No value passed, act as a getter.
if ( value === undefined ) {
return this.options.value;
}
// Value passed, act as a setter.
this.options.value = this._constrain( value );
var progress = this.options.value + "%";
this.element.text( progress );
},
// Create a private method.
_constrain: function( value ) {
if ( value > 100 ) {
value = 100;
}
if ( value < 0 ) {
value = 0;
}
return value;
}
});
Para chamar um método em uma instância de plug-in, você pode passar o nome do método para o plugin jQuery. Se você chamar um método para aceitar parâmetros, você simplesmente passar o nome do método por trás desses parâmetros.
Nota: A função jQuery é passado para o mesmo nome de método utilizado para inicializar o plug-in para executar o método. Isso é feito para evitar a poluição namespace jQuery, mantendo as chamadas de método corrente. Nos capítulos seguintes, veremos outros usos olhar mais natural.
var bar = $( "<div></div>" )
.appendTo( "body" )
.progressbar({ value: 20 });
// Get the current value.
alert( bar.progressbar( "value" ) );
// Update the value.
bar.progressbar( "value", 50 );
// Get the current value again.
alert( bar.progressbar( "value" ) );
Use as opções
option() método é fornecida automaticamente para o plug-in. option() método permite-lhe obter e definir opções após a inicialização. O método do jQuery .css() e .attr() método: Você só pode passar um nome como o argumento é usar, você também pode passar um nome e um valor definido utilizando ou passar um par de chaves de nome / valor de hash para definir vários valores. Quando usado como um valor, um plug-in retorna o nome da opção de entrada de valor de corrente correspondente. Quando usado como um setter, widget _setOption método será chamado para cada opção é definida. Podemos especificar um plug-in no nosso _setOption método para refletir a alteração de opções. Alterar as opções de ação a ser executada de forma independente, podemos substituir _setOptions .
$.widget( "custom.progressbar", {
options: {
value: 0
},
_create: function() {
this.options.value = this._constrain(this.options.value);
this.element.addClass( "progressbar" );
this.refresh();
},
_setOption: function( key, value ) {
if ( key === "value" ) {
value = this._constrain( value );
}
this._super( key, value );
},
_setOptions: function( options ) {
this._super( options );
this.refresh();
},
refresh: function() {
var progress = this.options.value + "%";
this.element.text( progress );
},
_constrain: function( value ) {
if ( value > 100 ) {
value = 100;
}
if ( value < 0 ) {
value = 0;
}
return value;
}
});
Adicionar callback
A extensão mais simples é adicionar um retorno de chamada para que os usuários possam reagir quando ocorrem mudanças no estado plug-in. Podemos olhar para exemplo de como adicionar uma chamada de retorno para a barra de progresso quando a barra de progresso atingir 100 por cento o seguinte. _trigger() método leva três argumentos: o nome do callback, um jQuery evento de retorno de chamada começou a objetos, e um hash dos dados associados ao evento. Nome de retorno de chamada é o único parâmetro obrigatório, mas deseja implementar costume caracteriza os usuários em plug-in, os outros parâmetros são muito úteis. Por exemplo, se nós criamos um plugin arrastável, nós podemos passar evento de arrastar mousemove quando acionado o retorno de chamada, o que permitirá que os usuários responder ao evento com base no objeto fornecido pelos X / Y coordenadas do arrasto. Por favor, note passado para _trigger() do evento original deve ser um evento jQuery em vez de um eventos navegador nativo.
$.widget( "custom.progressbar", {
options: {
value: 0
},
_create: function() {
this.options.value = this._constrain(this.options.value);
this.element.addClass( "progressbar" );
this.refresh();
},
_setOption: function( key, value ) {
if ( key === "value" ) {
value = this._constrain( value );
}
this._super( key, value );
},
_setOptions: function( options ) {
this._super( options );
this.refresh();
},
refresh: function() {
var progress = this.options.value + "%";
this.element.text( progress );
if ( this.options.value == 100 ) {
this._trigger( "complete", null, { value: 100 } );
}
},
_constrain: function( value ) {
if ( value > 100 ) {
value = 100;
}
if ( value < 0 ) {
value = 0;
}
return value;
}
});
função de retorno essencialmente apenas uma opção adicional, para que possa obter o mesmo que as outras opções e configurá-los. Sempre que retorno de chamada, haverá um evento correspondente é acionado. tipo de evento é pelo nome e o nome da função de retorno para determinar a ficha de ligação. Callback eo evento aceitam os mesmos dois argumentos: um objeto de evento e um hash dos dados associados ao evento, em especial, como mostrado nos exemplos a seguir. Você pode necessitar de incluir um plug-in recursos para impedir que os usuários, a fim de fazer isso, a melhor maneira é criar amor que você pode revogar retornos de chamada. Os usuários podem revogar callback ou um evento relacionado a um nativo revogar qualquer evento com eles, eles são chamando event.preventDefault() ou retornar false para conseguir. Se você revogar callback, _trigger() método irá retornar false , para que possa alcançar a função apropriada no plug-ins.
var bar = $( "<div></div>" )
.appendTo( "body" )
.progressbar({
complete: function( event, data ) {
alert( "Callbacks are great!" );
}
})
.bind( "progressbarcomplete", function( event, data ) {
alert( "Events bubble and support many handlers for extreme flexibility." );
alert( "The progress bar value is " + data.value );
});
bar.progressbar( "option", "value", 100 );
natureza
Agora vimos como usar a biblioteca de widget (Widget Factory) para criar um plug-in, vamos ver como ele realmente funciona. Quando você chamar jQuery.widget() , cria-se uma função de construtor para o plug-in e definir a sua instância do plugin é passado como um objeto de protótipo. Todas as funções são automaticamente adicionados ao widget vem de um widget base um protótipo, definida como jQuery.Widget.prototype . Quando você cria uma instância será usada em-plug jQuery.data armazena no elemento DOM original, plug-in nome como o nome da chave.
Uma vez que a instância do plugin diretamente ligada ao elemento DOM, você pode acessar diretamente o plug-in exemplo, sem a necessidade de percorrer os métodos de plug-in. Este método permitirá que você chamar diretamente na instância do plug-in, sem a necessidade de passar um nome de método de corda, e você também pode acessar as propriedades ligar diretamente.
var bar = $( "<div></div>" )
.appendTo( "body" )
.progressbar()
.data( "progressbar" );
// Call a method directly on the plugin instance.
bar.option( "value", 50 );
// Access properties on the plugin instance.
alert( bar.options.value );
Você também pode criar uma instância do plug-in, sem métodos de passagem, e a opção de chamar os elementos do construtor diretamente:
var bar = $.custom.progressbar( {}, $( "<div></div>" ).appendTo( "body") );
// Same result as before.
alert( bar.options.value );
Extensão do protótipo
construtores widget e protótipos maior vantagem é extensões fáceis. Ao adicionar ou modificar o protótipo plugue método, podemos modificar o comportamento Widget de todas as instâncias. Por exemplo, se queremos adicionar um método para a barra de progresso para repor para 0% o progresso, podemos adicionar este método para o protótipo, que será chamado em todas as instâncias plug-in.
$.custom.progressbar.prototype.reset = function() {
this._setOption( "value", 0 );
};
Para widgets estendidos para mais detalhes e como criar um novo widget em um já existente Widget mais detalhes, consulte o Widget estendida (Widget) por bibliotecas membros (do Widget Factory) .
aclarar
Em alguns casos, o aplicativo permite que o usuário plug-ins, e em seguida, cancelar o pedido. Você pode _destroy() para fazer este método. Em _destroy() dentro de um método, você deve revogar toda a ação durante a inicialização e pós-uso de plug-ins fazer. _destroy() por .destroy() método é chamado, .destroy() método é um plug-in casos em que a remoção de um elemento a partir dos vínculos DOM chamados automaticamente, assim que pode ser usado para coleta de lixo. Básico .destroy() método também é comumente usado para lidar com algumas operações de limpeza, tais como a remoção do elemento DOM a partir da instância do widget citados, namespace Widget unbind todos os eventos a partir dos elementos, usar unbind todos _bind() adicionar eventos.
$.widget( "custom.progressbar", {
options: {
value: 0
},
_create: function() {
this.options.value = this._constrain(this.options.value);
this.element.addClass( "progressbar" );
this.refresh();
},
_setOption: function( key, value ) {
if ( key === "value" ) {
value = this._constrain( value );
}
this._super( key, value );
},
_setOptions: function( options ) {
this._super( options );
this.refresh();
},
refresh: function() {
var progress = this.options.value + "%";
this.element.text( progress );
if ( this.options.value == 100 ) {
this._trigger( "complete", null, { value: 100 } );
}
},
_constrain: function( value ) {
if ( value > 100 ) {
value = 100;
}
if ( value < 0 ) {
value = 0;
}
return value;
},
_destroy: function() {
this.element
.removeClass( "progressbar" )
.text( "" );
}
});
Fechar notas
Biblioteca de Componentes (Widget Factory) é uma maneira de criar um estado para o plug. Existem outros modelos diferentes podem ser utilizados, e cada um tem suas próprias vantagens e desvantagens. Biblioteca de Componentes (Widget Factory) resolve muitos problemas comuns, e melhora a eficiência, mas também aumentar consideravelmente a capacidade de reutilização do código, tornando-o adequado para jQuery UI e outro estado dos plug-ins.
Note-se que nesta seção, usamos o custom namespace. ui namespace é reservado plug-in oficial jQuery UI. Ao criar seus próprios plug-ins, você deve criar seu próprio namespace. Assim como a forma mais clara a partir de onde a ficha, que pertence à gama.