Les exemples de cet article décrivent l'utilisation de l'outil de pagination js. Partagez-le avec tout le monde pour votre référence. La méthode de mise en œuvre spécifique est la suivante :
partie du code js :
/**
* Pagination js
*/
varPage ;
(fonction(){
var Page = {version :"1.0",auteur :"liuxingmi"} ;
var showPage = 9;
Page.navigation = function(divId, totalRecord, totalPage, currentPage, func){
var nav = '';
$("#" divId).html(nav);
} ;
Cette.Page = Page;
})();
partie css :
débordement : caché ;
marge :0 0 0 25px ;
remplissage : 10px 10px 6px 150px
bordure supérieure : 1px solide #c8c8c8 ;
_zoom:1;
aligner le texte : centre ;
}
.pagination *{
display:inline;
flotter:gauche
marge : 0 ;
remplissage : 0 ;
taille de police : 12px ;
}
.pagination je{
float:aucun;
padding-right:1px;
}
.currentPage b{
float:aucun;
couleur :#f00 ;
}
.pagination li{
style de liste : aucun ;
marge :0 5px ;
}
.pagination li li{
position : relative ;
marge :-2px 0 0 ;
famille de polices : Arial, Helvetica, sans-serif
}
.firstPage a,.previousPage a,.nextPage a,.lastPage a{
débordement : caché ;
hauteur:0;
retrait de texte : -9999em ;
border-top:8px solide #fff;
border-bottom:8px solide #fff
}
.pagination li li a{
marge :0 1px ;
remplissage :0 4px ;
bordure : 3px double #fff ;
couleur de la bordure : #eee ;
arrière-plan :#eee ;
couleur : #06f ;
décoration de texte : aucune ;
}
.pagination li li a:hover{
arrière-plan :#f60 ;
couleur de la bordure :#fff;
couleur de la bordure :#f60 ;
couleur :#fff;
}
li.firstPage{
marge gauche : 40px ;
bordure gauche : 3px solide #06f ;
}
.firstPage a,.previousPage a{
bordure droite : 12px solide #06f
}
.firstPage a:hover,.previousPage a:hover{
couleur de la bordure droite : #f60 ;
}
.nextPage a,.lastPage a{
bordure gauche : 12px solide #06f
}
.nextPage a:hover,.lastPage a:hover{
bordure-gauche-couleur :#f60 ;
}
.pagination li.lastPage{
bordure droite : 3px solide #06f ;
}
.pagination li li.currentState a{
position : relative ;
marge : -1px 3px ;
remplissage : 1px 4px ;
bordure : 3px double #fff ;
couleur de la bordure :#f60 ;
arrière-plan :#f60 ;
couleur :#fff;
}
.pagination li.currentState,.currentState a,.currentState a:hover{
couleur de la bordure :#fff #ccc;
curseur : par défaut ;
}
/*Fin du style de pagination*/
Méthode d'appel :
Copier le code
Le code est le suivant :
Page.navigation("pageNav", 100, 10, 1, "xxxList");
J'espère que cet article sera utile à la conception de la programmation JavaScript de chacun.