全部

  • 全部
  • 源 码
  • 模 板
控制台 文档
九七云梦 > 代码特效 > 其它特效 > 可自定义输入页码的jQuery分页插件jqPagination
详情
价格:3金币 如何获取?
编号:M1787 侵权举报
类型:其它特效
最后更新:2019-01-06
版权声明:该作品由【gdrwa】发布,仅供学习交流,未经书面授权,请勿他用。

可自定义输入页码的jQuery分页插件jqPagination

  • 详情信息
  • 评论

jqPagination是一款基于jQuery的分页插件,这款jQuery分页插件非常实用,不仅可以上下翻页,而且也支持第一页和最后一页的翻页。 另外,jqPagination还支持自定义输入页码来跳转到任意页。jqPagination分页插件的UI外观也比较漂亮,分页按钮不仅大气,而且还 有渐变的颜色,看起来很简单,你可以将jqPagination应用在自己的个人博客上。
下面我们来简单介绍一下jqPagination分页插件实现的代码,主要由HTML代码、CSS代码以及jQuery代码组成,实现也比较简单。

HTML代码:

  1. <div> 

  2.         <a href="#" data-action="first">«a> 

  3.         <a href="#" data-action="previous">a> 

  4.         <input type="text" readonly="readonly" /> 

  5.         <a href="#" data-action="next">a> 

  6.         <a href="#" data-action="last">»a> 

  7. div> 

很简单,在页面上陈列了4个翻页按钮和一个页码输入框。

CSS代码:

  1. .pagination { 

  2.   display: inline-block

  3.   border1px solid #CDCDCD

  4.   border-radius: 3px; } 

  5.  

  6. .pagination a { 

  7.   displayblock

  8.   floatleft

  9.   width20px

  10.   height20px

  11.   outlinenone

  12.   border-right1px solid #CDCDCD

  13.   border-left1px solid #CDCDCD

  14.   color#555555

  15.   vertical-alignmiddle

  16.   text-aligncenter

  17.   text-decorationnone

  18.   font-weightbold

  19.   font-size16px

  20.   font-family: Times, 'Times New Roman', Georgia, Palatino; 

  21.   /* ATTN: need a better font stack */ 

  22.   background-color#f3f3f3

  23.   background-image: -webkit-gradient(linear, left topleft bottom, color-stop(0%#f3f3f3), color-stop(100%, lightgrey)); 

  24.   background-image: -webkit-linear-gradient(#f3f3f3, lightgrey); 

  25.   background-image: linear-gradient(#f3f3f3, lightgrey); } 

  26.   .pagination a:hover, .pagination a:focus, .pagination a:active { 

  27.     background-color#cecece

  28.     background-image: -webkit-gradient(linear, left topleft bottom, color-stop(0%#e4e4e4), color-stop(100%#cecece)); 

  29.     background-image: -webkit-linear-gradient(#e4e4e4#cecece); 

  30.     background-image: linear-gradient(#e4e4e4#cecece); } 

  31.   .pagination a.disabled, .pagination a.disabled:hover, .pagination a.disabled:focus, .pagination a.disabled:active { 

  32.     background-color#f3f3f3

  33.     background-image: -webkit-gradient(linear, left topleft bottom, color-stop(0%#f3f3f3), color-stop(100%, lightgrey)); 

  34.     background-image: -webkit-linear-gradient(#f3f3f3, lightgrey); 

  35.     background-image: linear-gradient(#f3f3f3, lightgrey); 

  36.     color#A8A8A8

  37.     cursordefault; } 

  38.  

  39. .pagination a:first-child { 

  40.   bordernone

  41.   border-radius: 2px 0 0 2px; } 

  42.  

  43. .pagination a:last-child { 

  44.   bordernone

  45.   border-radius: 0 2px 2px 0; } 

  46.  

  47. .pagination input { 

  48.   floatleft

  49.   margin0

  50.   padding0

  51.   width120px

  52.   height20px

  53.   outlinenone

  54.   bordernone

  55.   vertical-alignmiddle

  56.   text-aligncenter; } 

  57.  

  58. /* gigantic class for demo purposes */ 

  59. .gigantic.pagination { 

  60.   margin30px 0; } 

  61.  

  62. .gigantic.pagination a { 

  63.   height60px

  64.   width60px

  65.   font-size50px

  66.   line-height50px; } 

  67.  

  68. .gigantic.pagination input { 

  69.   width300px

  70.   height60px

  71.   font-size30px; } 

以上就是jqPagination分页插件的实现过程,应该还算简单,大家可以下载源代码研究。


说点什么吧
  • 全部评论(0
    还没有评论,快来抢沙发吧!
相关推荐