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 |
Następnie musimy stworzyć element, najlepiej diva w miejscu, gdzie którym będziemy wyświetlać paginację, np.
Wywołanie pluginu jPaginate jest bardzo proste, w sekcji <head>…</head> musimy umieścić kod:
1 2 3 4 5 |
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 |
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
Popularity: unranked