Bootstrap はページめくり効果を実装します-PHPチュートリアル-php.cn

ホームページ

バックエンド開発

PHPチュートリアル

Bootstrap はページめくり効果を実装します

小云云

Dec 07, 2017 pm 03:56 PM

bootstrap成し遂げる効果

Twitter の Bootstrap は、非常に人気のあるフロントエンドフレームワークです。 Bootstrap は HTML、CSS、JavaScript に基づいており、シンプルかつ柔軟で、Web 開発を高速化します。この記事では主にページめくり効果を実現するための Bootstrap を詳しく紹介しますので、興味のある方は参考にしてください。

利点:

部分更新をサポートします。
リストである限り、このコンポーネントをロードできます。
動的データバインディングをサポートします。
もちろん、これは非常にシンプルで実用的です。

レンダリング

最後のページ:

Bootstrap はページめくり効果を実装します

最初のページ:

実装

①、ページめくりコンポーネントのレイアウト

<%@ 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 : どのページ
rel: どのPのIDを更新するか
urlParas: その他のパラメータ

②、ページめくりコンポーネントを呼び出します

<!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: ページ数
totalPage: 総ページ数
rel: 部分更新のID
urlParas: その他のパラメータ、いいえ

③、ページめくりイベント

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

ページが読み込まれたら、ページめくりのタグを取得し、ページめくり関数を読み込みます。
部分更新を取得するには、pageNumを渡す必要があります
。この場所は将来的に改善する必要があります。ID経由で取得するのは良くないようです。
追加パラメータ urlParas を渡します
最後に、既存のイベントからのタグを防ぎます。

/**
 * 翻页
 * 
 * @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);
  }
 });
 }
}

このコードの文字列もわかりやすいです
ajaxリクエストのパラメータデータを取得します
ajaxUrl メソッドについては、私の Ajax 部分リフレッシュについての記事を参照してください。このような部分リフレッシュは依然として非常に実用的だと思います。

この時点でフロントの内容はOKですが、次に何が必要ですか？当然、jfinal側でのデータ取得です。

④、ページネーションデータの取得

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は当然、優れたページめくり機能paginateメソッドを提供します。
対応するデータを返すだけで済みます。

関連する推奨事項:

ブートストラップテーブルの処理方法ページングのサーバー側処理

PHP+SQLServerのページめくり効果を探して、その対処方法

HTML5ページを簡単に作成する回転効果テキスト効果

以上がBootstrap はページめくり効果を実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

PHPはユーザーのセッションをどのように識別しますか？May 01, 2025 am 12:23 AM

phpidentifiesauser'ssessionsingsinssessionCookiesIds.1）whensession_start（）iscalled、phpgeneratesauniquesidstoredsored incoookienadphpsessidontheuser'sbrowser.2）thisidallowsphptortorieSessiondatadata fromthata

PHPセッションを保護するためのベストプラクティスは何ですか？May 01, 2025 am 12:22 AM

PHPセッションのセキュリティは、次の測定を通じて達成できます。1。session_regenerate_id（）を使用して、ユーザーがログインまたは重要な操作である場合にセッションIDを再生します。 2. HTTPSプロトコルを介して送信セッションIDを暗号化します。 3。Session_Save_Path（）を使用して、セッションデータを保存し、権限を正しく設定するためのSecure Directoryを指定します。

PHPセッションファイルはデフォルトで保存されていますか？May 01, 2025 am 12:15 AM

phpsessionFilesToredInthededirectoryspecifiedBysession.save_path、通常/tmponunix-likesystemsorc：\ windows \ temponwindows.tocustomizethis：1）uesession_save_path（）tosetaCustomdirectory、ensuringit'swritadistradistradistradistradistra

PHPセッションからデータをどのように取得しますか？May 01, 2025 am 12:11 AM

toretrievedatafrompsession、Startthessession withsession_start（）andAccessvariablesshe $ _SessionArray.forexample：1）Startthessession：session_start（）

セッションを使用してショッピングカートを実装するにはどうすればよいですか？May 01, 2025 am 12:10 AM

セッションを使用して効率的なショッピングカートシステムを構築する手順には、次のものがあります。1）セッションの定義と機能を理解します。セッションは、リクエスト全体でユーザーのステータスを維持するために使用されるサーバー側のストレージメカニズムです。 2）ショッピングカートに製品を追加するなど、基本的なセッション管理を実装します。 3）製品の量管理と削除をサポートし、高度な使用状況に拡大します。 4）セッションデータを持続し、安全なセッション識別子を使用することにより、パフォーマンスとセキュリティを最適化します。

PHPでインターフェイスをどのように作成して使用しますか？Apr 30, 2025 pm 03:40 PM

この記事では、PHPでインターフェイスを作成、実装、および使用する方法について説明し、コード組織と保守性の利点に焦点を当てています。

crypt（）とpassword_hash（）の違いは何ですか？Apr 30, 2025 pm 03:39 PM

この記事では、PHPのCrypt（）とpassword_hash（）の違いについて、パスワードハッシュの違いについて説明し、最新のWebアプリケーションの実装、セキュリティ、および適合性に焦点を当てています。

PHPのクロスサイトスクリプト（XSS）をどのように防ぐことができますか？Apr 30, 2025 pm 03:38 PM

記事では、入力検証、出力エンコード、およびOWASP ESAPIやHTML浄化器などのツールを使用して、PHPのクロスサイトスクリプト（XSS）を防止します。

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

SublimeText3 英語版

推奨: Win バージョン、コードプロンプトをサポート!

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

SecLists

SecLists は、セキュリティテスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティテスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティテストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジングペイロード、機密データパターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテストマシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。