ul/ol列表分页

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ul/ol列表分页相关的知识,希望对你有一定的参考价值。

Quick plugin to paginate a liste.
  1. /*
  2.  * Use:
  3.  * <script src="lib/jquery.pagination.js"></script>
  4.  * $('#mylist').pagination();
  5.  */
  6.  
  7. (function($) {
  8. $.fn.pagination = function(options) {
  9.  
  10. var defaults = {
  11. nbParPage: 5,
  12. pageAffichee: 1,
  13. positionNav: "top" /* top, bottom, or both */
  14. };
  15. var options = $.extend(defaults, options);
  16.  
  17. return this.each(function() {
  18.  
  19. var selecteur = $(this);
  20.  
  21. function afficherElements (numPremier, nbParPage, nbElements) {
  22. selecteur.children('li').hide();
  23. var no = numPremier;
  24. while ( no < (numPremier + nbParPage) && no <= (nbElements-1) ) {
  25. selecteur.children('li:nth-child(' + (no+1) + ')').fadeIn(250);
  26. no += 1;
  27. }
  28. }
  29.  
  30. var nbElements = selecteur.children('li').length;
  31. var nbPages = Math.floor(nbElements / options.nbParPage);
  32. if (nbElements % options.nbParPage > 0)
  33. nbPages += 1;
  34. var pageAffichee = 1;
  35.  
  36. if ( nbPages > 1 ) {
  37. // Ecriture de la pagination
  38. var pageNav = '<div class="nav"><ul>';
  39. var i;
  40. for ( i = 1; i <= nbPages; i++) {
  41. if (i == options.pageAffichee)
  42. pageNav += '<li class="pageEnCours"><a id="navpage' + i + '" href="#">' + i + '</a></li>';
  43. else
  44. pageNav += '<li><a id="navpage' + i + '" href="#">' + i + '</a></li>';
  45. }
  46. pageNav += '</ul></div>';
  47. switch ( options.positionNav ) {
  48. case "bottom":
  49. selecteur.after( pageNav );
  50. break;
  51. case "both":
  52. selecteur.before( pageNav );
  53. selecteur.after( pageNav );
  54. break;
  55. default:
  56. selecteur.before( pageNav );
  57. }
  58.  
  59. // Affichage de la premiere page au chargement
  60. var numPremierElement = ( options.nbParPage * options.pageAffichee ) - options.nbParPage;
  61. afficherElements(numPremierElement, options.nbParPage, nbElements);
  62.  
  63. // Gestion du clic sur un numero de page
  64. $('.nav ul li a').click(function() {
  65. var pageAffichee = parseInt($(this).attr("id").substring(12));
  66.  
  67. $(this).parent('li').siblings('.pageEnCours').removeClass('pageEnCours');
  68. //selecteur.find('li.pageEnCours').removeClass('pageEnCours');
  69. $(this).parent('li').addClass('pageEnCours');
  70.  
  71. var numPremierElement = ( options.nbParPage * pageAffichee ) - options.nbParPage;
  72. afficherElements(numPremierElement, options.nbParPage, nbElements);
  73.  
  74. return false;
  75. });
  76.  
  77. }
  78. });
  79. }
  80. })(jQuery);

以上是关于ul/ol列表分页的主要内容,如果未能解决你的问题,请参考以下文章

HTML知识点总结之ul,ol,li标签

ul ol di三者区别

重要的事情说三遍:列表 ul / ol 等是块级元素,是块级元素,块级元素

关键自li,em,dl,ul,ol,footer,header,nav,aside,article

分页组件

div span ul ol 区别