Jump to content
kerven

Preciso de uma javascrip para usar associado a um botão de proximo ou anterior

Recommended Posts

eae pessoal

queria um javascript para associar a um botão.

seria para usar em botoes de próximo e anterior, esse script tem que levar a uma pagina html q está na pasta do html atual

as paginas são numeradas, por exemplo: 0.html, 1.html, 2.html, 3html...

 

eu queria uma variável, que quando estivesse, por exemplo na numero 2.html, o botao "anterior" vá para a 1.html e o botao " próximo" vá para 3.html, 

 

algo do tipo 

 

 Anterior= valor da pagina atual.html - valor da pagina atual -1.html e redirecionar para ela

proximo= valor da pagina atual.html + valor da pagina atual + 1.html e redirecionar para ela

 

Share this post


Link to post
Share on other sites

ai vc vai precisar gravar em um cookie, pois quando carregar a proxima pagina, a memoria do javascript vai ser reiniciada, e as variaveis voltarão ao valor inicial.

 

com um cookie, vc teria essa referência

Share this post


Link to post
Share on other sites

Você pode criar um arquivo JavaScript com o código abaixo:

var paginaAtual = parseInt(window.location.pathname.match(/\/(\d+)\./)[1]); // expressão regular que localiza um nº inteiro entre uma "barra" e um "ponto", por exemplo "/15.html" torna-se apenas "15"
var paginaAnterior = Math.max(0, paginaAtual-1); // calcula qual seria a página anterior, considerando que a menor página disponível será 0.html
var proximaPagina = Math.min(99, paginaAtual+1); // calcula qual seria a próxima página, considerando que a maior página disponível será 99.html

salvá-lo por exemplo com o nome "nav.js" e utilizá-lo da seguinte forma em seus arquivos HTML:

