0

Ok, a questão é essa - Estou desenvolvendo um novo projeto pessoal, e é necessário fazer o controle dos botões Anterior | Próximo utilizado na base Switch/Case, estou na tentativa a dar vida ao números. Mostra-lo como Ativo.

No tocante, tudo é visual mesmo. A idéia aqui apresentada, é na verdade passar de um elemento span para outro, quando for clicado em um dos botões Anterior ou Próximo, colocando-o número da tag <span>..</span> em evidência(destacado) dos demais.

Código

var conta = 0;

var obj = document.getElementsByTagName('span');

switch(conta.toString()){

case '1': obj.[0].className = 'color'; break;

case '2': obj.[1].className = 'color'; break;

case '3': obj.[2].className = 'color'; break;

case '4': obj.[3].className = 'color'; break;

case '5': obj.[4].className = 'color'; break;

}
if (conta == 5) { conta = alert("No limite!"); }
}
span {
padding: 5px;
cursor: pointer;
}

span.color {
color: white;
font-weight: bold;
background-color: dimgray;
}
<center>

<button onclick="ancora(conta--);">&#171 Anterior</button>

 
<span>1</span>

<span>2</span>

<span>3</span>

<span>4</span>

<span>5</span>


<button onclick="ancora(conta++);">Próximo &#187</button>
</center>


Ja se sabe do que se trata, um Efeito Paginação é o que procuro fazer(somente a parte visual, estética). No qual estou tentando criar com Switch/Case

Observe que este Switch/Case foi implementado um contador de cliques, para direção a tomar Voltar ou Avançar.


Agora o que eu preciso no momento, é saber destacar somente um número por vez dos demais, conforme o clicar na disposição dos botões de controle.

1
  • Na sua função ancora você deve, antes de adicionar a classe (CSS) color, remover essa mesma classe de todos os elementos span.
    – user21448
    Commented 30/06/2016 às 8:23

2 Respostas 2

1

Com switch talvez não seja a melhor maneira, mas se tiver a certeza que vão ser sempre 5 páginas pode fazer assim:

var conta = 1;
function span_click(eleIndex) {
    var eles = document.getElementsByTagName('span');
    for(var i in eles) {
        eles[i].className = '';
    }
    eles[eleIndex].className = 'color';
    conta = eleIndex+1;
}
function ancora(count) {

    conta += count;

    var eles = document.getElementsByTagName('span');
    for(var i in eles) {
        eles[i].className = '';
    }
    switch(conta){

    case 1: 	eles[0].className = 'color'; break;

    case 2: 	eles[1].className = 'color'; break;

    case 3: 	eles[2].className = 'color'; break;

    case 4: 	eles[3].className = 'color'; break;

    case 5: 	eles[4].className = 'color'; break;

    }
    if (conta == eles.length + 1) {
        ancora(-conta+1);
    }
    else if(conta < 1) {
        ancora(eles.length);
    }
}
span {
padding: 5px;
cursor: pointer;
}

span.color {
color: white;
font-weight: bold;
background-color: dimgray;
}
<center>

<button onclick="ancora(-1);">&#171 Anterior</button>

 
<span onclick="span_click(0)" class="color">1</span>

<span onclick="span_click(1)">2</span>

<span onclick="span_click(2)">3</span>

<span onclick="span_click(3)">4</span>

<span onclick="span_click(4)">5</span>


<button onclick="ancora(1);">Próximo &#187</button>

</center>

3
  • Editado, usei getElementsByTagName
    – Miguel
    Commented 30/06/2016 às 14:49
  • Perfeito! Funcionou, em diversos navegadores que abri tanto novos como velhos. Commented 30/06/2016 às 14:55
  • Ainda bem. @DiegoHenriqueGuilherme
    – Miguel
    Commented 30/06/2016 às 14:55
1

Diego, até dá para fazer com switch, mas segue uma solução mais genérica.

para tal, todos os button da paginação deve conter a propriedade data-panel que deve informar a pagina a ser exibida, seja diretamente através de um numero, ou através de uma instrução (como next ou prev).

