jquery의 Ajax 로더 탭

Question

내 페이지에 Jquery UI 탭이 있습니다.

탭을 변경하는 동안 ajax 로더와 비슷한 로더를 보여주고 싶습니다. 나는 this question을 추천했다. 그러나 지금까지는 이것을 어떻게 만드는지 명확하지 않습니다.

나는 이것을 내 스크립트에서 시도했다.

<script> 
$(function() { 
$("#tabs").tabs({ 

    ajaxOptions: { 

     error: function(xhr, status, index, anchor) { 
      $(anchor.hash).html("I tried to load this, but couldn't. Try one of the other links?"); 
      var spinner = $(".selector").tabs("option", "spinner"); 
      $(".selector").tabs("option", "spinner", 'Retrieving data...'); 
     }, 
spinner: '<img src="http://i.stack.imgur.com/Pi5r5.gif" />' 


    } 
}); 
}); 
</script> 

쉬운 방법. (여기 아약스 방법을 사용하지 않는 것을 선호합니다.)

이 이미지처럼

Answer 1

하나의 해결책이 될 수있다 :

이

$("#tabs").tabs({ 
    beforeLoad: function(event, ui) { 
     ui.tab.html('<img src="http://i.stack.imgur.com/Pi5r5.gif" />'); 
    } 
}); 

그냥 당신의 욕망 로딩 GIF와 탭의 HTML 콘텐츠를 다시 작성합니다. Ajax 호출이 완료되면 탭 내용이 자동으로 다시 작성됩니다.

더 많은 정보 : 나는 또한 아약스 설치없이 간단한 방법을 찾고 있었다 http://api.jqueryui.com/tabs/#event-beforeLoad

Answer 2

이 게시물에 비틀 거렸다. Frans 대답은 거의 정확했지만 잘못된 요소를 업데이트했습니다. 수정 된 버전은 다음과 같아야합니다. 그는 패널이 아닌 실제 탭을 업데이트하고있었습니다.

$("#tabs").tabs({ 
    beforeLoad: function(event, ui) { 
     ui.panel.html('<img src="http://i.stack.imgur.com/Pi5r5.gif" />'); 
    } 
}); 

방금 ​​구현했습니다.