pjax を介して更新せずにページをめくる (新しいバージョンの jquery と互換性あり)_jquery
pushState は履歴を操作できる API です。API の概要と使用方法については、こちらを参照してください: http://www.welefen.com/use-ajax-and-pushstate.html
現在、http://github.com/、http://plus.google.com、http://www.welefen.com などの Web サイトが使用されています。
pjax は ajax PushState をカプセル化したもので、pushState テクノロジを非常に便利に使用できるようにします。
キャッシュとローカル ストレージの両方をサポートしており、次回アクセスするときにローカル データを直接読み取ることができます。再度アクセスする必要はありません。
表示方法はアニメーション技術をサポートしており、システム独自のアニメーション方法を使用したり、アニメーション表示方法をカスタマイズしたりできます。
ここでは pjax についてはあまり紹介しません。シンプルで使いやすく、簡単に部分更新を実現し、リンクによるちらつきに別れを告げることができます。
以前 pjax を見てデモを実装したこともあり、メモも書きましたが、jquery 1.9 では live() メソッドが削除され、新しいバージョンの pjax も on() メソッドを使用するように変更されました。最近のプロジェクトでは、新しい使い方を理解した上で、ここにも新たにメモしておきます。
環境:
jquery 1.10.2 ダウンロード
jquery.pjax.js ダウンロード
使用法:
クラス pjaxlink を使用してすべてのリンクを監視し、pjax を使用して、リンク ページ内の ID ToInsert を持つコンテナーのコンテンツを、このページ内の ID コンテンツを持つコンテナーに更新します。コンテンツの取得に 5 秒以上かかる場合は、次の場所に直接ジャンプします:
$(document).pjax('a .pjaxlink' , '#Content', {fragment:'#ToInsert', timeout:5000});
使用例:
元のページはジャンプによってめくられます。pjax を使用して、ページのコンテンツを変更せずにページめくりリンクを監視し、リストのみを更新します (リスト コンテナーがその親ノードであることを確認します)。ページングコンテナ)のコンテンツ。
if ($.support.pjax) {
//すべてのページングコンテナを走査します
$('.pagercontainer').each(function(){
//リストコンテナを取得します
$listcontainer=$(this).parent();
//リストコンテナのIDを取得します
var listcontainerid=$listcontainer.attr('id');
//pjaxを使用してすべてのページングリンクを監視し、更新するpjaxを定義します
$( document).pjax(' #' listcontainerid ' .pagercontainer a', '#' listcontainerid, {fragment:'#' listcontainerid, timeout:5000});
});
$(document).on( 'pjax:send', function() {
// pjax がリクエストを送信すると、読み込み中のアニメーションレイヤーを表示します 'pjax:complete', function () {
//pjax 処理が完了したら、ローディングアニメーションレイヤー
//速度が速すぎるため、ローディングレイヤーがちらつきエクスペリエンスに影響を与えるため、ここに500を追加します ミリ秒遅延
setTimeout(function(){$('#loading').hide( )},500);
});
}

ホットAIツール

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

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

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック











JavaScript文字列置換法とFAQの詳細な説明 この記事では、javaScriptの文字列文字を置き換える2つの方法について説明します:内部JavaScriptコードとWebページの内部HTML。 JavaScriptコード内の文字列を交換します 最も直接的な方法は、置換()メソッドを使用することです。 str = str.replace( "find"、 "置換"); この方法は、最初の一致のみを置き換えます。すべての一致を置き換えるには、正規表現を使用して、グローバルフラグGを追加します。 str = str.replace(/fi

単純なJavaScript関数は、日付が有効かどうかを確認するために使用されます。 関数isvaliddate(s){ var bits = s.split( '/'); var d = new Date(bits [2] '/' bits [1] '/'ビット[0]); return !!(d &&(d.getmonth()1)== bits [1] && d.getdate()== number(bits [0])); } //テスト var

この記事では、jQueryを使用して、DOM要素の内側のマージン値とマージン値、特に外側の縁と要素の内側の縁の特定の位置を取得して設定する方法について説明します。 CSSを使用して要素の内側と外側の縁を設定することは可能ですが、正確な値を取得するのは難しい場合があります。 // 設定 $( "div.header")。css( "margin"、 "10px"); $( "div.header")。css( "padding"、 "10px"); このコードはそうだと思うかもしれません

この記事では、10個の例外的なjQueryタブとアコーディオンについて説明します。 タブとアコーディオンの重要な違いは、コンテンツパネルの表示方法と非表示にあります。これらの10の例を掘り下げましょう。 関連記事:10 jQueryタブプラグイン

ウェブサイトのダイナミズムと視覚的な魅力を高めるために、10の例外的なjQueryプラグインを発見してください!このキュレーションされたコレクションは、画像アニメーションからインタラクティブなギャラリーまで、多様な機能を提供します。これらの強力なツールを探りましょう。 関連投稿: 1

HTTP-Consoleは、HTTPコマンドを実行するためのコマンドラインインターフェイスを提供するノードモジュールです。 Webサーバー、Web Servに対して作成されているかどうかに関係なく、HTTPリクエストで何が起こっているかをデバッグして正確に確認するのに最適です

このチュートリアルでは、カスタムGoogle検索APIをブログまたはWebサイトに統合する方法を示し、標準のWordPressテーマ検索関数よりも洗練された検索エクスペリエンスを提供します。 驚くほど簡単です!検索をyに制限することができます

次のjQueryコードスニペットを使用して、Divコンテンツがコンテナ要素領域を超えたときにスクロールバーを追加できます。 (デモンストレーションはありません、それを直接firebugにコピーしてください) // d =ドキュメント // w =ウィンドウ // $ = jQuery var contentarea = $(this)、 wintop = contentarea.scrolltop()、 docheight = $(d).height()、 winheight = $(w).height()、 divheight = $( '#c
