0

我正在使用 rails 发出搜索请求。

搜索表单的操作是某个路径 "/results/foo" .. 它会命中一个控制器，该控制器对输入进行一些验证，然后如果搜索文本是干净的，则重定向到 "results/foobar"。

<h1 class="center"><progress style="font-size: 160%;">Loading...</progress></h1>

我想显示上面的 html .. 并且只显示上面的 html（在视图中或通过 jquery），直到“results/foobar”完全加载。

有没有办法在最后一页完成加载之前显示这样的进度条动画（html）？

更多细节（搜索栏页面有这样的代码）：

<form class="form-search" action="/s_results/iscan" method="POST">
        <div class="input-append">
            <input name="searchtext" type="text" class="span4 search-query" placeholder="Type number here...">
            <button type="submit" class="btn">
                <i class="icon-search"></i>
                Search
            </button>
        </div>
    </form>
4

2 回答 2

0

在这种情况下，您所做的是保持一个完整的窗口占据您的内容的 div，而您的数据在后台加载http://jsfiddle.net/basarat/qfrJE/：

.busyPanel {
    /* absolute position all over */
    position: absolute;
    top: 1px;
    bottom: 1px;
    left: 1px;
    right: 1px;
    /* Remove any defaults */
    border: none;
    margin: 0;
    padding: 0;
    /* Make sure it stays on top */
    z-index: 2500;
    /* any image */
    background: grey;
    /* initial visibility */
    display: visible;
}

然后在加载完成后将其删除：

$(".busyPanel").fadeOut('slow');
于 2013-04-09T01:37:25.390 回答
0

您最好的选择是在单击显示您的表单条目的链接时使用一些 JS，div然后在您的请求处理时它将出现在屏幕上，一旦搜索完成并呈现您的新页面，它将是走了。

-- html
<div class="progress">Loading...</div>

-- css
.progress { display: none; }

-- js
$('#search').click(function() {
  $('.progress').show();
  window.location.href = 'foo';
});

请参阅JSFiddle，简单易行。

于 2013-04-09T01:48:27.623 回答