![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?8acaa2e)
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>中身1(省略)</p>
</div>
<div id="tab_all">
<p>中身2(省略)</p>
</div>
</div>
</div>
</body>
以前同じような質問をされていた方がいたのでそちらも参考にして試してみたのですが→http://okwave.jp/qa/q4819862.html
javascriptは初心者なものでよくわかりませんでしたorz
どなたかわかる方がいましたら教えてもらえないでしょうか??
No.2ベストアンサー
- 回答日時:
タブを切り替えた時にスクロールバーの長さがリサイズされないということです。
=>タブの中身に、もう一階層<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>中身1(省略)中身1(省略)中身1(省略)中身1(省略)中身1</p>
<p>中身1(省略)中身1(省略)中身1(省略)中身1(省略)中身1</p>
<p>中身1(省略)中身1(省略)中身1(省略)中身1(省略)中身1</p>
<p>中身1(省略)中身1(省略)中身1(省略)中身1(省略)中身1</p>
<p>中身1(省略)中身1(省略)中身1(省略)中身1(省略)中身1</p>
<p>中身1(省略)中身1(省略)中身1(省略)中身1(省略)中身1</p>
<p>中身1(省略)中身1(省略)中身1(省略)中身1(省略)中身1</p>
<p>中身1(省略)中身1(省略)中身1(省略)中身1(省略)中身1</p>
<p>中身1(省略)中身1(省略)中身1(省略)中身1(省略)中身1</p>
<p>中身1(省略)中身1(省略)中身1(省略)中身1(省略)中身1</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>
No.1
- 回答日時:
素直に、できましたけど....
意味がちがうのかなあ?
(使うライブラリーは全て最新にしました)
(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>中身1(省略)中身1(省略)中身1(省略)中身1(省略)中身1</p>
<p>中身1(省略)中身1(省略)中身1(省略)中身1(省略)中身1</p>
<p>中身1(省略)中身1(省略)中身1(省略)中身1(省略)中身1</p>
<p>中身1(省略)中身1(省略)中身1(省略)中身1(省略)中身1</p>
<p>中身1(省略)中身1(省略)中身1(省略)中身1(省略)中身1</p>
<p>中身1(省略)中身1(省略)中身1(省略)中身1(省略)中身1</p>
<p>中身1(省略)中身1(省略)中身1(省略)中身1(省略)中身1</p>
<p>中身1(省略)中身1(省略)中身1(省略)中身1(省略)中身1</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を再読みするようにしたいのですが、そういうスクリプトはないでしょうか??
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- JavaScript セレクトボックスを2つ設けて選択して初めてメッセを表示 1 2022/07/27 12:15
- JavaScript switch文のswitch(n)の部分を複数の値にするか、if文に変えてほしいです。 1 2022/07/27 17:18
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- JavaScript GoogleChart 階層ごとのブロックの長さを個別に設定したい 1 2022/07/06 14:27
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- JavaScript javascriptで変数を組み込みたい 2 2023/01/13 09:52
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
DreamWeaverでJS
-
サイトにアクセスした際、数秒...
-
「jquery.csv2table.js」から生...
-
jqueryのcolorboxを読込直後に...
-
Javascript フォントサイズ変更
-
jquery ui.resizable 使い方
-
jqueryについて(Lightboxとbxs...
-
jQueryの基本的なことについて...
-
WebサービスからのxmlがIEで表...
-
noscript内にlinkは間違い?
-
<a href="#" …>の意味を教えて...
-
bodyにidをつける理由は何ですか?
-
外部ファイル名を変数で指定で...
-
onLoadをbodyタグ以外で使用する
-
別ファイルのfunctionの読み込み方
-
Dreamweaver で 外部JSを読み込...
-
javascriptとApacheの設定
-
ひとつの外部ファイルに複数の...
-
JavaScriptでiframeの内容を「...
-
テキストボックス内にハイパー...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
base64encodeでの文字化けについて
-
複数のjavascriptを使うと動か...
-
Base64に変換したHTMLの<script...
-
シャドウボックスとjQueryを共...
-
lightboxの動作に関して
-
音楽再生用jQueryプラグイン「j...
-
CrossSlideのスライドショーが...
-
htmlで別ファイルのjavascript...
-
ebayの返信で『 Message may no...
-
jQueryの基本的なことについて...
-
DreamWeaverでJS
-
プラグイン無しでContactform7...
-
パソコンでホームページを作成...
-
document.lastChild.appendChil...
-
サイトにアクセスした際、数秒...
-
dojo(ライブラリ)のカレンダ...
-
jqeryのslicksliderのパスにつ...
-
Javascriptの外部サーバーから...
-
jQueryのfilterについて
-
マウスオーバー+クリカブルマッ...
おすすめ情報