ajaxify-html5.js by balupton : https://github.com/browserstate/ajaxify

次のシナリオを満たすために、この素​​晴らしいスクリプトを変更する必要があります。

ページの一部のリンクはコンテンツを 1 つの div にロードしてからスクロールする必要があり、ページの他のリンクはコンテンツを別の div にロードしてからスクロールする必要があります。

ajaxify-html5 スクリプトには、特定のクラスのリンクをブロックする機能が既に備わっています。その機能を利用して 2 つに分割できれば、準備は万端です (つまり、一部のリンクには class .go-to-divA を配置し、他のリンクには .go-to-divB を配置します)。

Balupton の ajaxify gist を使用しています: https://github.com/browserstate/ajaxify

私のホームページには、サムなどの投稿のリンクが含まれています。投稿のコンテンツはajaxコンテナに読み込まれています。そのため、ホームページのコンテンツはページにとどまり、他のコンテンツはコンテナdivに読み込まれます。

ホームページにいて、投稿リンクをクリックすると、投稿のコンテンツがコンテナーに問題なく読み込まれます。ブラウザーの戻るボタンを押すと、ホームページがコンテナーに読み込まれるため、ホームページのコンテンツが 2 つの異なる div に含まれます。コンテナへのロードからホームページを除外することは可能ですか? 誰もこれを以前にやったことがありますか？

大規模な Razor プロジェクトでAjaxifyの深いところに飛び込む前に、MVC4/Razor テストベッド アプリを作成して試してみるのが最善だと思いました。

再現:

1. VS 2012 で標準の MVC4/Razor Web アプリケーションを作成

2. 必要な JQuery アドイン ファイルを追加しました (Razor プロジェクト テンプレートには既定で JQuery 1.8.2 が既に含まれています)。

これを BundleConfig.RegisterBundles に追加しました

注: 簡単にアップグレードできるように、すべてのアドインの名前を MS 標準の ~/scripts/addinname-9.9.9.js 形式に変更します

Views/Shared/_Layout.cshtml の下部に 1 行追加

Web アプリを実行すると、ホームページは正常に (予想どおり) 表示されますが、連絡先ページはモバイル スタイルを使用して表示されます。これを確認するために、そのメディア セレクターでボディを黄色にしました。確かに、Ajax 化された (動的に読み込まれた) About ページが表示されます。

これらの CSS スタイルは、次のセレクター内の CSS で定義されます。

@media only screen and (max-width: 850px)

ページのサイズを変更するか、ブラウザを更新すると、ページは自動的に修正されます。

メディアセレクターは解像度に依存することを意図しているため、これが可能であることに驚いています。ブラウザー ウィンドウは常に 850 ピクセルを超えるため、モバイル スタイルはまったく表示されません。

実際の質問は次のとおりです。

さらなる混乱を避けるために、実際の質問は次のとおりです。画面が指定された最小サイズよりも大きい場合でも、メディアフィルターセレクターがトリガーされる理由を知る必要がありますか?

アップデート：

以下の標準 MVC4/Razor CSS モバイル スタイル セクションを最小限に減らしましたが、問題はまだ存在します。を削除した場合float: none、問題は発生しません。

フロントページの最後の投稿にページネーションを追加したいのですが、失敗し続けています..! 私のコード:

「もっと...」ボタンをajax化したので、ページネーションについても同じことをしたいと思います:)私の悪い英語で申し訳ありません...

ここでの主な違いは何ですか？Ajaxify は pjax よりもはるかに軽量に見えます。wordpress で非常に一般的なプラグインであることは知っていますが、通常の Web サイトへの実装に関する適切なドキュメントを見つけるのは難しいと思います。

Pjax は非常に重いようですが、Ajaxify と同じことを行いますか?

私は基本的に、ウェブサイトのページをナビゲートするときにトランジション フェードアウト/イン効果を持たせ、SEO とナビゲーションの目的で history.js を利用したいと考えています。これら2つの主な違いと、何を使用するのが最適かを誰かが説明してもらえますか?

Ajaxify: https://github.com/browserstate/ajaxify

Pjax: https://github.com/defunkt/jquery-pjax

クライアントのいくつかのページでサブメニューを ajaxify しようとしています。現在、セットアップしたローカルホスト サイトでテストしています。

これらは、私が取り組んでいる実際のサイトのページです。commonwealthskybar.com/menus/のフード メニューと、 commonwealthskybar.com / about / のページの下にある従業員セクション

contentSelector を #guts に変更し、$menu セクションを '.menuLeft,.menuRight' に変更して、ajax 化するフード メニュー用に変更しようとした次のコードを見つけました。

試してみたところ、フードメニューでうまく機能しました。ただし、メイン メニューにも影響があり、ページにコードが表示されることになりました。

サブメニューのみが JavaScript を呼び出すようにするには、どのような変更を加える必要がありますか?

どんな助けでも大歓迎です。

コンテンツを動的にロードするために、Wordpress ベースの Web サイトでBrowser State/ajaxify Gist ( https://github.com/browserstate ) を使用しました。私が直面している問題は、コンテンツが動的に読み込まれるときに Google DFP 広告が読み込まれないことです。

広告は以前は正常に機能していたので、何が問題なのか正確にはわかりません。簡単なことを見落としているのでしょうか、それとも追加の手順を実行する必要がありますか?