Heim > Artikel > Backend-Entwicklung > Bootstrap implementiert den Umblättereffekt

Bootstrap implementiert den Umblättereffekt

小云云Original: 2017-12-07 15:56:432688Durchsuche

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>

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"%>

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;
 });
 });
});

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);
  }
 });
 }
}

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;
}

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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Zusammenfassung der automatischen Lade- und Namespace-Anwendungen von PHPNächster Artikel：Zusammenfassung der automatischen Lade- und Namespace-Anwendungen von PHP

In Verbindung stehende Artikel

Mehr sehen