jScrollPaneでtabが空白になります
jScrollPaneでtabの中身が空白になってしまいます。
○jqueryを用いたtab構造
○中身の領域が超えたらjScrollPaneのスクロールバーが現れる
としたいのですが、中身が空白になります。
回避方法をご教授下さい。
WIN IE8およびMAC Safari4で動作確認しながら制作しています。
=== ステップ１ ===
こちらのデモサイトを参考に、制作を進めたところ、
http://www.kelvinluck.com/assets/jquery/jScrollPane/tabs_example.html
タブ切り替え時にフェードアウト、フェードインさせるために、
{fx: { opacity: 'toggle', duration: 'slow' } }
を追加したところ、
なぜかフェードアウト・フェードインが繰り返されて、点滅してしまいました。
また、各タブについて記入量が多くなると、
ページ下方にどんどん空白のスペースが生まれてしまい、見苦しくなってしまいました。
=== ステップ２ ===
そこで、jScrollPaneはそのままに、
tabのjqueryだけこちらのサイトのものを変更しました。
http://www.pharos-ei.com/mike/jquery/examples/ui.tabs.html
（htmlの記述はこちらのサイトを参考にしました。
http://5am.jp/jquery/jquery_ui_tabs/）
tab単体で動かすと、
ページ下部に空白が出来ず綺麗にフェードするようになったのですが、
jScrollPaneを同期させると、
タブの中身が完全に空白になってしまいます。
（jScrollPane単体ではちゃんと表示されます）
なぜか、タブのタイトルを「新しいウィンドウで開く」と、
そのタブの中身だけは表示されてカスタマイズされたスクロールが現れます。
<script type="text/javascript">
$(function() {
$('#ui-tab > ul').tabs(
{fx: { opacity: 'toggle', duration: 'slow' } });
$('.scrollpane').jScrollPane();
});
</script>
という記述をしておりますが、
もしかしたら予め要素を読み込まないといけないのかな・・・と、
$(function(){ の部分を
jQuery.event.add(window,"load",function(){
にしたみたのですが、変化無しでした。
ステップ２の方でかなり制作をすすめてしまったので、
こちらのjqueryで問題を解決したいのですが・・・
どうぞヒントになりそうなポイントを挙げて下さいますよう、お願い致します。
