jPaginate 一个非常好用的分页插件

之前报馆项目用的前端框架easyui,还是用不太习惯,因此换了一个框架,最近为此找分页插件,偶然间看见一个非常好用的分页插件JPaginate

Paginate是基于jquery的分页插件,非常轻量,没有任何侵入性,当然所能做的也就非常少。事实上它的作用仅仅是提供一个好看的分页样式,只提供一个触发事件。但是轻量带来了巨大的灵活性,让它可以提供任何内容的分页服务。

示例代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <meta charset="utf-8" />
    <title>jQuery Pagination - jPaginate</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta name="description" content="jPaginate - jQuery Pagination Plugin" />
    <meta name="keywords" content="jquery, plugin, pagination, fancy" />
    <link rel="stylesheet" type="text/css" href="css/style.css" media="screen"/>
    <script type="text/javascript" src="jquery-1.3.2.js"></script>
    <script src="jquery.paginate.js" type="text/javascript"></script>
<style>
</style>
</head>
<body>
<br><br><br>

<div class="tcdPageCode"></div>

<script>
    $(function(){
        
    $(".tcdPageCode").paginate({
                count         : 50,
                start         : 20,
                display     : 12,
                border                    : true,
                border_color            : '#BEF8B8',
                border_hover_color        : '#68BA64',
                text_color              : '#79B5E3',
                background_color        : 'none',    
                text_hover_color          : '#2573AF',
                background_hover_color    : 'none', 
                images        : false,
                mouse        : 'press',
                onChange:function(p){
                    alert("p="+p);//输出的p为页码
                }
            });
    });
</script>
</body>
</html>

效果示例如下:

                          

怎么样,心动不如行动,一起试试吧

原文地址:https://www.cnblogs.com/SK1995/p/5803199.html