Question

我正在使用jquery UI选项卡，并且加载到选项卡的内容位于另一个页面上。所以它是通过ajax加载的。页面加载之间存在一些延迟，在此期间，选项卡内容将加载的部分屏幕是完全空的。有没有办法在内容加载之前显示“loading ....”之类的消息？

我的代码是：

<script type="text/javascript">
    $(function(){
        $("#tabs").tabs();
    });
</script>

            <div id="tabs">
                <ul>
                    <li><a href="/failedPrescreenReport.jsp</a></li>
                    <li><a href="/failedverificationreport.jsp</a></li>
                    <li><a href="VerificationReport.action</a></li>
                </ul>
            </div>

我已尝试使用此插件的spinner选项，但这对我来说似乎不起作用...（也许我的css搞砸了）

Answer 1

没有必要做额外的事情，只需添加 span 标签就可以了。我认为它在jQuery的文档中遗漏了。

示例：

<script type="text/javascript">
    $(function(){
        $("#tabs").tabs();
    });
</script>

<div id="tabs">
    <ul>
        <li><a href="/failedPrescreenReport.jsp"><span>Tab 1</span></a></li>
        <li><a href="/failedverificationreport.jsp"><span>Tab 2</span></a></li>
        <li><a href="VerificationReport.action"><span>Tab 3</span></a></li>
    </ul>
</div>

span 标签是重要的部分。

Answer 2

我建议您监听jquery ajaxStart，ajaxStop和ajaxError事件，在ajaxStart上显示“加载”弹出窗口，将其隐藏在AjaxStop和ajaxError上。这样，只要ajax请求处于挂起状态而没有任何其他编程，您的加载弹出窗口就会显示。

例如：

$(function() {
  $(this).ajaxStart(function() {
    $("#ajaxLoading").show(); });
  $(this).ajaxStop(function() {
    $("#ajaxLoading").hide(); });
 });

Answer 3

最近写了jquery plugin，可能会有所帮助。它将一个带有微调器的掩码放在一个元素上，因此对于你的ajax调用，你可以在调用之前显示掩码，并在回调函数中取消屏蔽它。

Answer 4

jquery blockui非常适合这一点。一个非常快速，优雅的解决方案。

Answer 5

blockUI非常棒，但我谨慎http://plugins.jquery.com/project/loading更适合这种情况。

Answer 6

我做的最好的事情只是为了ajax驱动标签...希望你会喜欢这个答案

$（“＃facilityTabContainer”）。标签（{ panelTemplate：“正在加载......”，已选择：0，可滚动：是的， cache：false}）;

你甚至可以修改jquery.ui.tabs中的panelTemplate，这样你应用程序中的所有选项卡都会自动获得“加载文本或图像”。并猜测它也解决了你的第一个标签加载问题..

如何在加载jquery选项卡的内容之前显示“加载”

6 个答案: