Bootstrap von Twitter ist ein sehr beliebtes Front-End-Framework. Bootstrap basiert auf HTML, CSS und JavaScript. Es ist einfach und flexibel und beschleunigt die Webentwicklung. In diesem Artikel wird vor allem Bootstrap vorgestellt, um den Umblättereffekt im Detail zu erzielen. Interessierte Freunde können darauf verweisen.
Vorteile:
Unterstützt die teilweise Aktualisierung;
Solange es sich um eine Liste handelt, kann diese Komponente geladen werden;
Unterstützt die dynamische Datenbindung; 🎜>Natürlich Und absolut einfach und praktisch.
Rendering
Auf der letzten Seite:
Auf der ersten Seite:
Implementieren Sie
①, Layout der Umblätterkomponente
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ include file="/components/common/taglib.jsp"%>
<c:if test="${urlParas == null}">
<c:set var="urlParas" value="" />
</c:if>
<c:if test="${(totalPage > 0) && (currentPage <= totalPage)}">
<c:set var="startPage" value="${currentPage - 4}" />
<c:if test="${startPage < 1}">
<c:set var="startPage" value="1" />
</c:if>
<c:set var="endPage" value="${currentPage + 4}" />
<c:if test="${endPage > totalPage}">
<c:set var="endPage" value="totalPage" />
</c:if>
<nav>
<ul class="pager">
<c:if test="${currentPage <= 8}">
<c:set var="startPage" value="1" />
</c:if>
<c:if test="${(totalPage - currentPage) < 8}">
<c:set var="endPage" value="${totalPage}" />
</c:if>
<c:choose>
<c:when test="${currentPage == 1}">
<li class="previous disabled"><a>
<span aria-hidden="true">←</span>
前一页
</a></li>
</c:when>
<c:otherwise>
<li class="previous"><a href="javascript:;" pageNum="${currentPage - 1}" rel="${rel}" urlParas="${urlParas}">
<span aria-hidden="true">←</span>
前一页
</a></li>
</c:otherwise>
</c:choose>
<c:choose>
<c:when test="${currentPage == totalPage}">
<li class="next disabled"><a>
后一页
<span aria-hidden="true">→</span>
</a></li>
</c:when>
<c:otherwise>
<li class="next"><a href="javascript:;" pageNum="${currentPage + 1}" rel="${rel}" urlParas="${urlParas}">
后一页
<span aria-hidden="true">→</span>
</a></li>
</c:otherwise>
</c:choose>
</ul>
</nav>
</c:if>Nach dem Login kopieren
- pageNum: welche Seite
- rel: welche P-ID aktualisiert werden soll
- urlParas: andere Parameter
②, Seitenwechselkomponente aufrufen
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ include file="/components/common/taglib.jsp"%>
<c:set var="currentPage" value="${dealPage.pageNumber}" />
<c:set var="totalPage" value="${dealPage.totalPage}" />
<c:set var="rel" value="deal_items" />
<c:set var="urlParas" value="" />
<%@ include file="/components/common/paginate.jsp"%>Nach dem Login kopieren
- currentPage: Anzahl der Seiten
- totalPage: Gesamtanzahl der Seiten
- rel: Teilaktualisierungs-P-ID
- urlParas: andere Parameter, noch keine
③, Umblätterereignis
$(function() {
// 翻页组件
$("ul[class=pager] li:not(.disabled) > a", $p).each(function() {
$(this).click(function(event) {
var $this = $(this);
YUNM.debug($this.attr("pageNum") + "、" + $this.attr("rel") + "、" + $this.attr("urlParas"));
var pageNum = $this.attr("pageNum");
// 准备翻页事件
if (pageNum && pageNum.isPositiveInteger()) {
yunmPageBreak({
rel : $this.attr("rel"),
data : {
pageNum : pageNum,
urlParas : $this.attr("urlParas")
}
});
}
event.preventDefault();
return false;
});
});
});Nach dem Login kopieren
- Nachdem die Seite geladen ist, holen Sie sich das Umblätter-Tag und laden es mit der Umblätterfunktion.
- Set pageNum Dies muss übergeben werden
- Dieser Ort muss in Zukunft verbessert werden Es ist nicht gut, es über ID zu bekommen.
- Übergeben Sie zusätzliche Parameter urlParas
- Verhindern Sie endlich, dass das Tag a von vorhandenen Ereignissen ausgeschlossen wird.
/**
* 翻页
*
* @param options
*/
function yunmPageBreak(options) {
var op = $.extend({
rel : "",
data : {
pageNum : "",
numPerPage : "",
orderField : "",
orderDirection : "",
urlParas : ""
},
callback : null
}, options);
var $panel = $("#" + op.rel);
if (op.rel) {
var dataId = $panel.attr("data");
var url = $panel.attr("url");
// 设置p上的其他参数
if (dataId) {
if (dataId.indexOf(",") != -1) {
$.each(dataId.split(","), function(index, id) {
if ($("#" + id) && $("#" + id).val()) {
url = addMoreParamForUrl(url, id, $("#" + id).val());
}
});
} else {
if ($("#" + dataId) && $("#" + dataId).val()) {
url = addMoreParamForUrl(url, dataId, $("#" + dataId).val());
}
}
}
// 局部刷新
$panel.ajaxUrl({
type : "POST",
url : url,
data : op.data,
callback : function(response) {
if ($.isFunction(op.callback))
op.callback(response);
}
});
}
}Nach dem Login kopieren
- Diese Codezeichenfolge ist ebenfalls einfach zu erstellen Verstehe. Holen Sie sich die URL der Ajax-Anfrage
- Rufen Sie die Parameterdaten der Ajax-Anfrage ab
- Bezüglich der AjaxUrl-Methode lesen Sie bitte meinen Vortrag Was die teilweise Aktualisierung von Ajax angeht, denke ich, dass diese Art der teilweisen Aktualisierung immer noch sehr praktisch ist.
Zu diesem Zeitpunkt ist der Inhalt an der Rezeption in Ordnung, was brauchen Sie als nächstes? Natürlich ist es die Datenerfassung auf der jfinal-Seite.
④, Paging-Datenerfassung
public Page<Deals> paginateCreateDealsByUid(int pageNumber, int pageSize, Long uid) {
Page<Deals> deals = paginate(pageNumber, pageSize, "select y.*",
"from ym_dels y where y.uid = ? order by y.opertime desc", uid);
return deals;
}Nach dem Login kopieren
- jfinal hat natürlich viel bereitgestellt Eine gute Funktion zum Umblättern von Seiten ist die Paginierungsmethode.
- Geben Sie einfach die entsprechenden Daten zurück.
Verwandte Empfehlungen:
Wie man mit Bootstrap Table umgeht, serverseitige Paging-Verarbeitung
Bitte übersetzen Sie PHP +SQLServer-Seiteneffekt, wie man damit umgeht
Einfach zu erstellende Texteffekte mit HTML5-Umblättereffekt
Das obige ist der detaillierte Inhalt vonBootstrap implementiert den Umblättereffekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
