7. Acessível através da variável global
jQuery.myFunctionGoesHere();
ou através do alias
$.myFunctionGoesHere();
8. Seletores jQuery
$(“#my-element-id”) // busca pelo ID
$(“.my-element-class”) // seleciona pela classe CSS
$(“div:has(input:checked)”) // combinando funções
$(“li:even”).css(“background-color:#333”) //li ímpar
$(“ul#my-list li:first”) // primeiro li
$(“ul#my-list li:last”) // último li
17. Nível mais baixo - $.ajax
$.ajax({
type: "POST",
url: "/user/create",
data: "{‘username’: ‘foo’, ‘pwd’: ‘test’}",
beforeSend: function( xhr ) {
xhr.overrideMimeType( "application/json" );
}
}).done(function(){
// some work to do after load
});
22. Exemplos plugins
jQuery Validation (http://jquery.bassistance.de/validate)
Autocomplete (http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete)
Tip tip (http://code.drewwilson.com/entry/tiptip-jquery-plugin)
Uniform (http://uniformjs.com)
Masked Input (http://digitalbush.com/projects/masked-input-plugin)
Price Format (http://jquerypriceformat.com)
Custom File Upload (https://github.com/filamentgroup/jQuery-Custom-File-Input)
23. Criando o plugin com $.fn.method
(function($) {
$.fn.capitalize = function(options) {
// implementation goes here
};
})(jQuery);
24. ou através do $.fn.extend
(function($) {
$.fn.extend({
capitalize : function(options) {
// implementation goes here
};
}
})(jQuery);
25. Importante saber...
this no contexto do plugin já é um objeto jQuery
usar each ao manipular ou extrair informações objeto this
Seletor pode retornar mais de 1 objeto
retornar este objeto jQuery para não perder a fluência
usar namespace para métodos, dados e bind de eventos
26. Importante saber...
this no contexto do plugin já é um objeto jQuery
usar each ao manipular ou extrair informações objeto this
Seletor pode retornar mais de 1 objeto
retornar este objeto jQuery para não perder a fluência
usar namespace para métodos, dados e bind de eventos
return this.each(function(){
$(this) // this here isn’t jQuery Object
});
33. Crie namespace e encapsule a chamada
var methods = {
init : function(options) {
// implementation goes here
},
restore : function() {
// implementation goes here
}
}
34. Delegar a chamada para os métodos
$.fn.capitalize = function(method) {
if(methods[method]) {
options = Array.prototype.slice.call(arguments, 1);
return methods[method].apply(this, options);
} else if ( typeof method == “object”) {
return methods.init.apply(this, arguments);
} else {
$.error(“The method ” + method + “ doens’t exist”);
}
};
$(“#my-div”).capitalize(“restore”);
37. Gerenciar plugins é difícil
Reverter ao estado inicial
Permitir os usuários interagir com eventos gerados
Alterar configurações após ser chamado
Evitar múltiplas instâncias para um mesmo elemento
Encapsular tarefas comuns
38. Widget Factory
Factories são usadas para criar
diferentes objetos por meio de uma
interface genérica
Que tal usar uma fábrica?
39. Widget Factory
JQuery UI Widget Factory cria,
baseado em um nome e objeto, um
plugin jQuery e uma “Classe” para
Que tal usar uma fábrica?
encapsular as funcionalidades
40. Algumas conveniências do $.widget
Cria um namespace (jQuery.gcom)
Encapsula a classe (jQuery.gcom.foo.prototype)
Extende o plugin jQuery (jQuery.fn.foo)
Estrutura para setup, teardown e alterar opções
Fácil de chamar callbacks: .trigger(“evento”)
Métodos acessíveis via: .foo(“metodo”) ou .metodo()
Permite métodos “privados”
43. Métodos “privados”
Métodos precedidos com underscore (_foo : function(){})
Não são acessíveis pela API
$(“#results”).table(“_hover”); // não funciona
Para quase tudo na vida dá-se um jeitinho
$(“#results”).data(“table”)._hover(); //OK
$.gcom.table.prototype._hover();
44. Fica fácil trabalhar com eventos
Permite gerar eventos para o usuário do plugin
callbackname - Nome do evento que deseja lançar
eventObject - mock do evento original
userObject - objeto contendo propriedades úteis
45. Fica fácil trabalhar com eventos
Permite gerar eventos para o usuário do plugin
callbackname - Nome do evento que deseja lançar
eventObject - mock do evento original
userObject - objeto contendo propriedades úteis
this.trigger(“hover”, e, { hovered: myObject} );
$(“#my-div”).foo( {hover: function() {} } );
57. Mais sobre o assunto
http://docs.jquery.com/Plugins/Authoring
https://github.com/addyosmani/jquery-plugin-patterns/
http://docs.jquery.com/JQuery_Core_Style_Guidelines
http://markdalgleish.com/2011/05/creating-highly-configurable-jquery-
plugins/