Scribd Logo
Importer

Bienvenue sur Scribd !

  • Carregar conteúdo jQuery

    Transféré par

    SuperKibaratão Kibaratão
    333 vues3 pages
    O documento explica como usar jQuery para carregar conteúdo dinamicamente à medida que o usuário desce a página. Detecta-se quando a barra de rolagem chega ao fim e faz uma requisição AJAX para obter mais itens, adicionando-os à lista. Utiliza-se evento "scroll" com cálculos de altura para verificar quando carregar conteúdo adicional.

    Description originale:

    montagem de site comobox

    Titre original

    Como Carregar Conteúdo Sob Demanda Usando JQuery

    Copyright

    © © All Rights Reserved

    Formats disponibles

    DOCX, PDF, TXT ou lisez en ligne sur Scribd

    Avez-vous trouvé ce document utile ?

    Ce contenu est-il inapproprié ?

    Signaler ce document
    O documento explica como usar jQuery para carregar conteúdo dinamicamente à medida que o usuário desce a página. Detecta-se quando a barra de rolagem chega ao fim e faz uma requisição AJAX para obter mais itens, adicionando-os à lista. Utiliza-se evento "scroll" com cálculos de altura para verificar quando carregar conteúdo adicional.

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme DOCX, PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    333 vues3 pages

    Carregar conteúdo jQuery

    Transféré par

    SuperKibaratão Kibaratão
    O documento explica como usar jQuery para carregar conteúdo dinamicamente à medida que o usuário desce a página. Detecta-se quando a barra de rolagem chega ao fim e faz uma requisição AJAX para obter mais itens, adicionando-os à lista. Utiliza-se evento "scroll" com cálculos de altura para verificar quando carregar conteúdo adicional.

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme DOCX, PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    sur 3

    Como carregar contedo sob demanda

    usando jQuery
    30 de dezembro de 2011 por Yuri Malheiros
    Sites 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.
    <html>
    <head>
    <title>yLog Scroll Tutorial</title>
    </head>
    <body>
    <div id="content" style="width:120; height:100px; overflow-y:scroll;">
    <ul style="position: relative;">
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    <li>item 4</li>
    <li>item 5</li>
    <li>item 6</li>
    <li>item 7</li>
    <li>item 8</li>
    <li>item 9</li>
    <li>item 10</li>
    </ul>
    </div>
    </body>
    </html>
    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 <head></head>. uma boa prtica import-lo direto
    do Google.
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"
    type="text/javascript"></script>
    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.
    <script>
    $(document). ready(function() {
    $("#content"). scroll(function() {
    //fazer algo aqui
    });
    });
    </script>.
    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:
    <script>
    $(document). ready(function() {
    $("#content"). scroll(function() {
    if ($(this). scrollTop() + $(this). height() == $(this). get(0). scrollHeight) {
    // a rolagem chegou ao fim, fazer algo aqui.
    }
    });
    });
    </script>.
    Dentro do if voc s precisa usar AJAX para pegar os dados do servidor. Ficaria algo mais ou menos assim:
    <script>
    $(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("<li>" + item + "</li>");
    },
    error: function() {
    }
    });
    }
    });
    });
    </script>.
    O cdigo completo do HTML + Javascript fica assim:
    <html>
    <head>
    <title>yLog Scroll Tutorial</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"
    type="text/javascript"></script>
    <script>
    $(document).ready(function() {
    $("#content").scroll(function() {
    if ($(this).scrollTop() + $(this).height() == $(this).get(0).scrollHeight) {
    console.log("fim");
    $("#content ul").append("<li>item x</li>");
    $.ajax({
    type: "post",
    url: "/maisitems/",
    success: function(data) {
    //manipula os dados
    $("#content ul").append("<li>" + item + "</li>");
    },
    error: function() {
    }
    });
    }
    });

    });
    </script>
    </head>
    <body>
    <div id="content" style="width:120; height:100px; overflow-y:scroll;">
    <ul style="position: relative;">
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    <li>item 4</li>
    <li>item 5</li>
    <li>item 6</li>
    <li>item 7</li>
    <li>item 8</li>
    <li>item 9</li>
    <li>item 10</li>
    </ul>
    </div>
    </body>
    </html>
    Espero que tenham gostado dessa dica. Se necessrio, gravem esse cdigo final, ele pode ser til.

    Vous aimerez peut-être aussi