Question

在编程时我是新手，所以也许这是在公园散步给你们。我想创建一个带有进度条的.gif图像的div，只有在按下按钮时才能显示div，例如将一些设置保存到数据库。

此功能将在GUI中的任何位置使用，并且每次对数据库进行查询时都会使用此功能。我正在使用jQuery UI进行编码，我建议使用ajaxStart（）和ajaxStop（），但不能完全弄清楚如何正确使用它。下面的代码只是我写的一些代码，以为我会以某种方式走上正轨，但很可能不是。

-----脚本-----

$(document).ready(function(){
      $("#progressContainer").ajaxStart(function(){
        $(this).html("<img src='ajax-progressbar.gif' />");
      });
      $(".clickForProgressBar").click(function(){
        $("#progressContainer").load("");
      });
    });

----- HTML -----

<button class="clickForProgressBar">Click here</button>
<div id="progressContainer"></div>

如果有人可以试着给我一些关于如何进行的提示，我将永远感激不尽。如果你完全可以理解我的意思;）

Answer 1

以下是一种方法的概述。

首先，由于这是一个应用程序范围的策略，因此请创建一个Ajax包装器并将该包装器用于所有调用。

接下来，在包装器中，在向服务器发出实际调用之前显示图像。

最后，当呼叫返回时（出于任何原因），在继续之前隐藏图像。

要记住的一个问题是您希望如何处理图像容器。例如，如果它将在div标签中（如上所述），您可能希望在调用过程中传递div标签的id，以确保不同的div标签或放置仍然有效。或者，您可以使用弹出内容的模态窗口并显示图像。这将节省你必须使用div标签，而不对页面的布局做任何假设，虽然它可能更加突兀（这可能是一件好事，取决于你在做什么）。

如何使用ajaxStart和ajaxStop显示/隐藏带有进度条的div？

1 个答案: