Maison > interface Web > js tutoriel > outil de pagination js example_javascript compétences

outil de pagination js example_javascript compétences

WBOY
Libérer: 2016-05-16 16:17:51
original
1251 Les gens l'ont consulté

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 :

Copier le code Le code est le suivant :
/**
* 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 :

Copier le code Le code est le suivant :/*Le style de saut de page commence*/ .pagination{
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.

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal