JQuery UI选项卡 - "正在加载..."消息

Question

所有,

我正在使用Jquery UI嵌套选项卡.我只是想知道是否有任何方法在选项卡文本旁边显示AJAX Spinner图像,同时加载选项卡.我不想将标签文本更改为"正在加载...".考虑到当多个选项卡同时加载或一个接一个加载时,微调器图像应显示在每个加载选项卡旁边.

有什么建议？

谢谢

Answer 1

如果您正在为选项卡使用缓存,那么此解决方案可能更适合,它只显示ajax加载,如果内容尚未在页面上.

$(".tabs").tabs({
   cache:true,
   load: function (e, ui) {
     $(ui.panel).find(".tab-loading").remove();
   },
   select: function (e, ui) {
     var $panel = $(ui.panel);

     if ($panel.is(":empty")) {
         $panel.append("<div class='tab-loading'>Loading...</div>")
     }
    }
 })

Answer 2

我自己用了不同的方法.我希望标签标题保持原样,并在标签本身中显示"加载"信息.

我这样做的方式如下:

    $("#matchTabs").tabs({
      spinner: "",
      select: function(event, ui) {
        var tabID = "#ui-tabs-" + (ui.index + 1);
        $(tabID).html("<b>Fetching Data.... Please wait....</b>");
      }
    });

与上一张海报一样,我使用了微调器方法来防止标签标题被更改.选择新选项卡时会触发select事件,因此我获得了当前所选选项卡的ID,并添加了一个用于创建一个变量,该变量将引用默认情况下加载ajax内容的DIV.

获得ID后,您需要做的就是用加载消息替换DIV中的HTML.当Ajax完成时,它将使用实际内容再次替换它.

Answer 3

巴鲁,我最近需要类似的东西.在我的项目中,我希望选项卡保留选项卡标题,但附加一个ajax加载类型的动画.这是我用过的:

$(".tabs").tabs({ spinner: '',
                select: function(event, ui) { 
                    $(".tabs li a .loader").remove();
                    $(".tabs li a").eq(ui.index).append("<span class='loader'><img src='images/ajax-loader.gif'/></span>"); 
                    },
                load: function(event, ui) { $(".tabs li a").eq(ui.index).find(".loader").remove(); }
                });

"spinner"选项会在单击选项卡时删除"Loading ..."效果."select"事件允许我们获取选定的选项卡并附加包含动画的新范围.内容加载后,我们使用"加载"事件来删除动画.为防止多次用户点击破坏标签,我们删除()任何标签选择上的所有动画.

你已经解决了这个问题吗？如果是,请分享解决方案.