2012-09-24 18:35 41306 1 发表评论

有点时间没有写新的文章了，跑外地逛了几天，然后回来做项目做了快1星期，总算是告一段落了。抽空把项目用到的比较有意思的抽出来整理下

作者地址：http://tympanus.net/codrops/2009/11/17/jpaginate-a-fancy-jquery-pagination-plugin/

调用

$(elementID).paginate();

属性

count: 总页数。

start: 开始显示的页数

display: 数字，分页条显示的页数

border: 是否显示页码的边框。(true/false)

border_color: 设置边框的颜色

text_color: 设置页码的颜色

background_color: 设置页码的背景色

border_hover_color: 设置鼠标滑向页码时页码边框的颜色。

text_hover_color: 设置鼠标滑向页码时页码的颜色。

background_hover_color: 设置鼠标滑向页码时页码背景的颜色。

images: 是否显示页码导航箭头（方向箭头）(true/false)

mouse: 设置为'press'时，当鼠标滑向导航箭头时，页码随之滚动；设置为'slide'时，鼠标单击一次导航箭头页码滚动一次。

onChange: 当单击页码时，回调函数.

演示

官方DEMO：官方DEMO

AJAX分页示例

1.引入jquery，jPaginate和css

<link rel="stylesheet" type="text/css" href="css/style.css" />
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.paginate.js"></script>

2. 必须先初始显示当前页面的内容

<div id="pagecontent">
		这是第一页
</div>
<div id="digg"></div>

3. 为该分页加载配置

$(function(){
    $("#digg").paginate({
        count         : 3,	//总页数，一般从数据库中取出所有条数然后除以要展示的条数，在用ceil取整
        start         : 1,
        display     : 5,
        border                    : true,
        border_color            : '#ddd',
        text_color              : '#aaa',
        background_color        : '#f0f0f0',
        border_hover_color        : '#35455E',
        text_hover_color          : '#35455E',
        background_hover_color    : '#f0f0f0',
        images                    : false,
        mouse                    : 'press',
        onChange                 : function(page){	//回调 ajax像page页面请求数据
                                    $("#pagecontent").load("page.php?page="+page);
                                 }
    });
	$("#pagecontent").ajaxSend(function(event, request, settings){	//数据加载前显示loading图片
        $(this).html('<div class="loading"><img src="images/loading.gif" /></div>');
    });
});

4. page页面，查询到改页面要展示的内容，然后反馈给index页

<?php
echo '这是ajax调用的第'.$_GET['page'].'页';
?>

ajax分页演示

ajax分页演示：Demo

下载

AJAX分页示例下载

• 2012/10/04 -- jQuery+PHP+AJAX实现待进度条文件即时上传

[付费工具][9月10号更新]ZenCart产品页meta信息自动生成工具meta2products_v1.5 jQuery+PHP+AJAX实现待进度条文件即时上传