<script src="nav.js"></script>
<a href="javascript:window.location=paginaAnterior+'.html'">Anterior</a>
<a href="javascript:window.location=proximaPagina+'.html'">Próximo</a>

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By adrianno
      Fala pessoal beleza?
      Tenho um problema para resolver,  tenho um sistema em PHP com MySQL, mas preciso melhorar a paginação,  tenho uma 2 lógicas de paginação em mente, uma delas é a que mais se encontra e videos, blogs, postagens  mostrando na web,
       
      onde damos um primeiro select CAMPO from TABELA, contamos  o resultado e temos o total de registros para tratar a quantidade de páginas, limite, quantidade que vai aparecer por página etc,  apos isso damos novamente o select CAMPOS from TABELA limite x, y  de acordo com o que obtivemos na lógica da paginação com a primeira SQL. esta lógica até que funciona, mas, não consegui aplicar ela usando JOIN  agrupando 2 ou mais tabelas, pois ai, eu teria  que fazer esta contagem  lá a primeira SQL, ou seja no fim, teria 2 SQL sendo executadas , uma mais rápida devido ao limit passado, mesmo assim ainda seriam 2 consultas.
      Outras lógica seria dar um SELECT count(CAMPO) from TABELA  seria uma SQL mais rápida,  mas...  se eu tiver um JOIN agrupando dados de uma tabela de categoria + produtos, eu teria que contar o resultado já agrupado das 2.
      Já pensei em executar a consulta normal, retornar o array dos dados, e depois paginar este array  com array_slice, e dividir ele de acordo com a quantidade de páginas e registros de cada.
      Já fiz paginação com JS/AJAX  mas mesmo assim, ainda preciso passar os dados totalizados, consigo uma boa visualização final na interface, mas por tras, sei que o processamento no MYSQL pesa
       
      Lembrando que em cada caso citado, cada vez que alteramos entre as páginas, é novamente executado os calculos.
       
      Alguem tem uma lógica bacana para paginação? de forma que nao fique pesado, lento em uma tabela muito grande?
       
       
       
       
       
       
       
    • By NINO2391
      Bom Glr, Tô Fazendo Um Web Site E Quero Fazer Umas Funções Escondidas Nela!
       
      bom meu objetivo era tipo apertas as tecla do teclado CTRL+A e abrir uma janela flutuante
      <form action=""> <input type="file" name="tag"><br> <input type="submit" value="Submit"> </form> Então vou falar resumidamente: ENTRAVA NO SITE, APERTAVA CTRL+A E APARECIA ESSA JANELA FLUTUANTE!!
       
      Quem Puder Ajudar....Ficaria Mil Agradecido!!!
    • By rgrtorres
      Boa noite galera, fiz um sistema de página, porém quando uso .html para mostrar o resultado no jQuery, ele me retorna apenas um valor, e quando uso outros tipo append, ele me retorna todos os valores que desejo, como resolvo essa questão, não quero usar append.
       
      PHP:
      <?php include '../assets/app/config.php'; $conexao = new Conexao($config); $pagina = (isset($_POST['pagina'])) ? $_POST['pagina'] : 1; $sqlPaginacao = $conexao->conectar()->query("SELECT * FROM noticias"); $total = $sqlPaginacao->num_rows; $qtd = 2; $paginas = ceil($total / $qtd); $inicio = ($qtd * $pagina) - $qtd; $tudo[] = array("paginas" => $paginas); $sql = $conexao->conectar()->query("SELECT * FROM noticias LIMIT $inicio, $qtd"); while($mostra = $sql->fetch_assoc()) {     $tudo[] = array("titulo" => $mostra['titulo']); } echo json_encode($tudo); ?>  
       
       
      jQuery:
      var paginacao = {     atual: 1,     next: function(tipo){         paginacao.atual++         $.ajax({             type: "POST",             url: "paginacao.php?pagina=" + paginacao.atual,             data: {'pagina' : paginacao.atual},             dataType: 'json',             success: function (result) {                 var botao = $(".arrow.next")                 for (var i = 0; i < result.length; i++) {                     var html =     "<article class='news'>";                         html +=        result[i]['titulo'];                         html +=    "</div>";                     $('.all').html(html);                 }                 if(tipo == 'next') {                     $(".arrow.back").removeClass('disabled');                 }                 if(paginacao.atual >= result[0]['paginas']) {                     botao.removeAttr('onclick');                     $(".arrow.next").addClass('disabled');                     $(".arrow.back").removeClass('disabled');                 }else if (paginacao.atual > 1){                     $(".arrow.back").removeClass('disabled');                 }             }         });     },     prev: function(tipo){         paginacao.atual--         $.ajax({             type: "POST",             url: "paginacao.php?pagina=" + paginacao.atual,             data: {'pagina' : paginacao.atual},             dataType: 'json',             success: function (result) {                 var botao = $(".arrow.next")                 botao.attr('onclick', 'paginacao.next()');                 for (var i = 0; i < result.length; i++) {                     var html =     "<article class='news'>";                         html +=        result[i]['titulo'];                         html +=    "</div>";                     $('.all').html(html);                 }                 if(tipo == 'next') {                     $(".arrow.back").removeClass('disabled');                 }                 if (paginacao.atual <= 1) {                     $(".arrow.back").addClass('disabled');                     $(".arrow.next").removeClass('disabled');                 } else {                     $(".arrow.back").removeClass('disabled');                 }             }         });     } }  
    • By Pablo Bernardo
      Gostaria de fazer um botão que levasse o usuário não pra uma página da web, e sim para um aplicativo de seu computador.
      No caso iniciasse o aplicativo do computador ai clicar no botão.
    • By VCastilho
      Bom Dia
      Consegui da seguinte forma, mas com faço para que o código selecionado substitua o antigo?

       
      <!DOCTYPE html> <html> <body> <style> #filtrotopo { background: #484949; } } #h4topo { text-align: center; color: white; font-size: 18px; } #form1 section { display: flex; flex-wrap: wrap; justify-content: center; } h4 { } #form1 section label { display: flex; justify-content: center; align-items: center; margin: 0 10px; /* width: calc(100% / 5); */ color: red; text-align: center; } @media screen and (max-width:768px) { #form1 section label { margin-bottom: 20px; width: 100%; } } </style> <div id="minhaEscolha"></div> <div id = "filtrotopo"> <h4 style="text-align: center;" id="h4topo">Personalize</h4> <form action="#" id="form1"> <section> <label> <button onclick="exemplo1()"> exemplo1</button> </label> <label> <button onclick="exemplo2()"> exemplo2 </button> </label> </section> </form> <br> </div> <div id="teste1" style="display: none;"> <h3>Texto 1</h3> <p>Sou o Texto 1</p> <p>Tenho o nome de Texto 1</p> </div> <script> function exemplo1() { var x = document.getElementById("url"); var y = document.getElementById("minhaEscolha"); y.innerHTML = x.innerHTML; } </script> <script> function exemplo2() { var x = document.getElementById("teste1"); var y = document.getElementById("minhaEscolha"); y.innerHTML = x.innerHTML; } </script> <body> </html>  
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.