2

我意识到 SO 上已经存在大量与进度条相关的问题。我浏览了其中许多，但无法正常工作。

简而言之，我正在 JSP 中开发一个页面，并且我想在引导程序中使用动画进度条来显示在对数据进行调用时。

HTML：

<div class="row-fluid">
   <div class="span12 progress progress-striped active">
      <div id="searchAnimation" class="bar" hidden="true"></div>
   </div>
</div>

Servlet（不确定这部分是否相关，但比抱歉更安全）：

@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException
{
    //String that gets returned as HTML
    StringBuilder returnAsHTML = new StringBuilder();

    //See if the class is closed, has a lab, or is just a regular class
    for(ClassInfo classes : springClassListings)
    {
        //Class is full, style accordingly
        if(classes.getSectionMeetingInfo().contentEquals("LEC") && classes.getSectionEnrolled().contentEquals("0"))
        {
            returnAsHTML.append(closedClass(classes));
        }
        else if(classes.getSectionMeetingInfo().contentEquals("LAB")) //These are labs, style accordingly
        {
            returnAsHTML.append(labClass(classes));
        }
        else //These are normal classes without lab components
        {
            returnAsHTML.append(openClass(classes));
        }

    }

    response.setContentType("text/html");
    response.setCharacterEncoding("UTF-8");
    response.getWriter().write(returnAsHTML.toString());
}

还有我的脚本：

//Serves up the data
$('#btnData').click(function() {

    //THIS IS THE PROGRESS BAR
    $("#searchAnimation").show();

    $.get('daoServlet', function(responseText) {
        $('#dataDisp').html(responseText);
    });

});

我明白了，就获取数据而言，进度条的宽度百分比是 $.get 调用所在的位置。我只是不明白该怎么做。

PS - 我知道我在 doGet 中的 for/if 是一个讨厌的反模式，我只是还没有想出解决它的方法。

4

1 回答 1

1

我认为 ajaxStart 在事件中包含百分比信息。但即使它不可能以 100% 隐藏/显示动画进度条以指示其正在加载某些内容。

ajaxStart 文档 http://api.jquery.com/ajaxStart/

进度文档 http://twitter.github.com/bootstrap/components.html#progress

如果你加载的东西不使用 ajax，你也可以抛出 ajaxStart 事件来触发你的组件隐藏和显示。

于 2013-01-17T19:49:33.617 回答