如何将加载微调器图像添加到jquery选项卡中的每个选项卡？

I have loaded items in jquery tabs. When page loading, i want to show loading spinner image to each tab available inside tabs. When the count label shown, i want to remove spinner image. My code is

我已经在jquery选项卡中加载了项目。页面加载时,我想显示加载微调器图像到选项卡内可用的每个选项卡。当显示计数标签时,我想删除微调器图像。我的代码是

Html code:

<div id="tabs" >
    <ul>
        <li>
            <a id="storesa">
                <p class="tablip">
                    Store 
                    <img id="imgStore" src="ajax-loader6.gif" style="display:none;"/>  
                    <span id="store_count"/>
                </p>
            </a>
        </li>
    </ul>
</div>

Jquery code:

$(window).load(function () {
    if ($('#store_count').is(':visible')) {
        $('#imgStore').hide();
    }       
});

How to do that?

怎么做?

1 个解决方案

#1

EDIT 1: The following works for remote tabs (ajax loaded). You should use beforeLoad and load events to perform this.

编辑1:以下适用于远程选项卡(加载ajax)。您应该使用beforeLoad并加载事件来执行此操作。

HTML:

<div id="tabs" >
    <ul>
        <li>
            <a id="storesa" href="http://url-on-wich-the-ajax-request-will-be-done/">
                <p class="tablip">
                    Store 
                    <img id="imgStore" src="ajax-loader6.gif"/>  
                    <span id="store_count"/>
                </p>
            </a>
        </li>
    </ul>
</div>

CSS:

#imgStore {
    display: none;
}

JS:

$(function() {
    $("#tabs").tabs({

        /* Called before tab content is loaded */
        beforeLoad: function(event, ui) {
            $('#imgStore').show();
            /* if ajax call to retrieve tab content failed */
            ui.jqXHR.error(function() {
                $('#imgStore').hide();
                ui.panel.html("An error occured while loading store infos");
            });
        },

        /* Called when tab is loaded */
        load: function(event, ui) {
            $('#imgStore').hide();
            $('#store_count').html(/* your count here */);
        }
    });
});

EDIT 2: @senthil-nathan : Assuming your go_to_page() function is loading the tabs contents i wrote this jsFiddle, hope that can help you.

编辑2:@ senthil-nathan:假设你的go_to_page()函数正在加载标签内容我写了这个jsFiddle,希望对你有帮助。

1 个解决方案

#1

更多相关文章

随机推荐