zoukankan      html  css  js  c++  java
  • 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>

    效果示例如下:

                              

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

  • 相关阅读:
    在Ubuntu下安装TensorFlow-gpu版本
    ubuntu安装和卸载软件命令
    Window7通过Anaconda安装Tensorflow
    Kaggle Titanic Data Science Solutions
    CNN、RNN和DNN的区别
    卷积神经网络介绍
    大数据随想
    golang omitempty 总结
    LeetCode 856 递归思路详解
    安装Nginx的各种报错的解决
  • 原文地址:https://www.cnblogs.com/SK1995/p/5803199.html
Copyright © 2011-2022 走看看