集成一个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效果。