- ベストアンサー
jQueryのタブにスクロールバーをつけたい
- jQueryの「ui.tabs.js」を使ってタブを制作し、タブの内容を記憶し、表示する方法を紹介します。
- さらに、タブの中身が枠を超えると「jScrollPane.js」を使って横にスクロールバーが表示されるようにする方法を紹介します。
- 参考になるウェブサイトも紹介されています。
- oshiete329
- お礼率77% (200/258)
- JavaScript
- 回答数2
- ありがとう数8
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
タブを切り替えた時にスクロールバーの長さがリサイズされないということです。 ＝＞タブの中身に、もう一階層<div>を作ってCSSで、大きさ指定すればうまく いきました。先に、jScrollPane()を実行します。 ※jScrollPaneのサンプルページにUI Tabと併用している例が載ってます。 http://www.kelvinluck.com/assets/jquery/jScrollPane/tabs_example.html <style type="text/css"> .scroll-pane {width:500px;height:100px;overflow:auto;} .ui-tabs-hide {position:absolute;left:-10000px;display:block;} #container1 {width:100%;} </style> <script type="text/javascript" charset="utf-8"> <!-- $(document).ready(function(){ $('.scroll-pane').jScrollPane({scrollbarWidth:13, scrollbarMargin:9}); $('#container1').tabs({event:'click',cookie: { expires: 30 },cache:true}); }); // --> </script> </head> <body> <div id="container1"> <ul> <li id="tab1"><a href="#tab_categry">タブ1</a></li> <li id="tab2"><a href="#tab_all">タブ2</a></li> </ul> <div id="pane1"> <div id="tab_categry"> <div class="scroll-pane"> <p>中身１(省略)中身１(省略)中身１(省略)中身１(省略)中身１</p> <p>中身１(省略)中身１(省略)中身１(省略)中身１(省略)中身１</p> <p>中身１(省略)中身１(省略)中身１(省略)中身１(省略)中身１</p> <p>中身１(省略)中身１(省略)中身１(省略)中身１(省略)中身１</p> <p>中身１(省略)中身１(省略)中身１(省略)中身１(省略)中身１</p> <p>中身１(省略)中身１(省略)中身１(省略)中身１(省略)中身１</p> <p>中身１(省略)中身１(省略)中身１(省略)中身１(省略)中身１</p> <p>中身１(省略)中身１(省略)中身１(省略)中身１(省略)中身１</p> <p>中身１(省略)中身１(省略)中身１(省略)中身１(省略)中身１</p> <p>中身１(省略)中身１(省略)中身１(省略)中身１(省略)中身１</p> </div> </div> <div id="tab_all"> <div class="scroll-pane"> <p>中身2(省略)中身2(省略)中身2(省略)中身2(省略)中身2(省略)</p> <p>中身2(省略)中身2(省略)中身2(省略)中身2(省略)中身2(省略)</p> <p>中身2(省略)中身2(省略)中身2(省略)中身2(省略)中身2(省略)</p> <p>中身2(省略)中身2(省略)中身2(省略)中身2(省略)中身2(省略)</p> </div> </div> </div> </div> </body> </html>
その他の回答 (1)
- yyr446
- ベストアンサー率65% (870/1330)
素直に、できましたけど．．．． 意味がちがうのかなあ？ （使うライブラリーは全て最新にしました） （CSSもデフォルトのをいじってません） <script type="text/javascript" charset="utf-8"> <!-- $(document).ready(function(){ $('#container1').tabs({event:'click',cookie: { expires: 30 },cache:true}); $('#pane1').jScrollPane({scrollbarWidth:13, scrollbarMargin:9}); }); // --> </script> <body> <div id="container1"> <ul> <li id="tab1"><a href="#tab_categry">タブ1</a></li> <li id="tab2"><a href="#tab_all">タブ2</a></li> </ul> <div id="pane1" style="height:200px;"> <div id="tab_categry"> <p>中身１(省略)中身１(省略)中身１(省略)中身１(省略)中身１</p> <p>中身１(省略)中身１(省略)中身１(省略)中身１(省略)中身１</p> <p>中身１(省略)中身１(省略)中身１(省略)中身１(省略)中身１</p> <p>中身１(省略)中身１(省略)中身１(省略)中身１(省略)中身１</p> <p>中身１(省略)中身１(省略)中身１(省略)中身１(省略)中身１</p> <p>中身１(省略)中身１(省略)中身１(省略)中身１(省略)中身１</p> <p>中身１(省略)中身１(省略)中身１(省略)中身１(省略)中身１</p> <p>中身１(省略)中身１(省略)中身１(省略)中身１(省略)中身１</p> </div> <div id="tab_all"> <p>中身2(省略)中身2(省略)中身2(省略)中身2(省略)中身2(省略)</p> <p>中身2(省略)中身2(省略)中身2(省略)中身2(省略)中身2(省略)</p> <p>中身2(省略)中身2(省略)中身2(省略)中身2(省略)中身2(省略)</p> <p>中身2(省略)中身2(省略)中身2(省略)中身2(省略)中身2(省略)</p> <p>中身2(省略)中身2(省略)中身2(省略)中身2(省略)中身2(省略)</p> <p>中身2(省略)中身2(省略)中身2(省略)中身2(省略)中身2(省略)</p> <p>中身2(省略)中身2(省略)中身2(省略)中身2(省略)中身2(省略)</p> <p>中身2(省略)中身2(省略)中身2(省略)中身2(省略)中身2(省略)</p> </div> </div> </div> </body>
補足
すみません！質問の仕方が悪かったようなので補足させていただきます。 「うまくいかない」というのは具体的にどういう事かといいますと… タブを切り替えた時にスクロールバーの長さがリサイズされないということです。 中身1の内容を表示したあとに中身2の内容を開くと中身1のスクロールバーの長さおよび位置で表示されてしまうわけです。 タブを切り替えるごとにjScrollPaneを再読みするようにしたいのですが、そういうスクリプトはないでしょうか？？
お礼
ありがとうございます！！ 助かりました！！