四、翻页应用
封装了翻页组件后,我们来看看怎么使用。
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <%@ include file="/components/common/taglib.jsp"%> <c:forEach items="${deal_page}" var="deal"> ${deal.name} </c:forEach> <div class="turnPagePager" rel="${param.rel}" totalCount="${vo.totalCount}" numPerPage="${vo.numPerPage}" currentPage="${vo.pageNum}">
指定div的class为turnPagePager,页面load的时候我们将其转换为pager组件。
将其关键属性rel、totalCount、numPerPage、currentPage进行赋值。
页面load的时候进行转换:
$("div.turnPagePager", $p).each(function() { var $this = $(this); $this.pager({ rel : $this.attr("rel"), totalCount : $this.attr("totalCount"), numPerPage : $this.attr("numPerPage"), currentPage : $this.attr("currentPage") }); });
五、分局两侧的翻页效果
在一的效果图中,你可以看到第二种效果图,就是翻页处于内容的两侧,这个也很常见,那么我们来看一下实现方法。
①、yunm.pager.js(新)
(function($) { $.fn.extend({ pager : function(opts) { // 可参照bootstrap的翻页,为了获得前一页和后一页的按钮组件 var setting = { prev$ : "li.previous", next$ : "li.next", }; return this.each(function() { var $this = $(this); var pc = new Pager(opts); if (pc.type() == 'arrow') { $this.html('<ul class="pager">' + '<li class="previous left"><a href="#"></a></li>' + '<li class="next right"><a href="#"></a></li>' + '</ul>'); } else { // 参照bootstrap翻页 $this.html('<ul class="pager">' + '<li class="previous"><a href="#">← 前一页</a></li>' + '<li class="next"><a href="#">后一页 →</a></li>' + '</ul>'); } var $prev = $this.find(setting.prev$); var $next = $this.find(setting.next$); if (pc.hasPrev()) { // 如果有前一页,绑定前一页事件 _bindEvent($prev, pc.getCurrentPage() - 1, pc.rel()); } else { // 否则置灰 if (pc.type() == 'arrow') { $prev.addClass("hide"); } else { $prev.addClass("disabled"); } } if (pc.hasNext()) { _bindEvent($next, pc.getCurrentPage() + 1, pc.rel()); } else { if (pc.type() == 'arrow') { $next.addClass("hide"); } else $next.addClass("disabled"); } }); // 绑定点击事件,主要传递第几页 function _bindEvent($target, pageNum, rel) { $target.bind("click", { pageNum : pageNum }, function(event) { yunmPageBreak({ rel : rel, data : { pageNum : event.data.pageNum } }); event.preventDefault(); }); } }, }); // 翻页的必要参数 var Pager = function(opts) { this.opts = $.extend({ type : "",// 指定翻页的类型,目前支持两种样式 rel : "", // 用于局部刷新div id号 totalCount : 0,// 总数 numPerPage : 10,// 默认显示10个 currentPage : 1,// 当前页 callback : function() { return false; } }, opts); }; $.extend(Pager.prototype, { rel : function() { return this.opts.rel; }, type : function() { return this.opts.type; }, // 每页显示多少个 numPages : function() { return Math.ceil(this.opts.totalCount / this.opts.numPerPage); }, // 当前页 getCurrentPage : function() { var currentPage = parseInt(this.opts.currentPage); if (isNaN(currentPage)) return 1; return currentPage; }, // 能否向前翻页 hasPrev : function() { return this.getCurrentPage() > 1; }, // 向后翻页 hasNext : function() { return this.getCurrentPage() < this.numPages(); } }); })(jQuery);
②、翻页应用(新)
<div class="col-md-12 arrow_page">
<div class="turnPagePager" type="arrow" rel="${param.rel}" totalCount="${vo.totalCount}" numPerPage="${vo.numPerPage}"
currentPage="${vo.pageNum}"></div>
</div>
外层的div上加上arrow_page式样。
里层的div加上type属性,指定为arrow。
页面加载时:
$("div.turnPagePager", $p).each(function() { var $this = $(this); YUNM.debug('div.turnPagePager' + $this.selector); $this.pager({ rel : $this.attr("rel"), type : $this.attr("type"),// 设置type totalCount : $this.attr("totalCount"), numPerPage : $this.attr("numPerPage"), currentPage : $this.attr("currentPage") }); });
新增式样
.arrow_page { padding: 0; height: 0; } .pager .left>a,.pager .left>a:HOVER,.pager .right>a,.pager .right>a:HOVER { cursor: pointer; height: 70px; width: 30px; background: url(../../assets/images/bgs_2.png) no-repeat; display: block; border: none; } .pager .left>a:HOVER { background-position: 0 -70px; } .pager .right>a:HOVER { background-position: 0 -210px; } .pager .left>a { left: -30px; position: absolute; top: -240px; } .pager .right>a { background-position: 0 -140px; position: absolute; right: -30px; top: -240px; }