Upload
superkibaratao-kibaratao
View
140
Download
8
Embed Size (px)
DESCRIPTION
montagem de site comobox
Citation preview
Como carregar contedo sob demanda usando jQuery30 de dezembro de 2011porYuri MalheirosSites como o Facebook e o Orkut usam um efeito muito interessante de carregamento de contedo de acordo com a posio da barra de rolagem.O site carrega apenas uma parte dos dados e, medida que o usurio vai descendo a barra de rolagem, o site se encarrega de pegar mais dados no servidor para exibir.O efeito no complicado de fazer, alm de ser muito til, pois o servidor no precisar carregar todos os dados de uma s vez.Para fazer isso, utilizaremos o JQuery.Vamos utilizar o cdigo HTML abaixo, os estilos foram colocados direto no cdigo apenas para fins didticos, no faam isso.
yLog Scroll Tutorial
Ao abrir esse HTML no navegador, aparecer uma lista de itens com uma barra de rolagem.O que queremos que, ao rolar a barra at o fim, novos itens apaream.Para carregar contedo dessa forma, usa-se AJAX, nada muito complicado, mas a maior dvida como saber se a barra chegou ao final.Primeiro importe o JQuery, adicione a linha abaixo entre as tags . uma boa prtica import-lo direto do Google. Existe um evento chamado scroll, nome mais bvio impossvel.Vamos us-lo para fazer algo quando a barra for rolada.Adicione esse cdigo logo abaixo da linha que importa o JQuery. $(document). ready(function() { $("#content"). scroll(function() { //fazer algo aqui }); });.Com os mtodos scrollTop() e height(), possvel saber o quanto foi rolado e a altura da div, mas essa no a altura total, ela a altura apenas do que est sendo exibido.Para saber o tamanho total da div, necessrio usar a propriedade .scrollHeight.Com esses trs valores, possvel fazer o clculo para saber se a rolagem chegou ao fim.O quanto foi rolado, somado altura de exibio da div, ser igual ao tamanho total da div quando a barra de rolagem chegar ao final.No cdigo, isso seria:$(this).scrollTop() + $(this).height() == $(this).get(0).scrollHeight..Atualizando nosso script: $(document). ready(function() { $("#content"). scroll(function() { if ($(this). scrollTop() + $(this). height() == $(this). get(0). scrollHeight) { // a rolagem chegou ao fim, fazer algo aqui. } }); });.Dentro do if voc s precisa usar AJAX para pegar os dados do servidor. Ficaria algo mais ou menos assim: $(document). ready(function() { $("#content"). scroll(function() { if ($(this). scrollTop() + $(this). height() == $(this). get(0). scrollHeight) { $. ajax({ type: "post", url: "/maisitems/", success: function(data) { //manipula os dados $("#content ul"). append("" + item + ""); }, error: function() { } }); } }); });.O cdigo completo do HTML + Javascript fica assim: yLog Scroll Tutorial $(document).ready(function() { $("#content").scroll(function() { if ($(this).scrollTop() + $(this).height() == $(this).get(0).scrollHeight) { console.log("fim"); $("#content ul").append("item x");
$.ajax({ type: "post", url: "/maisitems/", success: function(data) { //manipula os dados $("#content ul").append("" + item + ""); }, error: function() { } }); } }); });
Espero que tenham gostado dessa dica.Se necessrio, gravem esse cdigo final, ele pode ser til.