Jquery UI 탭에는 탭 추가 후 즉시 트리거되는 추가 이벤트가 있습니다. 이 예제에서 버튼을 클릭하면 새 탭이 추가되고 선택됩니다.새로 추가 된 jquery 사용자 탭에 Ajax 콘텐츠를로드 한 후 콜백 함수를 실행하는 방법
나는 다음과 같은 방법으로 AJAX를 사용하여 동적 콘텐츠를 추가 해요 :
var $tabs = $("#tabs").tabs({
tabTemplate: "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close'>Remove Tab</span></li>",
add: function (event, ui){
var lastIndex = $("#tabs").tabs("length")-1;
$("#tabs").tabs("select", lastIndex);
}
});
function createTab(phpFile){
$tabs.tabs("add", phpFile, "Tab Title");
}
$("button").on('click', function(){
var url = "search.php?term=someRandomString";
createPlaySongTab(url);
});
내 목표는 너무
add: function (event, ui){
$(ui.panel).hide();
var lastIndex = $("#tabs").tabs("length")-1;
$("#tabs").tabs("select", lastIndex);
$(ui.panel).fadeIn(1000);
}
같은 패널에 새로 추가 된 내용 페이드를하는 것입니다의 내 가정 해 봅시다. PHP는 이것처럼 보였습니다
<?php sleep(1); echo 'hello world!';?>
이 경우 내용은 전혀 오랜 시간 o fade가 fadeIn(1000)
이고 add 이벤트는 .php 파일 로딩이 끝난 후에가 아니라 탭이 추가 된 직후에 트리거됩니다. 콘텐츠가 완전히로드 된 후 어떻게 페이드 인 할 수 있습니까?
이것은 당신이 찾고있는 것이 아니지만 AJAX get 호출을 사용하면 성공 함수에서 fadeIn을 호출 할 수 있습니다. –
감사합니다. Kris, jquery UI 탭을 통합하기 전에 AJAX 호출을 사용했습니다.하지만 jQuery UI를 사용할 때 특히 새로 작성된 탭으로 호출하는 ajax 출력을 파싱하는 방법이 특히 선호되었습니다. – user784637