as paginas em si, terão outro atributo, data-index, este armazenará um numero com o índice da pagina.

abaixo segue um exemplo completo, com 10 paginas e 4 ações (primeira, anterior, proxima e ultima).

var panels = document.querySelectorAll("fieldset[data-index]");
var buttons = document.querySelectorAll("button[data-panel]");

var atual = [].filter.call(panels, function (panel, indice) {
  return !panel.classList.contains("hidden");
})[0];

if (!atual) {
  atual = panels[0];
  atual.classList.remove("hidden");  
}

var indice = parseInt(atual.dataset.index);
var ultimo = [].filter.call(buttons, function (button, indice) {
  return button.dataset.panel == atual.dataset.index;
})[0];


ultimo.classList.add("atual");

var onButtonClick = function (event) {
  switch (event.target.dataset.panel) {
    case "first": indice = 1; break;
    case "prev": if (indice > 1) indice--; break;
    case "next": if (indice < panels.length) indice++; break;
    case "last": indice = panels.length; break;
    default: indice = parseInt(event.target.dataset.panel); break;
  }
  
  atual.classList.add("hidden");
  ultimo.classList.remove("atual");
  
  atual = panels[indice - 1];
  ultimo = [].filter.call(buttons, function (button, indice) {
    return button.dataset.panel == atual.dataset.index;
  })[0];
  
  atual.classList.remove("hidden");
  ultimo.classList.add("atual");
};

[].forEach.call(buttons, function (button, indice) {
  button.addEventListener("click", onButtonClick);
});
.hidden {
  display: none;
}

.atual {
  font-weight: bold;
}
<div id="buttons">
  <button data-panel="first">&lt;&lt;</button>
  <button data-panel="prev">&lt;</button>
  <button data-panel="1">1</button>
  <button data-panel="2">2</button>
  <button data-panel="3">3</button>
  <button data-panel="4">4</button>
  <button data-panel="5">5</button>
  <button data-panel="6">6</button>
  <button data-panel="7">7</button>
  <button data-panel="8">8</button>
  <button data-panel="9">9</button>
  <button data-panel="10">10</button>
  <button data-panel="next">&gt;</button>
  <button data-panel="last">&gt;&gt;</button>
