jquery分页插件simplePagination.js

男娘i 2022-04-12 10:22 352阅读 0赞

主页及文档

[http://flaviusmatis.github.io/simplePagination.js/][http_flaviusmatis.github.io_simplePagination.js]

下载地址

[https://github.com/flaviusmatis/simplePagination.js][https_github.com_flaviusmatis_simplePagination.js]

效果图：  
![format_png][]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link type="text/css" rel="stylesheet" href="simplePagination.css"/>
    <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="jquery.simplePagination.js"></script>
    <title>分页测试</title>
    <script type="text/javascript">
    $(function() {
        var selector = "#pageDiv";
        $(selector).pagination({
            //items: 100,
            //itemsOnPage: 10,
            pages: 10,
            edges: 1,
            displayedPages: 3,
            cssStyle: 'light-theme',
            prevText: '<',
            nextText: '>',
            onPageClick: changePage
        });
    });
    
    function changePage(index){
    	//alert(index);
    }
    </script>
    </head>
    <body>
    <div id="pageDiv"></div>
    </body>
    </html>

**上一页、下一页变灰**  
**![format_png 1][]**

jquery.simplePagination.js

找到

if (options.classes) {
    	$link.addClass(options.classes);
    }

修改为

if (options.classes) {
    	if("current" == $link.attr("class")){
    		$link.css({"background": "#cccccc", "border-color": "#cccccc"});
    	}
    	$link.addClass(options.classes);
    }

[http_flaviusmatis.github.io_simplePagination.js]: http://flaviusmatis.github.io/simplePagination.js/
[https_github.com_flaviusmatis_simplePagination.js]: https://github.com/flaviusmatis/simplePagination.js
[format_png]: /images/20220412/a7085917fa5448efa1f96130cfb79cb6.png
[format_png 1]: /images/20220412/23b18cfeca9e44659c3f763e5a3b79f4.png