O melhor tutorial Como usar jQuery UI biblioteca de widgets em 2024. Neste tutorial você pode aprender natureza,Fechar notas,
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 );
}
});
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" ) );
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;
}
});
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 );
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 );
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) .
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( "" );
}
});
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.