</div>
<div id="panels">
   <fieldset data-index="1" class="hidden">
      <legend>Painel 1</legend>
      <div>
         <p>Amet mattis vulputate enim nulla aliquet. Feugiat pretium nibh ipsum consequat nisl vel pretium lectus. Dictum varius duis at consectetur lorem donec massa sapien faucibus. Sagittis vitae et leo duis ut. Et netus et malesuada fames ac. Urna et pharetra pharetra massa massa ultricies mi quis. Dolor magna eget est lorem ipsum dolor sit amet consectetur. Dictum fusce ut placerat orci nulla pellentesque dignissim enim sit. Amet tellus cras adipiscing enim eu turpis. Nullam non nisi est sit. Mauris augue neque gravida in fermentum et. Tellus orci ac auctor augue mauris augue neque gravida in. Congue nisi vitae suscipit tellus mauris. Enim nec dui nunc mattis enim ut.</p>
      </div>
   </fieldset>
   <fieldset data-index="2" class="hidden">
      <legend>Painel 2</legend>
      <div>
         <p>Id porta nibh venenatis cras sed. Ac ut consequat semper viverra nam. Id nibh tortor id aliquet lectus proin nibh nisl condimentum. Nibh venenatis cras sed felis eget velit aliquet. Ac tortor dignissim convallis aenean et tortor at. Diam volutpat commodo sed egestas egestas fringilla. Erat imperdiet sed euismod nisi porta. Consectetur lorem donec massa sapien faucibus. Nam libero justo laoreet sit amet cursus sit amet. Mus mauris vitae ultricies leo. Arcu felis bibendum ut tristique et egestas quis ipsum suspendisse. Aliquet lectus proin nibh nisl condimentum id. Facilisi morbi tempus iaculis urna id. Sit amet cursus sit amet dictum sit.</p>
      </div>
   </fieldset>
   <fieldset data-index="3" class="hidden">
      <legend>Painel 3</legend>
      <div>
         <p>Ut sem nulla pharetra diam sit amet nisl. Feugiat in fermentum posuere urna nec. Purus sit amet luctus venenatis. Nec nam aliquam sem et tortor consequat id. Adipiscing elit ut aliquam purus sit amet luctus venenatis. Nunc congue nisi vitae suscipit. Faucibus turpis in eu mi bibendum neque egestas congue. Quis imperdiet massa tincidunt nunc pulvinar sapien. Convallis a cras semper auctor neque vitae tempus quam. At ultrices mi tempus imperdiet nulla malesuada pellentesque elit eget.</p>
      </div>
   </fieldset>
   <fieldset data-index="4" class="hidden">
      <legend>Painel 4</legend>
      <div>
         <p>Urna nunc id cursus metus aliquam eleifend. Tristique sollicitudin nibh sit amet commodo nulla facilisi nullam. Viverra aliquet eget sit amet tellus cras adipiscing enim. Convallis convallis tellus id interdum velit laoreet id donec. Eu facilisis sed odio morbi quis commodo odio aenean. Nisi scelerisque eu ultrices vitae auctor eu augue ut. Praesent elementum facilisis leo vel. Tellus in hac habitasse platea. Porttitor leo a diam sollicitudin tempor. Massa sed elementum tempus egestas sed sed risus pretium. Consequat ac felis donec et odio. Urna duis convallis convallis tellus. Habitant morbi tristique senectus et netus et malesuada fames. Arcu dui vivamus arcu felis bibendum. Mi bibendum neque egestas congue quisque egestas diam in. Consectetur adipiscing elit pellentesque habitant morbi tristique senectus.</p>
      </div>
   </fieldset>
   <fieldset data-index="5" class="hidden">
      <legend>Painel 5</legend>
      <div>
         <p>Pellentesque dignissim enim sit amet venenatis. Pellentesque habitant morbi tristique senectus et netus. Ultrices eros in cursus turpis massa. Natoque penatibus et magnis dis. A condimentum vitae sapien pellentesque habitant morbi tristique. Convallis convallis tellus id interdum velit laoreet id. Tempus quam pellentesque nec nam aliquam sem. Sed felis eget velit aliquet sagittis id. Id velit ut tortor pretium. Consequat mauris nunc congue nisi vitae suscipit. Quam id leo in vitae turpis. Consectetur purus ut faucibus pulvinar elementum integer enim. At varius vel pharetra vel turpis nunc eget lorem. Tincidunt id aliquet risus feugiat in ante metus. Volutpat diam ut venenatis tellus in metus vulputate. Vitae purus faucibus ornare suspendisse sed nisi lacus. Malesuada fames ac turpis egestas sed.</p>
      </div>
   </fieldset>
   <fieldset data-index="6" class="hidden">
      <legend>Painel 6</legend>
      <div>
         <p>Nisi lacus sed viverra tellus. In cursus turpis massa tincidunt dui ut ornare. Rhoncus dolor purus non enim. Penatibus et magnis dis parturient montes nascetur ridiculus. Magna fermentum iaculis eu non. Adipiscing elit pellentesque habitant morbi tristique. Viverra mauris in aliquam sem. Nullam non nisi est sit. Eget gravida cum sociis natoque penatibus et magnis. Tortor dignissim convallis aenean et tortor at. Libero justo laoreet sit amet. Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim. Nibh nisl condimentum id venenatis a condimentum vitae. Etiam dignissim diam quis enim lobortis scelerisque fermentum dui faucibus. Tincidunt praesent semper feugiat nibh sed pulvinar. Faucibus scelerisque eleifend donec pretium. Odio aenean sed adipiscing diam donec adipiscing tristique. Non diam phasellus vestibulum lorem sed risus ultricies tristique. Urna nec tincidunt praesent semper feugiat nibh sed pulvinar.</p>
      </div>
   </fieldset>
   <fieldset data-index="7" class="hidden">
      <legend>Painel 7</legend>
      <div>
         <p>Morbi tincidunt augue interdum velit. Sed nisi lacus sed viverra tellus in hac habitasse. Ipsum faucibus vitae aliquet nec ullamcorper. Pharetra convallis posuere morbi leo urna molestie at elementum eu. Auctor elit sed vulputate mi sit amet. Fermentum dui faucibus in ornare quam. Pretium vulputate sapien nec sagittis aliquam. Sed viverra ipsum nunc aliquet. Dolor sit amet consectetur adipiscing elit pellentesque habitant. Sed arcu non odio euismod lacinia at quis risus sed. Amet porttitor eget dolor morbi non. Dignissim convallis aenean et tortor at risus viverra adipiscing. Tempor nec feugiat nisl pretium fusce id velit. Feugiat pretium nibh ipsum consequat nisl vel pretium. Diam volutpat commodo sed egestas. Eget duis at tellus at urna. Sodales neque sodales ut etiam sit amet nisl purus in.</p>
      </div>
   </fieldset>
   <fieldset data-index="8" class="hidden">
      <legend>Painel 8</legend>
      <div>
         <p>Purus ut faucibus pulvinar elementum integer enim neque. Eleifend mi in nulla posuere. Sollicitudin ac orci phasellus egestas tellus rutrum tellus pellentesque eu. Laoreet non curabitur gravida arcu ac tortor dignissim convallis aenean. Ultrices dui sapien eget mi proin sed libero enim sed. Morbi tempus iaculis urna id volutpat. Lorem mollis aliquam ut porttitor leo a diam. Eleifend quam adipiscing vitae proin sagittis nisl rhoncus mattis rhoncus. Pharetra diam sit amet nisl. Sed turpis tincidunt id aliquet risus. Et magnis dis parturient montes. Tincidunt eget nullam non nisi est.</p>
      </div>
   </fieldset>
   <fieldset data-index="9" class="hidden">
      <legend>Painel 9</legend>
      <div>
         <p>Risus sed vulputate odio ut enim blandit. Faucibus purus in massa tempor nec feugiat. Pretium quam vulputate dignissim suspendisse in. Molestie a iaculis at erat. Ut tellus elementum sagittis vitae et leo duis ut. Sit amet consectetur adipiscing elit duis tristique sollicitudin nibh. Ornare quam viverra orci sagittis eu volutpat odio. Adipiscing elit ut aliquam purus sit amet luctus. Dictumst vestibulum rhoncus est pellentesque. Etiam erat velit scelerisque in dictum non consectetur. Lorem dolor sed viverra ipsum. Volutpat blandit aliquam etiam erat velit scelerisque in. Odio pellentesque diam volutpat commodo sed egestas egestas fringilla. Id diam vel quam elementum pulvinar etiam non quam. Aliquam vestibulum morbi blandit cursus risus at ultrices. Varius duis at consectetur lorem donec massa. Facilisis gravida neque convallis a cras semper auctor neque. Tortor vitae purus faucibus ornare suspendisse sed nisi lacus sed. Convallis a cras semper auctor neque. Commodo viverra maecenas accumsan lacus vel facilisis.</p>
      </div>
   </fieldset>
   <fieldset data-index="10" class="hidden">
      <legend>Painel 10</legend>
      <div>
         <p>Morbi tristique senectus et netus et malesuada fames. Habitant morbi tristique senectus et netus. Arcu non odio euismod lacinia at quis. Sed euismod nisi porta lorem. Orci dapibus ultrices in iaculis. Ut enim blandit volutpat maecenas. Purus sit amet luctus venenatis lectus magna. Suspendisse in est ante in nibh mauris cursus mattis. Eleifend quam adipiscing vitae proin sagittis nisl. Iaculis nunc sed augue lacus viverra vitae congue eu. Arcu non odio euismod lacinia at quis risus sed. Aliquam sem fringilla ut morbi tincidunt augue interdum velit euismod. Sed tempus urna et pharetra pharetra massa massa ultricies mi. Semper feugiat nibh sed pulvinar proin. Condimentum mattis pellentesque id nibh tortor.</p>
      </div>
   </fieldset>
</div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .