jQuery: jPaginate

W tym wpisie postaram się pokazać jak przy użyciu jQuery i pluginu jPaginate wykonać ciekawe stronicowanie na waszej stronie WWW.

Zanim rozpoczniemy pracę musimy ściągnąć bibliotekę jQuery, o ile z niej jeszcze nie korzystasz. Najnowszą wersję możesz pobrać stąd. Oprócz tego musimy pobrać plugin jPaginate, co możesz zrobić klikając w ten link.

To do dzieła! Rozpoczynamy od umieszczenia w sekcji <head>…</head> odwołań do ściągniętej biblioteki:

1
2
3
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/jquery.paginate.js"></script>
<link href="css/jPaginate.css" rel="stylesheet" type="text/css" />

Następnie musimy stworzyć element, najlepiej diva w miejscu, gdzie którym będziemy wyświetlać paginację, np.

1
<div id="pages"></div>

Wywołanie pluginu jPaginate jest bardzo proste, w sekcji <head>…</head> musimy umieścić kod:

1
2
3
4
5
<script type="text/javascript">
$(document).ready(function() {
    $("#pages").paginate();
});
</script>

Oczywiście plugin można dowolnie konfigurować, jeżeli umieścimy poniższy kod:

1
2
3
4
5
6
7
8
9
10
11
12
[cc lang="html"]
<script type="text/javascript">
$(document).ready(function() {
   $("#pages").paginate({
    count : 5,
    start : 2,
    onChange : function(npage){
       location = 'news.php?page=' + npage;
    }
   });
});
</script>

to liczba stron wynosi pięć, a plugin będzie domyślnie zaznaczał drugą stronę jako aktywną. Ponadto w momencie kliknięcia, na którąkolwiek stronę np. oznaczoną numerem pięć skrypt będzie nas przekierowywał na adres news.php?page=5

Pozostaje opcje możliwe do skonfigurowania:
display – ile stron ma domyślnie pokazywać
border (true/false) – czy numery stron mają być obramowane
border_color – kolor obramowania
text_color – kolor numerów stron
background_color – kolor tła
border_hover_color – kolor obramowania, gdy kursor myszki najedzie na dany numer strony
text_hover_color – kolor numeru strony po najechaniu na niego kursorem myszki
background_hover_color – kolor tła, gdy kursor myszki najedzie na dany numer strony
images (true/false) – czy strzałki pokazujące poprzednie i następne strony mają być obrazkami

Demo możecie znaleźć pod tym adresem

Leave a Comment

five × 3 =