欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery 翻頁組件yunm.pager.js實(shí)現(xiàn)div局部刷新的思路

 更新時(shí)間:2016年08月11日 11:41:51   作者:沉默王二  
翻頁插件有很多種,做出來的效果都非常棒,這篇文章主要介紹了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="#">&larr; 前一頁</a></li>' + '<li class="next"><a href="#">后一頁 &rarr;</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)文章

最新評論