当前位置:主页 > 特效 > 其他代码 >

可自定义输入页码的jQuery分页插件jqPagination
栏目分类:其他代码   发布日期:2015-09-02   作者:admin    来源:未知

可自定义输入页码的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分页插件的实现过程,应该还算简单,大家可以下载源代码研究。

相关下载
Copyright © 2016-2020 我爱分享网 版权所有   豫ICP备16008703号-1   关于我们 | 广告合作 | 版权声明 | 意见反馈 | 联系方式 | 原创投稿 | 网站地图 |
特效 教程 资源 资讯 福利