Bootstrap implementiert den Umblättereffekt-PHP-Tutorial-php.cn

Bootstrap implementiert den Umblättereffekt

小云云

Freigeben： 2023-03-17 20:10:02

Original

2742 Leute haben es durchsucht

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:

Bootstrap implementiert den Umblättereffekt

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!