jQuery翻页yunm.pager.js,涉及div局部刷新
前端的翻页插件有很多,bootstrap的翻页界面看起来就不错,做起来也易于上手,但应用于项目中的翻页实现还有有几个难点,分别是:
- 如何封装一个翻页插件,如题中的yunm.pager.js。
- 涉及到的div局部刷新该如何做。
翻页的总体流程涉及到的知识点很多,这篇文章我们也主要来关注以上两点,其余的内容,请自悟。
一、效果1
2、效果2(分局两侧)
二、如何定义局部刷新的div
翻页时,我们一般只会刷新页面中涉及到翻页的父级div,那么该如何定义呢?
<form rel="support_deal_page" target="turnPageForm" action="${ctx}/initI" method="post"><input type="hidden" name="page" value="1" /><input type="hidden" name="rows" value="2" />
</form>
<div id="support_deal_page" class="row"></div>
- 为div定义id,建议为当前页面唯一,如果页面有多个翻页组件。
- 为div创建一个同级的form表单。
- rel属性指向div,表明该form表单属于support_deal_page的div。
- target属性为turnPageForm,表明该form为翻页组件的form。
- action 参数自然不可或缺。
- 定义page 的input标签,表明为第一页。
- 定义rows的input标签,表明每页有显示两个。
div定义完后,页面加载load的时候,我们就可以请求后台(后台怎么处理数据,这里就不罗嗦了),获取第一页的分页数据。
// 根据form的target属性,获取需要分页的div,发起ajax请求。
$("form[target=turnPageForm]", $p).each(function() {var $this = $(this);YUNM.debug('form[target=turnPageForm]' + $this.selector);var rel = $this.attr("rel");var $box = $this.parent().find("#" + rel);if (rel) {$box.ajaxUrl({type : "POST",// 记录div的idurl : $this.attr("action") + "?rel=" + rel,data : $this.serializeArray(),callback : function() {}});}
});ajaxUrl : function(op) {var $this = $(this);$.ajax({type : op.type || 'GET',url : op.url,data : op.data,cache : false,success : function(response) {var json = YUNM.jsonEval(response);if (json[YUNM.keys.statusCode] == YUNM.statusCode.error) {if (json[YUNM.keys.message])$.showErr(json[YUNM.keys.message]);} else {// ajax请求获取成功后,将局部刷新的内容放到div中$this.html(response).initUI();if ($.isFunction(op.callback))op.callback(response);}},error : YUNM.ajaxError,statusCode : {503 : function(xhr, ajaxOptions, thrownError) {$.showErr("服务器当前负载过大或者正在维护!" || thrownError);}}});
},
页面首次加载的时候,我们将第一页的数据放到div中,这一步也很简单。
三、封装翻页组件 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);// 参照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 {// 否则置灰$prev.addClass("disabled");}if (pc.hasNext()) {_bindEvent($next, pc.getCurrentPage() + 1, pc.rel());} 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({rel : "", // 用于局部刷新div id号totalCount : 0,//总数numPerPage : 10,// 默认显示10个currentPage : 1,// 当前页callback : function() {return false;}}, opts);};$.extend(Pager.prototype, {rel : function() {return this.opts.rel;},// 每页显示多少个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);
function yunmPageBreak(options) {var op = $.extend({rel : "",data : {pageNum : "",},callback : null}, options);if (op.rel) {var $box = $("#" + op.rel);// 获得局部刷新的div后,就可以获得同级的form表单var form = $("form[target=turnPageForm]", $box.parent()).get(0);if (form) {// 第几页if (op.data.pageNum)form[YUNM.pageInfo.pageNum].value = op.data.pageNum;$box.ajaxUrl({type : "POST",url : $(form).attr("action") + "?rel=" + op.rel,data : $(form).serializeArray(),callback : function() {}});}}
}
四、翻页应用
封装了翻页组件后,我们来看看怎么使用。
<%@ 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"),// 设置typetotalCount : $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;
}
jQuery翻页yunm.pager.js,涉及div局部刷新相关推荐
- 【简单实现html页面指定某一个div局部刷新】
[简单实现html页面指定某一个div局部刷新] 运用情景 代码实现 运用情景 根据页面功能需要实现具体的某一个div的数据实现实时刷新,显示实时数据流 代码实现 刷新脚本: # 代码直接放在.htm ...
- js 只刷新ajax,JS实现AJAX局部刷新(附代码)
这次给大家带来JS实现AJAX局部刷新(附代码),JS实现AJAX局部刷新的注意事项有哪些,下面就是实战案例,一起来看一下. AJAX即"Asynchronous Javascript An ...
- js ajax局部替换,纯JS实现AJAX局部刷新功能
AJAX即"Asynchronous Javascript And XML"(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术. AJAX = 异步 J ...
- 翻页插件turn.js
老实说翻页turn.js里面的坑非常多,记得那时候项目中踩了几天都踩不完.个人建议谨慎使用 下面就介绍一下最简单的入门吧~ 1.引入文件部分(注意必须要引入jQ,turn.js文件可以上网找,mode ...
- 在线电子书翻页效果 Turn.js
1 html中引入 <script type="text/javascript" src="js/turn.js"></script> ...
- html jquery 翻页效果代码,jquery实现的点击翻书效果代码
本文实例讲述了jquery实现的点击翻书效果代码.分享给大家供大家参考,具体如下: 这是自写一个翻书的Js效果,基于jquery-1.4.2.min.js插件实现,还正在完善中,希望大家能喜欢,我觉得 ...
- html图片翻页效果代码,js图片翻书效果代码分享
这是一款基于javascript实现图片翻书效果代码,图片可以从左右两个方向进行切换,用户还可以自定义对应图片的标题与文字说明,是一款非常实用的图片特效源码. 七夕情人节也可以是表白的神器,放一些回忆 ...
- js实现html图片翻页效果,原生JS实现图片翻书效果
JS实现图片翻书效果-懒人图库 #center { LEFT: 50%; POSITION: absolute; TOP: 50% } #DHTMLBOOK { BACKGROUND: #000; L ...
- 指定DIV局部刷新的简单实现,很简单,但是网上搜到的大部分都很复杂
脚本部分: <script type="text/javascript">$(function () {setInterval(function () {$(" ...
最新文章
- oracle数据同步实例
- 计算机考试函数应用题及答案,计算机等级考试题库,二级C++试题及答案
- Leetcode1690. 石子游戏 VII[C++题解]:带有博弈论的区间dp
- mongo数据库 备份 还原
- oracle expdp ora39070,expdp时出错:ORA-39070: Unable to open the log file.
- unity and MySql
- linux as4,as4是linux系统吗?
- 一个简单的例子带你理解HashMap
- 一种拜占庭共识协议-Byzantine Agreement,Made Trivial
- Win11怎么安装语音包?Win11语音包安装教程
- python将注释写入xml_向xml文档添加注释
- Rexroth力士乐工控机触摸屏维修SYSTEM200概述
- html好看英文字体,js显示漂亮的英文字体实例
- PDF编辑软件哪个好 如何裁剪PDF文件页面
- 海马玩安卓模拟器linux,海马玩模拟器下载安装_海马玩模拟器Droid4X官方下载「手游模拟器」-太平洋下载中心...
- C++求一元二次方程根
- 《算法与数据结构》实验指导书
- Leo第一次练习跆拳道--Leo与跆拳道 1
- 07_Numpy渐变图片的生成
- 教我怎么写连笔字签名胡彦清