jquery 2

Eduardo Mendes ([email protected])

jQuery e CSS

1

mailto:[email protected]

Eduardo Mendes ([email protected])2

Separation of Concerns

Descrição do Conteúdo

Apresentação do Conteúdo

Controle docomportamento deste Conteúdo



jQuery e CSS

.css(<attr>, <value>)$(this).css("font-size", “10px”).css(“border”, “1px solid");

.css({<attr>:<value>, <attr>:<value>,})$(this).css({“font-size”:”10px”,”border" : "1px solid”});



jQuery e CSS

.show()$(this).css("display", “block”);

.hide()$(this).css("display", “none”);



jQuery e CSS

.addClass() .removeClass()

.toggleClas()



jQuery e CSS

$(this).animate({'top': '0px'});

$(this).hasClass('nomeDaClasse');



Ajax Básico

7



Revelar conteúdo



Código sem Ajax<li class="bebida promocao" data-preco="15.00"> <h3>Lemon Breeze</h3> <p>R$ 15.00</p> <button>Veja a Receita</button> <div class="receita"> <p>Um drinks mais que … </p> <a href="#" class="expandir">Veja a bebida</a> <img src="imagens/yellow.gif"/> </div> </li>

index.html

$('.bebidas’).on(‘click','button', function () { $(this).closest(".bebida").find(".receita").slideDown(); }); $('.bebidas').on('click', ‘.expandir', function() { $(this).closest(".bebida").find("img").show(); });

application.js

apresenta o elemento oculto

quando é clicado

exibe a imagem

quando é clicado

QUal seria a forma

de apresentar este conteúdo

de maneira dinâmica?



$.ajax(url [, settings])

10

url obrigatória

settings configurações opcionais conjunto chave/valor que configura a requisição AJAX

• success: só executa quando a chamada a url funcionacorretamente

executa uma requisição HTTP assíncrona



Código sem Ajax<li class="bebida promocao" data-preco="15.00"> <h3>Lemon Breeze</h3> <p>R$ 15.00</p> <button>Veja a Receita</button> <div class="receita"> ! </div> </li>

index.html




Utilizando uma requisição AJAX$('.bebidas').on('click', 'button', function () { !

!

!

!

!

});

$.ajax('receita.html', { success: function(response) { $(’.receita').html(response).slideDown(); } });

<p>Um drinks …</p> <a href="#" class="expandir">Veja a bebida</a> <img src="imagens/yellow.gif"/>

application.js

receita.html

só executa quando

a resposta ret

orna

com sucesso

resposta, que não

é uma página HMTL

completa



$.get(url, success)

13

url obrigatória

success função a ser executada quando a resposta for retornada

executa uma requisição HTTP assíncrona via HTTP GET



Atalho com $.get$('.bebidas').on('click', 'button', function () { !

!

!

!

!

});

$.ajax('receita.html', { success: function(response) { $(’.receita').html(response).slideDown(); } });

$('.bebidas').on('click', 'button', function () { !

!

!

});

$.get('receita.html', function(response) { $(’.receita').html(response).slideDown(); });

equivalentes



Como enviar parâmetros?

$.ajax('receita.html', { success: function(response) { $(".receita").html(response).slideDown(); } });

sempre recupera o mesmo arquivo

Como criar um site em que a requisição levasse em conta o ID da receita?

receita.html?id=123




$.ajax(‘receita.html?id=123', { success: function(response) { $(".receita").html(response).slideDown(); } });

sempre recupera o mesmo arquivo

$.ajax(‘receita.html’, { success: function(response) { $(".receita").html(response).slideDown(); }, data: {“id”: 123} });




$.ajax(‘receita.html’, { success: function(response) { $(".receita").html(response).slideDown(); }, });

<div class=“receita” data-id=“123”>

data: {id: $(“.receita”).data("id") }




18

• success: só executa quando a chamada a url funcionacorretamente

executa uma requisição HTTP assíncrona

• error: executa quando ocorre um timeout, erro no servidor, ou a requisição é abortada

• timeout: indica em ms quanto arequisição deve deve esperar

• beforeSend: executa antes darequisição ajax

• complete: executa após a execuçãoda requisição com sucesso ou erro



Manipulando requisições com falha$('.bebidas').on('click', 'button', function () { $.ajax('http://www.fa7.edu.br/pos-si/receita.html', { success: function(response) { $(".receita").html(response).slideDown(); } !

!

!

}); });

, error: function(request, errorType, errorMessage) { alert('Error: ' + errorType + ', mensagem: ' + errorMessage); }

• error: executa quando ocorreum timeout, erro no servidor, ou a requisição é abortada



Manipulando requisições com falha$('.bebidas').on('click', 'button', function () { $.ajax('http://www.fa7.edu.br/pos-si/receita.html', { success: function(response) { $(".receita").html(response).slideDown(); }, error: function(request, errorType, errorMessage) { ... }, !

!

!

!

!

!

!

!

}); });

timeout: 3000,beforeSend: function() { $(".bebidas").addClass("carregando"); }complete: function() { $(".bebidas").removeClass("carregando"); }



JavaScript: Objetos

21



Objetos em JavaScript

Uma entidade independente com propriedades e tipo

como em outras linguagens as propriedades são acessadas pela notação do ponto

22

variavelObjeto

idade=10

variavelDoObjeto.nomeDaPropriedade o.idade



Criando objetos

23

var carro = new Object(); !

carro.fabricante = "KIA"; carro.modelo = "Picanto"; carro.ano = 2012;

carro["fabricante"] = "Volks"; carro["modelo"] = "Gol"; carro["ano"] = 2013;

pode ser utilizado como

um array associativo



ObjetosLiterais

24

var moto = {cor: "vermelha", rodas: 4, cilindros: 4};



FunçãoConstrutora

25

function Carro(fabricante, modelo, ano) { this.fabricante = fabricante; this.modelo = modelo; this.ano = ano; }

var outroCarro = new Carro("Hyundai", "Tucson", 2009); !

var aqueleCarro = new Carro("Ford", "Fiesta", 2014);



Métodos

26

var moto = {cor: "vermelha", rodas: 4, cilindros: 4};

Como foi visto os objetos são formados por propriedades



Métodos

27

variavelDoObjeto.nomeDoMetodo = nome_funcao;

São funções associadas a um objeto…

ou é uma propriedade de um objeto que é uma função !

um método é uma função atribuídaa uma propriedade do objeto

var meuObjeto = { meuMetodo: function(params) { // algum comportamento } };



Métodos

function Moto(cor, rodas, cilindros) { this.cor = cor; this.rodas = rodas; this.cilindros = cilindros; !

}

function exibirDados() { var resultado = "Dados da moto: cor - " + this.cor + ", rodas: " + this.rodas + ", cilindros: " + this.cilindros; alert(resultado); }

this.exibirDados = exibirDados;



Encapsulando comportamento jQuery em objetos

29



Refatorando$(document).ready(function () { $(".bebidas").on('click', 'button', function () { $.ajax('receita.html', { success: function(response) { $(".receita").html(response).slideDown(); }, error: function(request, errorType, errorMessage) { alert('Error: ' + errorType + ', mensagem: ' + errorMessage); }, timeout: 3000, beforeSend: function() { $(".bebidas").find("button").addClass("carregando"); }, complete: function() { $(".bebidas").find("button").removeClass("carregando"); } }); }); ! $('.bebidas').on('click', '.expandir', function(event) { event.preventDefault(); $(".bebida").find("img").show(); }); });



Refatorandovar receita = { init: function() { //manipuladores de eventos //já existentes } };

ele vai executar toda a operação que foi feita dentro de ready

$(document).ready(function () { receita.init(); }

facilita o entendimento do que acontece



Refatorandovar receita = { init: function() { !

!

!

!

!

!

!

} };


$('.bebidas').on('click', 'button', function () { $.ajax('receita.html', { ... }); }); !

$('.bebidas').on('click', '.expandir', function(event) {});




!

}, !

!

!

!

!

};


$('.bebidas').on('click', 'button', function () {}); $('.bebidas').on('click', '.expandir', function(event) {…}); !

!

!

$.ajax('receita.html', { ... }); carregamentoOk: function() { !

}




!

}, !

!

!

!

!

};


$('.bebidas').on('click', 'button', this.carregamentoOK); $('.bebidas').on('click', '.expandir', function(event) {…}); !

!

!

$.ajax('receita.html', { ... }); carregamentoOk: function() { !

}o mesmo pode ser feito para o carregento da imagem



jQuery com Funções Construtoras

35



Objeto Literalvar receita = { init: function() { //inic. da receita } }; !$(document).ready(function () { receita.init(); }

limitada a uma única receita

function Receita(sabor) { //inic. do sabor da receita !

} !

!

$(document).ready(function () { !

!

}

múltiplas bebidas

Função Construtora

var limao = new Receita('limao'); var negro = new Rece‘ta('negro');



Refatorandovar receita = { init: function() { $('.bebidas').on('click', 'button', this.carregamentoOK); $('.bebidas').on('click', '.expandir', this.exibirImagem); }, carregamentoOk: function() {…}, exibirImagem: function() {…} };




Refatorandofunction Receita(el) { this.el = el; //metodos auxiliares //manipuladores de eventos }

um elemento jQuery que será manipulado

$(document).ready(function () { var limao = new Receita($("#limao")); var negro = new Receita($("#negro")); });

executa o comportamento para cada bebida



Refatorandofunction Receita(el) { this.el = el; !

!

!

!

!

}

$(document).ready(function () { var limao = new Receita($("#limao")); var negro = new Receita($("#negro")); });

this.carregamentoOk = function() {...} this.exibirFoto = function(event) {...} !

this.el.on('click', 'button', this.carregamentoOk); this.el.on('click', '.expandir', this.exibirFoto);

as referências dentro das funções precisarão ser revisadas




!

!

!

!

!

!

!

!

!

this.el.on('click', 'button', this.carregamentoOk); this.el.on('click', '.expandir', this.exibirFoto); }

atingirá qualquer elemento de classe receitathis.carregamentoOk = function() {

$.ajax('receita.html', { timeout: 3000, success: function(response) { $('.receita').html(response).slideDown(); } });




!

!

!

!

!

!

!

!


this.carregamentoOk = function() { $.ajax('receita.html', { timeout: 3000, success: function(response) { .html(response).slideDown(); } });

this.receita = this.el.find(".receita");

this.receita



Funciona?this incorreto




!

!

!

!

!

!

!

!


this.carregamentoOk = function() { $.ajax('receita.html', { timeout: 3000, success: function(response) { .html(response).slideDown(); } });

this.receita = this.el.find(".receita");

this.receita

dentro da $.ajax, this se refere às configurações




!

!

!

!

!

!

!

!

!

!


this.carregamentoOk = function() { $.ajax('receita.html', { timeout: 3000, !

success: function(response) { this.receita.html(response).slideDown(); } });

this.receita = this.el.find(".receita");var that = this;

context: that,

configura quem é o this dentro do callback



Refatorandothis.exibirFoto = function(event) { event.preventDefault(); $(".bebida").find("img").show(); }



Refatorandothis.exibirFoto = function(event) { event.preventDefault(); that.el.find("img").show(); }



Funciona?



Forms

48



Submetendo via POST com jQuery Ajax

$(document).ready(function () { $('form').on('submit', function(e) { $.ajax('pedidos.html', { type: 'POST' }); }); });



Formulário




$(document).ready(function () { $('form').on('submit', function(e) { $.ajax('pedidos.html', { type: 'POST' }); }); });




$(document).ready(function () { $('form').on('submit', function(event) { event.preventDefault(); $.ajax('pedidos.html', { type: 'POST' }); }); });

e os dados?



Submetendo via POST com jQuery Ajax$(document).ready(function () { $('form').on('submit', function(event) { event.preventDefault(); $.ajax('pedidos.html', { type: 'POST' }); }); }); <form action="pedidos.html">

<select name="sabor" id="sabor"> <option>Limao</option> <option>Negro</option> </select> <input type="text" id="quantidade" name="quantidade" value="1"/> <input type="submit" value="FAZER O PEDIDO" /> </form>



Submetendo os dados$(document).ready(function () { $('form').on('submit', function(event) { event.preventDefault(); $.ajax('pedidos.html', { type: ‘POST’, !

!

!

!

}); }); });

data: {"sabor": $("#sabor").val(), "quatidade": $("#quantidade").val() }



Submetendo os dados$(document).ready(function () { $('form').on('submit', function(event) { event.preventDefault(); $.ajax('pedidos.html', { type: ‘POST’, data: !

!

!

}); }); });

$('form').serialize()

.serialize

cria uma string de submissão com todos os elementos do formulário



Submetendo os dados$(document).ready(function () { $('form').on('submit', function(event) { event.preventDefault(); $.ajax('pedidos.html', { type: ‘POST’, data: !

!

!

!

}); }); });

$('form').serialize()success: function(result) { $('form').remove(); $('#pedido').hide().html(result).fadeIn(); }



Funciona?



jQuery, Ajax e JSON

58



<p> Seu pedido de 4 sanduiches, do tipo Hamburguer, foi registrado no valor de R$ 20.00. Aguarde ser chamado! Número do pedido: 86 </p>

{ "pedido": 86, "sanduiche": "Hambuguer", "quantidade": 4, "total": 20.00 }

HTML JSON

Servidor decide como o HTML é formatado

O servidor fornece os dados que pode ser apresentado de maneiras diferentes

JSON - Java Script Object NotationUm formato de dados para se utilizar em web



Este código trabalha com HTML formatado$(document).ready(function () { $('form').on('submit', function(event) { var form = $(this); event.preventDefault(); $.ajax('pedidos.html', { type: 'POST', data: form.serialize(), success: function(result) { form.remove(); $('#pedido').hide().html(result).fadeIn(); } }); }); });



Este código trabalha com HTML formatado $('form').on('submit', function(event) { var form = $(this); event.preventDefault(); $.ajax('pedidos.html', { type: 'POST', data: form.serialize(), !

success: function(result) { form.remove(); $('#pedido').hide().html(result).fadeIn(); } !

}); });

dataType: 'json',

, contentType: 'application/json'

transforma a resposta

em JSON

o resultado não é HTML

então é preciso criar um

nó JSONsolicita que a resposta

seja no formato JSON



Este código trabalha com HTML formatadosuccess: function(result) { form.remove(); !

!

!

!

!

!

} { "pedido": 86, "sanduiche": "Hambuguer", "quantidade": 4, "total": 20.00 }

result

<p>Pedido: 86. Sanduiche: Hamburguer. Quantidade: 4. Total: R$ 20.00</p>

var texto = $("<p></p>"); texto.append("Pedido: “ + result.pedido + ". "); texto.append("Quantidade: “ + result.quantidade + “. "); texto.append("Sanduiche: “ + result.sanduiche + ". "); texto.append("Total: “ + result.total + ". ");

Json vai ser convertido

em um objeto JavaScript

$('#pedido').hide().html(msg).fadeIn();

Cria e adiciona o nó DOM



Refatorando$.ajax('pedidos.html', {…}); <form action=“/pedidos.html”

method=“post"> … </form>

$.ajax(‘pedidos.html’).attr(‘action’), {…});

.attr(<atributo>); .attr(<atributo>, <valor>);

métodos jQuery



Código finalizado$('form').on('submit', function (event) { var form = $(this); event.preventDefault(); $.ajax(form.attr('action'), { type: 'POST', dataType: 'json', data: form.serialize(), success: function (result) { form.remove(); var texto = $("<p></p>"); texto.append("Pedido: " + result.pedido + ". "); texto.append("Quantidade: " + result.quantidade + ". "); texto.append("Sanduiche: " + result.sanduiche + ". "); texto.append("Total: " + result.total + ". "); $('#pedido').hide().html(msg).fadeIn(); }, contentType: 'application/json' }); });



Métodos úteis

65



Ajax & JSON

<h1>Bem-vindo ao jQuery Festas</h1> <button>Bebida em Destaque</button> ! <div class="destaque"> <h2>Destaque</h2> <img src=""/> <p></p> </div>



Ajax & JSON

<h1>Bem-vindo ao jQuery Festas</h1> <button>Bebida em Destaque</button> ! <div class="destaque"> <h2>Destaque</h2> <img src=""/> <p></p> </div>

$('button').on('click', function () { $.ajax('bebidas/favoritas/1', { contentType: 'application/json', dataType: 'json',

success: function(result) {

{ "nome": "Lemon Breeze", "imagem": "imagens/yellow.gif" }

var destaque = $('.destaque'); destaque.find('p').html(destaque.find('img')

result.nome);

.attr(‘src', result.imagem); } }); });

e se existissem múltiplos destaques?



JSON com vários resultados

{ "nome": "Lemon Breeze", "imagem": "imagens/yellow.gif" },

[ !

!

!

!

{ "nome": "Dark Juice", "imagem": "imagens/black.gif" }, { "nome": "Chai Tea", "imagem": "imagens/chai.gif" } ]

success: function(result) { var destaque = $('.destaque'); destaque.find('p').html(result.nome); destaque.find('img') .attr('src', result.imagem); }

result

application.js

O resultado é um array de objetos

precisa-se de um laço para cada destaque



$.each -> iteração sobre um array

success: function(result) { !

var destaque = $(‘.destaque ); destaque.find(‘p').html( .nome); destaque.find('img') .attr('src', .imagem); !

}

application.js

<li class="destaque-0"> … </li> !

<li class="destaque-1"> … </li> !

<li class="destaque-2"> … </li>

index.html

$.each(colecao, function(<indice>, <objeto>) {});

Executa a função para cada objeto da coleção

$.each(result, function(indice, bebida) {-' + indice

bebida

bebida



E quando a quantidade de informação for variável?

71



E quando a quantidade de informação for variável?



Transforme um array de objetos em HTML$('.atualizar-pedidos').on('click', function() { $.ajax('status/todos.json', { contentType: 'application/json', dataType: 'json', success: function (result) {...} }); });

[ { "numero": "50", "status": "Não iniciado" }, { "numero": "45", "status": "Entregue" }, { "numero": "47", "status": "Cancelado" } !

]

result

$.getJSON(url, success);

$.getJSON('status/todos.json', function(result) {});

o resultado será um array de objetos

application.js



Transforme um array de objetos em HTML

$('.atualizar-pedidos').on('click', function() { $.getJSON('status/todos.json', function(result) { !! }); });

[ { "numero": "50", "status": "Não iniciado" }, { "numero": "45", "status": "Entregue" }, { "numero": "47", "status": "Cancelado" } !

]

result

<li> <h3>numero</h3> <p>status</p> </li> <li> <h3>…</h3> <p>…</p> </li> <li> <h3>…</h3> <p>…</p> </li>

é precisso transformar para um formato HTML

application.js

var pedidos = ???? $('ul').html(pedidos);



Array com $.map()

$.map(colecao, function(<item>, <indice>) {});

a coleção pode ser um array

a ordem é diferente do each

o método map um array modificado a partir do array passado com o parâmetro

var numeros = [1,2,3,4] !var numeros-novos = $.map(numeros, function(item, indice) { return item + 1 });

numeros [1, 2, 3, 4]

numeros-novos [2, 3, 4, 5]



Do JSON para o HTML! { "numero": "50", "status": "Não iniciado" },

{ "numero": "45", "status": "Entregue" },

{ "numero": "47", "status": "Cancelado" }[ ]

$.map(result, function(pedido, indice) { var item-pedido = $(“<li></li>”); return item-pedido; });

[ ]<li></li> <li></li> <li></li>



Do JSON para o HTML! { "numero": "50", "status": "Não iniciado" },

{ "numero": "45", "status": "Entregue" },

{ "numero": "47", "status": "Cancelado" }[ ]

$.map(result, function(pedido, indice) { var item-pedido = $(“<li></li>”); !! return item-pedido; });

[ ]$(‘<h3> Pedido: ’ + pedido.numero + ‘</h3>’).appendTo(item-pedido);$(‘<p>’ + pedido.status + ‘</p>’).appendTo(item-pedido);

<li> <h3>Pedido: 50</h3> <p>Não iniciado</p> </li>

<li> <h3>Pedido: 45</h3> <p>Entregue</p> </li>

<li> <h3>Pedido: 47</h3> <p>Cancelado</p> </li>



Do JSON para o HTML

$.map(result, function (pedido, indice) { var item_de_pedidos = $('<li></li>'); $('<h2>Pedido: ' + pedido.numero + '</h2>').appendTo(item_de_pedidos); $('<p>' + pedido.status + '</p>').appendTo(item_de_pedidos); return item_de_pedidos; });

$('.atualizar-pedidos').on('click', function () { $.getJSON('status/todos.json', function (result) {

var pedidos =

retorna-se a lista alterada

$('ul').html(pedidos); }); });



E quando a quantidade de informação for

79



Plugins

80



Plugin

81

Uma nova funcionalidade que pode ser chamada a partir de uma seleção jQuery

Pode ser reutilizada em outros projetos

encapsulamento e reaproveitamento de código



a função $

$.(a).css(“color”, “yellow”);a coleção pode ser um array

a ordem é diferente do each

Quando se utiliza a função $, o valor retornado é um objeto jQuery

$.(a).css(…)

Este objeto contém todos os métodos jQuery que estamos utilizando

$.(a).click(…) $.(a).addClass(…)

Além de todas as propriedades associadas a eles



$.fn

83

Todos este métodos estão no objeto $.fn

Novos métodos (plugins) também deverão ser adicionados a ele



Caminho simples para o plugin

A forma mais simples é adicionar uma propriedade ao $.fn

$.fn.umPlugin = function() { // lógica encapsulada }



Por partes

$ apelido para o objeto jQuery

window.jQuery = window.$ = jQuery

então porque não utilizar:



Por partesvar jQuery = function(selector, context) { return new jQuery.fn.init(selector, context, rootjQuery); }

jQuery é uma função Objeto

jQuery.fn = jQuery.prototype

uma propriedade que todos os objetos herdam de Global



FunçãoConstrutora

87


var outroCarro = new Carro("Hyundai", "Tucson", 2009);





outroCarro.abs = true;






outroCarro.abs = true;


Carro.prototype.abs = true; a propriedade estará disponível em todas as infâncias do objeto



Um plugin simples“Amarelar" o que se quiser

$.(a).css(“color”, “yellow”);$.fn.amarelar = function() { // lógica encapsulada }



Um plugin simples“Amarelar" o que se quiser

$.fn.amarelar = function() { this.css(‘color’, ‘yellow’); }

$(document).ready(function () { $('a').amarelar(); });



Encadeamento“Amarelar" o que se quiser

$.fn.amarelar = function() { this.css(‘color’, ‘yellow’); return this; }

$(document).ready(function () { $(‘a’).amarelar().fadeIn(); });



Para estar disponível

em todas as instâncias

93

utilize $.fn



E se existirem outros plugins que utilizam parâmetros com mesmos nomes?

94

e quantoà $??



Protegendo o escopoUtilize Funções IIFE (Immediately-Invoked Function Expressions)

padrão comum para evitar problemas de sombreamento de variáveis

tudo que for declaradotem escopo somente nesse bloco

(function() { var qualquer = “Hello”; })();

var carro = new Carro(); !

(function(c) { c.ligar(); })(carro);

(function($) { … })(jQuery);

modo jQuery



Um plugin com IIFE“Amarelar" o que se quiser

$.fn.amarelar = function() { this.css(‘color’, ‘yellow’); }




Um plugin com IIFE“Amarelar" o que se quiser

(function($) { $.fn.amarelar = function() { this.css(‘color’, ‘yellow’); } })(jQuery);




Preços

98



index.html <ul class="bebidas"> <li class="bebida" data-preco="15.00"> <p> <img src="imagens/yellow.gif"/> </p> !

<h3>Lemon Breeze</h3> <button>Consultar Preco</button> </li> <li class="bebida" data-preco="20.00"> … </li> <li class="bebida" data-preco="17.00"> … </li>

$('.bebida').precificar();



Criando um plugin

$.fn.precificar = function() { console.log('Chamando preficicar'); console.log(this); }

Disponibiliza o método como uma função jQuery

o this será o objeto jQuery onde o plugin foi chamado

$('.bebida').precificar();



Criando um plugin e adicionando comportamento

$.fn.precificar = function() { var bebida = this; bebida.on('click', 'button', function() { var preco = bebida.data('preco'); var detalhes = $('<p>Preco: ' + preco + '</p>'); $(this).hide(); bebida.append(detalhes); }); };

$(document).ready(function () { $('.bebida').precificar(); });



Preços

102



Corrigindo o comportamento

$.fn.precificar = function() { console.log('Chamando preficicar'); console.log(this); }

this.each()…




$.fn.precificar = function() { var bebida = this; bebida.on('click', 'button', function() { var preco = bebida.data('preco'); var detalhes = $('<p>Preco: ' + preco + '</p>'); $(this).hide(); bebida.append(detalhes); }); };




$.fn.precificar = function() { !

var bebida = this; bebida.on('click', 'button', function() { var preco = bebida.data('preco'); var detalhes = $('<p>Preco: ' + preco + '</p>'); $(this).hide(); bebida.append(detalhes); }); !

};

this.each(function () {

});



Plugins com parâmetros$(document).ready(function () { $('.bebida').precificar({ dias:5 }); });

$.fn.precificar = function(opcoes) { … var preco = bebida.data('preco'); var detalhes = $(‘<p>Preco:' + opcoes.dias + ' drinks por ‘ + opcoes.dias * preco + '</p>');

e se fosse necessário parâmetros com valores default?



Parâmetros opcionais$(document).ready(function () { $('.bebida').precificar({ dias:5 }); });

$(document).ready(function () { $(‘.bebida').precificar(); });

com ou sem parâmetros

$.fn.precificar = function(opcoes) { …



Parâmetros opcionais com $.extendCombina os objetos$.extend(target[, objeto1, objeton]);

$.extend({ dias: 3 }, { preco: 5 }); { dias: 3, preco: 5 }

$.extend({ dias: 3 }, {}); { dias: 3 }

$.extend({ dias: 3 }, { dias: 5 }); { dias: 3 }

a forma de configurar um valor default



Adicionando o parâmetro opcional

$.fn.precificar = function (opcoes) { this.each(function () { var bebida = $(this); console.log(bebida); bebida.on('click.precificar', 'button', function () { var preco = bebida.data('preco'); … }); }); };




$.fn.precificar = function (opcoes) { this.each(function () { var bebida = $(this); console.log(bebida); bebida.on('click.precificar', 'button', function () { var preco = bebida.data('preco'); … }); }); };

var configuracoes = $.extend({dias: 3}, opcoes);




$.fn.precificar = function (opcoes) { this.each(function () { var bebida = $(this); var configuracoes = $.extend({dias: 3}, opcoes); bebida.on('click.precificar', 'button', function () { var preco = bebida.data('preco'); var detalhes = $('<p>Preco:' + configuracoes.dias + ' drinks por ' + configuracoes.dias * preco + '</p>'); $(this).hide(); bebida.append(detalhes); }); }); };



Refatorando para parâmetros

112




$.fn.precificar = function (opcoes) { this.each(function () { var bebida = $(this); var config = $.extend({dias: 3}, opcoes); bebida.on('click.precificar', 'button', function () { var preco = bebida.data('preco'); var detalhes = $('<p>Preco:' + config.dias + ' drinks por ' + config.dias * preco + '</p>'); $(this).hide(); bebida.append(detalhes); }); }); };



Adicionando o parâmetro opcional$.fn.precificar = function (opcoes) { this.each(function () { !

var config = $.extend({ dias: 3, bebida: $(this), preco: $(this).data(‘preco') botao: $(this).find(‘button') }, opcoes); config.bebida.on('click.precificar', 'button', function () { var detalhes = $('<p>Preco:' + config.dias + ' drinks por ' + config.dias * config.preco + '</p>'); config.botao.hide(); config.bebida.append(detalhes); }); }); };

config.dias

config.bebida

config.preco

config.botao



Mais um botão


jquery 2

Software

eduardo mendes

requisio ajax success

s executa quando

utilizando uma requisio

jquery e css

requisio abortada timeout

executa aps

requisio com sucesso