jQuery 翻頁組件yunm.pager.js實(shí)現(xiàn)div局部刷新的思路
前端的翻頁插件有很多,bootstrap的翻頁界面看起來就不錯,做起來也易于上手,但應(yīng)用于項(xiàng)目中的翻頁實(shí)現(xiàn)還有有幾個難點(diǎn),分別是:
如何封裝一個翻頁插件,如題中的yunm.pager.js。
涉及到的div局部刷新該如何做。
在沒給大家介紹正文之前,先給大家展示下效果圖,如果感覺還不錯,請繼續(xù)往下閱讀:
翻頁的總體流程涉及到的知識點(diǎn)很多,這篇文章我們也主要來關(guān)注以上兩點(diǎn),其余的內(nèi)容,請自悟。
一、如何定義局部刷新的div
翻頁時(shí),我們一般只會刷新頁面中涉及到翻頁的父級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,建議為當(dāng)前頁面唯一,如果頁面有多個翻頁組件。
為div創(chuàng)建一個同級的form表單。
rel屬性指向div,表明該form表單屬于support_deal_page的div。
target屬性為turnPageForm,表明該form為翻頁組件的form。
action 參數(shù)自然不可或缺。
定義page 的input標(biāo)簽,表明為第一頁。
定義rows的input標(biāo)簽,表明每頁有顯示兩個。
div定義完后,頁面加載load的時(shí)候,我們就可以請求后臺(后臺怎么處理數(shù)據(jù),這里就不羅嗦了),獲取第一頁的分頁數(shù)據(jù)。
// 根據(jù)form的target屬性,獲取需要分頁的div,發(fā)起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的id url : $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請求獲取成功后,將局部刷新的內(nèi)容放到div中 $this.html(response).initUI(); if ($.isFunction(op.callback)) op.callback(response); } }, error : YUNM.ajaxError, statusCode : { 503 : function(xhr, ajaxOptions, thrownError) { $.showErr("服務(wù)器當(dāng)前負(fù)載過大或者正在維護(hù)!" || thrownError); } } }); },
頁面首次加載的時(shí)候,我們將第一頁的數(shù)據(jù)放到div中,這一步也很簡單。
二、封裝翻頁組件 yunm.pager.js
完成第一步后,如何將翻頁組件封裝,就成為接下來的關(guān)鍵步驟了。
(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"); } }); // 綁定點(diǎn)擊事件,主要傳遞第幾頁 function _bindEvent($target, pageNum, rel) { $target.bind("click", { pageNum : pageNum }, function(event) { yunmPageBreak({ rel : rel, data : { pageNum : event.data.pageNum } }); event.preventDefault(); }); } }, }); // 翻頁的必要參數(shù) var Pager = function(opts) { this.opts = $.extend({ rel : "", // 用于局部刷新div id號 totalCount : 0,//總數(shù) numPerPage : 10,// 默認(rèn)顯示10個 currentPage : 1,// 當(dāng)前頁 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); }, // 當(dāng)前頁 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() { } }); } } }
三、翻頁應(yīng)用
封裝了翻頁組件后,我們來看看怎么使用。
<%@ 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的時(shí)候我們將其轉(zhuǎn)換為pager組件。
將其關(guān)鍵屬性rel、totalCount、numPerPage、currentPage進(jìn)行賦值。
頁面load的時(shí)候進(jìn)行轉(zhuǎn)換:
$("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") }); });
以上所述是小編給大家介紹的jQuery 翻頁組件yunm.pager.js實(shí)現(xiàn)div局部刷新的思路,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
jQuery控制DIV層實(shí)現(xiàn)由大到小,由遠(yuǎn)及近動畫變化效果
這篇文章主要介紹了jQuery控制DIV層實(shí)現(xiàn)由大到小,由遠(yuǎn)及近動畫變化效果,涉及jQuery基于animate方法操作頁面元素實(shí)現(xiàn)動畫漸變效果的相關(guān)技巧,需要的朋友可以參考下2015-10-10jQuery創(chuàng)建及操作xml格式數(shù)據(jù)示例
這篇文章主要介紹了jQuery創(chuàng)建及操作xml格式數(shù)據(jù),結(jié)合實(shí)例形式分析了jQuery針對xml格式數(shù)據(jù)的創(chuàng)建、解析、添加等相關(guān)操作技巧,需要的朋友可以參考下2018-05-05jQuery簡單tab切換效果實(shí)現(xiàn)方法
這篇文章主要介紹了jQuery簡單tab切換效果實(shí)現(xiàn)方法,涉及jQuery鏈?zhǔn)讲僮骷氨闅v的技巧,是非常具有實(shí)用價(jià)值的功能,需要的朋友可以參考下2015-04-04jsonp跨域請求數(shù)據(jù)實(shí)現(xiàn)手機(jī)號碼查詢實(shí)例分析
這篇文章主要介紹了jsonp跨域請求數(shù)據(jù)實(shí)現(xiàn)手機(jī)號碼查詢的方法,結(jié)合實(shí)例形式較為詳細(xì)的分析了jsonp跨域請求數(shù)據(jù)的原理與查詢號碼的應(yīng)用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-12-12在IE 瀏覽器中使用 jquery的fadeIn() 效果 英文字符字體加粗
在IE 瀏覽器中使用 jquery的fadeIn() 效果 英文字符字體加粗的解決方法分享。2011-06-06jQuery實(shí)現(xiàn)的滑塊滑動導(dǎo)航效果示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的滑塊滑動導(dǎo)航效果,涉及jQuery事件響應(yīng)及頁面元素動態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-06-06jquery 模式對話框終極版實(shí)現(xiàn)代碼
今天終于有時(shí)間把我以前寫的一個jQuery插件進(jìn)行整理,改進(jìn)。這是一個模擬“模式對話框”的插件,該模式對話框共有三種皮膚,紅、綠、藍(lán)。2009-09-09