Ajax オペレーションレイヤーオクルージョンページ-jsチュートリアル-php.cn

Ajax オペレーションレイヤーオクルージョンページ

php中世界最好的语言

リリース： 2018-04-02 17:45:21

オリジナル

1248 人が閲覧しました

今回は、Ajax オペレーションレイヤーオクルージョンページについて説明します。Ajax オペレーションレイヤーオクルージョンページの注意事項について、実際のケースを見てみましょう。

前書き

ユーザーが AJAX リクエストを行うとき、リクエストの段階でユーザーの応答が返されずに長時間続くと、ユーザーに錯覚を引き起こすことをすべての開発者は理解する必要があると思います。ユーザーに当社のシステムが「応答しない」と思わせることになります。これはある意味不親切です。

場合によっては、ユーザーが望む結果が得られない場合でもリクエストを継続し、それが予期せぬ結果をもたらす可能性があります。

そのため、AJAX リクエストを行う際には、システムの正しい動作と優れたユーザーエクスペリエンスを確保するために、特定の措置を講じます。

ここで私が使用しているのは、読み込み中の画像を表示し、ユーザーが別のリクエストを行うことができないようにレイヤーをポップアップすることです。

実装方法

HTML部分:

ログイン後にコピー

HTML部分はimgを含むpを配置するだけです。

CSS スタイル:

/*图片加载中p图层，用于遮挡页面*/ .loadingp { position:absolute; text-align:center; left:0px; top:0px; z-index:70; background-color:#000000; opacity: 0.7;/*透明#CCCCCC*/ display:none; } /*加载中图片*/ .loadingp img { position:absolute; left:0px; top:0px; z-index:80; }

ログイン後にコピー

スタイル p と img。

JS コード

//ajax请求过程中，显示加载中图片并显示图层，请求完成隐藏图片 $(function () { //注册ajax加载事件 $("#loading").ajaxStart(function () { //一个p，用来遮挡页面，请求过程中，不可操作页面 var lockwin = $(this); //p占满整个页面 lockwin.css("width", "100%"); lockwin.css("display", "block"); lockwin.css("height", $(window).height() + $(window).scrollTop()); //设置图片居中 $("#loading img").css("display", "block"); $("#loading img").css("left", ($(window).width() - 88) / 2); $("#loading img").css("top", ($(window).height() + $(window).scrollTop()) / 2); }); $("#loading").ajaxStop(function () { //隐藏p var lockwin = $(this); lockwin.css("width", "0"); lockwin.css("display", "none"); lockwin.css("height", "0"); //设置图片隐藏 $("#loading img").css("display", "none"); }); });

ログイン後にコピー

この記事の事例を読んだ後、あなたはその方法をマスターしたと思います。さらにエキサイティングな内容については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

Ajax を使用してジャンプページへのリクエストを投稿する方法

Ajax を使用して人事システムデータに基づいて OA アカウントを追加する方法

以上がAjax オペレーションレイヤーオクルージョンページの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。