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

栏目分类：其他代码   发布日期：2014-09-06   来源：互联网   浏览次数：次

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.   border: 1px solid #CDCDCD; 
4.   border-radius: 3px; } 
5.  
6. .pagination a { 
7.   display: block; 
8.   float: left; 
9.   width: 20px; 
10.   height: 20px; 
11.   outline: none; 
12.   border-right: 1px solid #CDCDCD; 
13.   border-left: 1px solid #CDCDCD; 
14.   color: #555555; 
15.   vertical-align: middle; 
16.   text-align: center; 
17.   text-decoration: none; 
18.   font-weight: bold; 
19.   font-size: 16px; 
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 top, left 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 top, left 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 top, left 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.     cursor: default; } 
38.  
39. .pagination a:first-child { 
40.   border: none; 
41.   border-radius: 2px 0 0 2px; } 
42.  
43. .pagination a:last-child { 
44.   border: none; 
45.   border-radius: 0 2px 2px 0; } 
46.  
47. .pagination input { 
48.   float: left; 
49.   margin: 0; 
50.   padding: 0; 
51.   width: 120px; 
52.   height: 20px; 
53.   outline: none; 
54.   border: none; 
55.   vertical-align: middle; 
56.   text-align: center; } 
57.  
58. /* gigantic class for demo purposes */ 
59. .gigantic.pagination { 
60.   margin: 30px 0; } 
61.  
62. .gigantic.pagination a { 
63.   height: 60px; 
64.   width: 60px; 
65.   font-size: 50px; 
66.   line-height: 50px; } 
67.  
68. .gigantic.pagination input { 
69.   width: 300px; 
70.   height: 60px; 
71.   font-size: 30px; } 

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