Scripts
jQuery pagination
Een pagination script om je pagina's mooi te laten overvloeien. Als je dit script wilt gebruiken moet je wel de jquery library gedownload hebben. Deze kan je hier downloaden. Als er foutjes zijn, graag melden en als er dingen beter kunnen ook graag zeggen :) Ik heb het intussen in een functie gezet. De pagination.js moet je dan uiteraard aanroepen in de header. Voorbeeld: Klikje
Voorbeeld Pagina
[code]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Pagination</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="pagination.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
</head>
<body>
<a href="javascript:void(0);" class="link1">1</a> | <a href="javascript:void(0);" class="link2">2</a> | <a href="javascript:void(0);" class="link3">3</a>
<div id="pagina1"> <h2>pagina 1</h2> </div>
<div id="pagina2"> <h2>pagina 2</h2> </div>
<div id="pagina3"> <h2>pagina 3</h2> </div>
<span id="fnpl"></span>
<script type="text/javascript">
pagination(3, 500, "Volgende", "Vorige", "Laatste", "Eerste", 1);
</script>
</body>
</html>
[/code]Gebruik
Voor gebruik moet je het doen zoals hieronder:
[code]
// De pagina nummers:
<a href="javascript:void(0);" class="link1">1</a> | <a href="javascript:void(0);" class="link2">2</a> | <a href="javascript:void(0);" class="link3">3</a>
// Met de pagina inhoud in divjes
<div id="pagina1"> dit is pagina 1 </div>
<div id="pagina2"> en dit is pagina 2 </div>
<div id="pagina3"> met dit als pagina 3 </div>
// Hierin komen dan de andere knoppen:
<span id="fnpl"></span>
// met aanroepen van de functie:
<script type="text/javascript">
pagination(3); // Hier zet je dan neer hoeveel pagina divjes je hebt
</script>
[/code]
Dus elke div op deze manier is een pagina.
Ook zijn er meer opties beschikbaar in de functie.
voorbeeld:
[code]
<script type="text/javascript">
pagination(3, 500, "Volgende", "Vorige", "Laatste", "Eerste", 1);
</script>
[/code]
met van links naar rechts:
- Het aantal pagina's
- De tijd van het uit/in faden in miliseconden, ook kan je hier "slow" en "fast" voor in de plek zetten (met "")
- De tekst van de volgende knop
- De tekst van de vorige knop
- De tekst van de eerste pagina knop
- De tekst van de laatste pagina knop
- De pagina die de gebruiker als eerste te zien krijgt
Als je een plekje open wilt laten voor de standaard waarde kan je er gewoon "null" voor in de plek zetten (zonder "")pagination.js
[code]
function pagination(paginas, fadetijd, nexttext, prevtext, lasttext, firsttext, currentpage)
{
// De vaiabelen instellen
paginas = paginas || alert("Het aantal pagina's moet ingesteld zijn.");
fadetijd = fadetijd || 500;
nexttext = nexttext || '[>]';
prevtext = prevtext || '[<]';
lasttext = lasttext || '[>>]';
firsttext = firsttext || '[<<]';
currentpage = currentpage || 1;
var next = (currentpage+1); // Wat de volgende pagina moet worden
var prev = (currentpage-1); // Wat de vorige pagina is
// Hierin wordt de span van hierboven gevult met de linkjes
$("#fnpl").html('<a href="javascript:void(0);" id="first" >' + firsttext + '</a> <a href="javascript:void(0);" id="prev" >' + prevtext + '</a> <a href="javascript:void(0);" id="next" >' + nexttext + '</a> <a href="javascript:void(0);" id="last" >' + lasttext + '</a>');
for(n=1; n<=paginas; n++)
{
if(n == currentpage) // Of de pagina divjes wel of niet moeten laten zien worden
{
$("#pagina"+n).css("display","block");
}
else
{
$("#pagina"+n).css("display","none");
}
$(".link"+n).click(function() // Als er op een linkje met een pagina nummer wordt geklikt
{
var kliknummer = $(this).attr("class").replace("link", ""); // Het nummer uit de classname halen
$("#pagina"+currentpage).fadeOut(fadetijd); // De momentele pagina laten verdwijnen
$("#pagina"+kliknummer).delay(fadetijd).fadeIn(fadetijd).delay(100); // En de nieuwe laten komen
currentpage = kliknummer; // De nieuwe pagina defineren
prev = (currentpage-1); // De vorige pagina defineren
next = (currentpage+1); // En de volgende pagina defineren
});
}
$("#next").click(function() // Als er op de [volgende] knop wordt gedrukt
{
if(currentpage != paginas) // En het niet de laatste pagina is
{
$("#pagina"+currentpage).fadeOut(fadetijd); // De oude pagina laten verdwijnen
$("#pagina"+next).delay(fadetijd).fadeIn(fadetijd).delay(100); // De nieuwe laten komen
currentpage++; // Hier weer de nieuwe pagine, vorige pagina en de volgende pagina defineren
prev = (currentpage-1);
next = (currentpage+1);
}
});
$("#prev").click(function() // Als er op de [vorige] knop wordt gedrukt
{
if(currentpage != 1) // En het niet de eerste pagina is
{
$("#pagina"+currentpage).fadeOut(fadetijd); // De oude pagina wederom laten verdwijnen
$("#pagina"+prev).delay(fadetijd).fadeIn(fadetijd).delay(100); // De nieuwe weer laten zien
currentpage--; // Weer de standaard vars instellen
prev = (currentpage-1);
next = (currentpage+1);
}
});
$("#first").click(function() // Als er op de [Eerste] knop wordt gedrukt
{
$("#pagina"+currentpage).fadeOut(fadetijd); // Oude pagina laten verdwijnen
$("#pagina1").delay(fadetijd).fadeIn(fadetijd).delay(100); //nieuwe laten komen
currentpage=1; // En weer de vars instellen
prev = (currentpage-1);
next = (currentpage+1);
});
$("#last").click(function() // Als laatste kijken of er op de [Laatste] knop wordt gedrukt
{
$("#pagina"+currentpage).fadeOut(fadetijd); // Oude pagina verdwijnen
$("#pagina"+paginas).delay(fadetijd).fadeIn(fadetijd).delay(100); // Nieuwe laten komen
currentpage=paginas; // En voor de laatste keer de vars instellen
prev = (currentpage-1);
next = (currentpage+1);
});
}
[/code]
Reacties
0