2011-07-01 3 views
4

AJAX를 통해로드하는 동안 jQuery UI 탭의 바디에 로딩 스피너를 표시하는 간단한 방법이 있습니까?Spinner를 JQuery UI에 추가하기 Tab Body

본질적으로 나는 회 전자 옵션과 같은 것을 찾고 있지만 탭 제목이 아닌 탭 본문에 그래픽과 로딩 메시지를 표시합니다.

+0

에서 회 전자 이미지를 얻을 수 있습니다. [이 질문에] (http://stackoverflow.com/questions/68485/how-to-show-loading-spinner-in-jquery) –

+0

문제는 기존 요소를 표시하거나 숨길 수 있다는 것입니다. 내 탭에는 아약스가로드 될 때까지 본문이 없습니다. 따라서 jquery에 스피너가 포함 된 본문이있는 탭을 만든 다음 완료되면 아약스 내용으로 바꿔달라고합니다. –

+0

페이지에 숨겨진 div를 만들고 결과를 채우고 회 전자를 표시하기 위해 동일한 div를 사용하는 대신 아약스를 할 때 회 전자와 함께 표시해야합니다. –

답변

7

이 (당신의 탭이 ID '탭'이 가정) 아약스로드 탭에 대한 1.9+ jQuery를 UI로 작동합니다 :

$("#tabs").tabs({ 
    // loading spinner 
    beforeLoad: function(event, ui) { 
    ui.panel.html('<img src="loading.gif" width="24" height="24" style="vertical-align:middle;"> Loading...'); 
    } 
}); 

당신은 바로 이곳에 loading.gif을 넣어 조정해야합니다 img 태그 src, 너비와 높이,하지만 당신이 생각하는 것 같아요.