jquery分页插件—Smart Paginator

 

今天推荐一个分页工具条插件:Smart Paginator,这个插件用途还是很广的,而且可定制性相当不错,目前内置三种颜色,有需要的话,可以自己改css定制颜色。

1.如何使用Smart Paginator?

1.1引入以下几个文件
1 <script src="jquery-1.4.4.min.js" type="text/javascript"></script>
2 <script src="smartpaginator.js" type="text/javascript"></script>
3 <link href="smartpaginator.css" rel="stylesheet" type="text/css" />
1.2添加一个分页容器层
1 <div id="smart-paginator" > </div>
1.3初始化插件
1 $(document).ready(function() {
2 $('#smart-paginator').smartpaginator({ totalrecords: 100, recordsperpage: 10, initval:0 , next: 'Next', prev: 'Prev', first: 'First', last: 'Last', theme: 'green', onchange: onChange
3
4 });
5
6 function onChange(newPageValue) {
7 alert(newPageValue);
8 }

可以看到想要初始化Smart Paginator,需要配置不少参数,接下来来看下这些主要参数的含义。

2.参数说明

3.自定义颜色模板

 1 .green
2 {
3 background-color: #4f7305;
4 }
5 .green.normal
6 {
7 background-color: #588500;
8 color: White;
9 border: solid 1px #5f9000;
10 }
11 .green.active
12 {
13 background-color: #344C00;
14 color: #F8EB00;
15 border: solid 1px #5f9000;
16 }
17 .green .btn
18 {
19 background-color: #588500;
20 color: White;
21 border: solid 1px #5f9000;
22 }








posted on 2012-03-23 21:55  咖啡戏  阅读(1424)  评论(0)    收藏  举报