jquery分页插件—Smart Paginator

jquery分页插件—Smart Paginator  

2012-02-24 17:26:39|  分类： jQuery |  标签：jquery分页插件   |字号大中小 订阅

1.如何使用Smart Paginator？
1.1引入以下几个文件

<script src="jquery-1.4.4.min.js" type="text/javascript"></script>    <script src="smartpaginator.js" type="text/javascript"></script>    <link href="smartpaginator.css" rel="stylesheet" type="text/css" />

1.2添加一个分页容器层

<div id="smart-paginator" > </div>

1.3初始化插件

$(document).ready(function() {          $('#smart-paginator').smartpaginator({ totalrecords: 100, recordsperpage:   10, initval:0 , next: 'Next', prev: 'Prev', first: 'First', last: 'Last', theme:   'green', onchange: onChange

});         function onChange(newPageValue) {             alert(newPageValue);         }

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

2.参数说明

 

3.自定义颜色模板

.green
{  background-color: #4f7305;
}
.green.normal
{    background-color: #588500;
  color: White;     border: solid 1px #5f9000;
}
.green.active
{     background-color: #344C00;      color: #F8EB00;
  border: solid 1px     #5f9000;
}
.green .btn
{         background-color: #588500;
    color: White;
    border: solid 1px #5f9000;
}