jqueryでセレクトメニュー+スクロール

質問

下記のデモサイトのように
http://www.kelvinluck.com/assets/jquery/jScrollPane/tabs_example.html
jScrollPaneとjQuery UI tabsを連動させる方法は分かったのですが、
タブの部分をselectメニューにカスタマイズすることは可能でしょうか？

.change()を使うとは思うのですが、具体的な記述の仕方が分からず
困っております。
ご教授いただけると助かります。

回答No.2

fujillin · ベストアンサー

#1です。

＞jScrollPaneとjQuery UI tabsを連動させる方法は分かったのですが、
と書いてあったので、簡単な回答にしてしまったのですが…

＞スクロールの高さが固定なら良いのですが、
＞それぞれのスクロール領域の高さが異なる場合、
＞セレクトメニューの切り替えとうまく連動してくれません・・・
もしかして、スクロールを設定したdivの内容を書換えるような方法をとっているのでは？
（その場合に、高さが追随しないのかどうかは確認していませんが）
ご提示のサイトでは、スクロールするdivを3個用意しておいて、タブの切替に応じてそれの表示/非表示を切り替えているだけと思いますが？
（コードを確認していないので、推測です）

ご提示のサイトのソースをサンプルにするならば…
（以下、インデントは全角空白で代替しています）

1）HTMLのタブの部分をselectに交換
<select name="tabs" id="tabs">
　<option value="tab1" selected>タブ1</option>
　<option value="tab2">タブ2</option>
　<option value="tab3">タブ3</option>
</select>

2)初期セット用のスクリプトを以下に交換
　（タブ機能の自作部分とスクロールの初期設定）
$(function(){
　$("#tabs").change(function(){
　　var tab = this.value;
　　$("option", this).each(function(){
　　　var id = this.value;
　　　$("#" + id).css("display", id==tab?"block":"none");
　　});
　});

　$('.scroll-pane').jScrollPane();
　$("#tabs").change();
});

これで、セレクト内容に応じて同様の動作をすることを確認しました。
当然ながら、UI_tabs用のスクリプトとCSSの読込みは不要となります。

お礼

ありがとうございました！実装できました！

回答No.1

fujillin

tabの選択に応じて対象とする要素(div）の表示/非表示を制御しているだけだと想像しますので、jqueryならわざわざカスタマイズしなくても自作してもたいしたことは無いでしょう。

以下の過去の質問が参考になると思われます。（ほとんど同じなので）
onchangeの使用法としてもご参考までに。
http://okwave.jp/qa/q429714.html
http://okwave.jp/qa/q6330851.html

補足

スクロールの高さが固定なら良いのですが、
それぞれのスクロール領域の高さが異なる場合、
セレクトメニューの切り替えとうまく連動してくれません・・・

サンプルサイトでは、スクロールの高さがちゃんと可変になってます。
http://www.kelvinluck.com/assets/jquery/jScrollPane/tabs_example.html

自作でもいけるのならそれでも良いのですが・・・