Tabs UI에서 jQuery 함수를 다른 함수에 통합하십시오.

Question

하나의 함수를 다른 함수에 통합하려고 애 쓰고 있습니다.

내가하려는 것은 무작위 따옴표를 호출하는 jQuery 함수를 추가하는 것입니다. jQuery Tabs UI에서 탭 변경시 해당 함수가 실행되기를 원합니다.

이것은 임의의 견적 기능입니다 : (탭이 변경 될 때 된 div를 축소 다른 함수와 함께)

$.get('quotes.txt', function(data) { 
     var quotes = data.split("\@"); 
     var idx = Math.floor(quotes.length * Math.random()); 
     $('.quotes').html(quotes[idx]); 
    }); 

그리고이 아래

는 탭 초기화입니다 :

$(document).ready(function() { 
    var $tabs= $("#tabs").tabs({ 
     fx : { 
      opacity: 'toggle' 
     }, 
     select : function(event, ui) { 
      $(".entry-content").hide();     
     }     //I assume it goes near here, but no luck 
    }); 
}); 

는 따옴표를합니까 함수는 먼저 호출 된 변수가 필요합니까?

그리고 인용 부호 div를 따옴표로 바꾸면 fx 불투명도 효과를 어떻게 사용합니까?

편집 4/27/11이 작동하고 함수의 FX 효과 사용

: 여기

$(document).ready(function() { 
    var $tabs = $("#tabs").tabs({ 

     fx: { 
      opacity: 'toggle' 
     }, 

     select: function (event, ui) { 
      $(".entry-content").hide(); 

      $('div#quotescontainer').load('quotes.html', function() { 
       var $quotes = $(this).find('div.quote'); 
       var n = $quotes.length; 
       var random = Math.floor(Math.random() * n); 
       $quotes.hide().eq(random).fadeIn(); 
      }); 
     } 
    }); 
}); 

Answer 1

코드는 내가 탭의 '쇼'이벤트에 넣어 것,

$(document).ready(function() { 
    var $tabs= $("#tabs").tabs({ 
     fx : { 
      opacity: 'toggle' 
     }, 
     select : function(event, ui) { 
      $(".entry-content").hide();     
      // <-- code goes here 
     }     //I assume it goes near here, but no luck <-- NO! 
    }); 
}); 

개인적으로 중괄호 내부에 가야한다,하지만 그건 문제가되지 않습니다.

내가 설정을했습니다 몇 가지 테스트 코드와 바이올린 당신은 어떻게해야 볼 수 있도록 대신 더 좋을 것이다 위의 JohnP의 예를 사용하여 클릭 기능의 http://jsfiddle.net/PyN5Y/1/

$("#tabs").tabs({ 
    select: function(event, ui) { 
     alert('triggered on select'); 
     doStuff();  
    }, 
    show: function(event, ui) { 
     alert('triggered on show'); 
     doStuff(); 
    } 
}); 

function doStuff() { 
    alert('doing stuff'); 
} 

Answer 2

내가 탭의 변화를 모니터링하고 킥오프 것 어떻게 귀하의 견적 기능.

$("#tabs ul li a").click(function(e) { 
    update_quote(); 
}); 

function update_quote() { 
    $.get('quotes.txt', function(data) { 
     var quotes = data.split("\@"); 
     var idx = Math.floor(quotes.length * Math.random()); 
     $('.quotes').fadeOut(); 
     $('.quotes').html(quotes[idx]); 
     $('.quotes').fadeIn(); 
    }); 
} 

update_quote 기능을 정리하고 더 간단하게 만들 수 있습니다. 매우 자세한 정보를 제공하므로 업데이트 방법을 알 수 있습니다. jquery 효과도 연결할 수 있습니다.