dポイントプレゼントキャンペーン実施中！

jQueryのタブにスクロールバーをつけたい

解決済

  • 質問者：oshiete329
  • 質問日時：
  • 回答数：2件

jQueryのタブにスクロールバーをつけたい

jQueryの「ui.tabs.js」を使ってタブを制作し、「jquery.cookie.js」でタブの内容を記憶し。
さらに、そのタブの中身が設定した枠を超えると「jScrollPane.js」を使って横にスクロールバーがでるようにしたいのですがうまくいきません。


<script src="./js/jquery-1.2.6.js" type="text/javascript"></script>
<script src="./js/jquery.cookie.js" type="text/javascript"></script>
<script src="./js/ui.core.js" type="text/javascript"></script>
<script src="./js/ui.tabs.js" type="text/javascript"></script>
<script src="./js/jScrollPane.js" type="text/javascript"></script>
<script src="./js/jquery.mousewheel.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function() {
$('#container1 > ul').tabs({ event: 'click' ,cookie: { expires: 30 } , cache: true});
$('#fra_sl').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">
<div id="tab_categry">
<p>中身１(省略)</p>
</div>
<div id="tab_all">
<p>中身2(省略)</p>
</div>
</div>
</div>
</body>


以前同じような質問をされていた方がいたのでそちらも参考にして試してみたのですが→http://okwave.jp/qa/q4819862.html
javascriptは初心者なものでよくわかりませんでしたorz

どなたかわかる方がいましたら教えてもらえないでしょうか？？

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (2件)

No.2ベストアンサー

  • 回答者： yyr446
  • 回答日時：

タブを切り替えた時にスクロールバーの長さがリサイズされないということです。



＝＞タブの中身に、もう一階層<div>を作ってCSSで、大きさ指定すればうまく
いきました。先に、jScrollPane()を実行します。

※jScrollPaneのサンプルページにUI Tabと併用している例が載ってます。
http://www.kelvinluck.com/assets/jquery/jScrollP …

<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>
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます！！
助かりました！！

通報する
お礼日時：2010/09/25 00:03

No.1

  • 回答者： yyr446
  • 回答日時：

素直に、できましたけど．．．．


　意味がちがうのかなあ？

（使うライブラリーは全て最新にしました）
（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を再読みするようにしたいのですが、そういうスクリプトはないでしょうか？？

補足日時：2010/09/22 23:23
通報する
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報