集成一個jQuery功能到另一個標籤頁UI

Question

我試圖將一個功能集成到另一個功能，我很困惑。

我想要做的是添加一個jQuery函數，它將調用一個隨機引號，並且我希望該函數在jQuery Tabs UI中的選項卡更改上觸發。

這是隨機的報價功能：

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

低於這個是標籤的init（與崩潰的div其他功能一起，當標籤被改變）：

$(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不透明效果？

編輯11年4月27日

這工作，並使用該函數的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! 
    }); 
}); 

個人而言，我把它放在選項卡中的「顯示」事件，但是這不應該是一個問題。

我設置了一些測試代碼撥弄給你看應該如何：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效果。