How to Do Paginated Control Case / Swictch

Navigation
0

Okay, the question is this - I'm developing a new personal project, and you need to do the Previous | Next used in the base Switch/Case , I'm trying to give life to the numbers . Shows it as Active .

On the subject, everything is really visual. The idea here is actually going from one element span to another, when you click on one of the Previous or Next buttons, putting it > tag <span>..</span> in evidence (highlighted) of the others.

Code 

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>


  

You know what this is, a Paging Effect is what I try to do (only the visual part, aesthetic). Which I'm trying to create with Switch/Case

     

Note that this Switch/Case has been implemented a click counter for direction to Back or Next .


Now what I need right now is to know highlight only one by one of the others, as you click on the button layout of control.

    
asked by anonymous 30.06.2016 / 08:32

2 answers

1

With switch may not be the best way, but if you are sure there will always be 5 pages you can do this: 

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>
    
30.06.2016 / 12:41
1

Diego, you can even do with switch , but it follows a more general solution.

To do this, all button of the pagination must contain the data-panel property that must inform the page to be displayed, either directly through a number, or through an instruction (such as next or prev ).

The pages themselves will have another attribute, data-index , this will store a number with the index of the page.

Below is a complete example, with 10 pages and 4 actions (first, previous, next and last). 

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>
    
30.06.2016 / 14:42
Error: RuntimeException when trying to mount test case Click on the screen and change the values of the variables