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で質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
- ・ゆるやかでぃべーと タイムマシンを破壊すべきか。
- ・歩いた自慢大会
- ・許せない心理テスト
- ・字面がカッコいい英単語
- ・これ何て呼びますか Part2
- ・人生で一番思い出に残ってる靴
- ・ゆるやかでぃべーと すべての高校生はアルバイトをするべきだ。
- ・初めて自分の家と他人の家が違う、と意識した時
- ・単二電池
- ・チョコミントアイス
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
スライド写真で2、3枚目をラ...
-
jQueryでカウントダウンタイマ...
-
jQuery が動作しません。
-
scrollsmoothly.jsが動かない
-
CKeditorについて
-
<a href="#" …>の意味を教えて...
-
別ファイルのfunctionの読み込み方
-
SCRIPT5007: 未定義または NULL...
-
javascriptとApacheの設定
-
Dreamweaver で 外部JSを読み込...
-
window.open()の複数の使用
-
html メールリンクにて自動ファ...
-
javascriptでクリックしたリン...
-
HTMLソースからURLだけを抜き出...
-
新しいウィンドゥを最大化で立...
-
javascriptでalertの文字列をコ...
-
複数の外部jsをランダム表示さ...
-
window.open でExcelファイルを...
-
左右のフレームを同時にスクロ...
-
変数の代入値を外部の.txtファ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
bxslider、画像が3枚以上になる...
-
jquery ui.resizable 使い方
-
base64encodeでの文字化けについて
-
Base64に変換したHTMLの<script...
-
複数のjavascriptを使うと動か...
-
jqueryのcolorboxを読込直後に...
-
DreamWeaverでJS
-
画像をランダムにフェードイン
-
マスターページでのJavaScriopt...
-
<div>のタッチ状態を維持したま...
-
プラグイン無しでContactform7...
-
jqueryについて(Lightboxとbxs...
-
シャドウボックスとjQueryを共...
-
jqueryを2つ設置した事で片方...
-
音楽再生用jQueryプラグイン「j...
-
ソース上に出てくる理解不能な...
-
クロスドメインで取得したペー...
-
dojo(ライブラリ)のカレンダ...
-
よろしくお願いします。
-
jsファイルで配列を定義し、j...
おすすめ情報