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

解決済

質問者：renarena85
質問日時：2011/05/18 12:46
回答数：2件

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

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

通報する

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

質問の本文を隠す

このQ&Aに関連する最新のQ&A

「jQuery とは」に関するQ&A： jQueryとはどのようなものですか。

さらに表示

「とは UI」に関するQ&A： MS UI Gothicというフォントはどんなフォント

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： fujillin
回答日時：2011/05/18 16:11

#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の読込みは不要となります。

- 0
- 件

通報する

この回答へのお礼

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

通報する

お礼日時：2011/05/18 21:44

No.1

回答者： fujillin
回答日時：2011/05/18 13:26

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

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

この回答への補足

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

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

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

補足日時：2011/05/18 14:08

通報する

- 0
- 件

通報する

このQ&Aに関連する人気のQ&A

「とは UI」に関するQ&A：スマホのホーム画面が変わってしまった

さらに表示

「jQuery とは」に関するQ&A：商用ホームページでのjQuery等のライセンスについて

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

質問する（無料）

このQ&Aを見た人はこんなQ&Aも見ています

専門家回答数ランキング

専門家

※過去一週間分の回答数ランキングです。

質問する（無料）

他の専門家の回答をチェック

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

QSELECTのプルダウンの長さの調整

困っております。。ご存じの方ぜひ教えて頂けたらと思います。

HTMLのSELECTタグでプルダウンを作成しています。
OPTIONで指定しているリストは１００件ほどあります。
この状態で▼を押してリストを表示すると、
縦が長すぎで、画面の外に飛び出る場合があります。
こうなると、スクロールバーもつまむことができないので
目的のものが選択できないことがあります。
プルダウンの表示長さを調節することはできませんでしょうか？

なお、SELECT以外の代替え案は勝手ながらご遠慮願います。
よろしくお願いしますm(_ _)m

Aベストアンサー

> 縦が長すぎで、画面の外に飛び出る場合があります。

・・・ブラウザのバグと思います。
参考に、OSと、ブラウザの種類とバージョンを教えて戴けないでしょうか。
（Safari3.0にはブックマークが画面外に表示されて選択できなくなるバグがありましたが)

ネットブックのような画面が小さなパソコンでは、
都道府県（47項目）を表示するだけで画面サイズを超えますので、
そういうブラウザでは閲覧できなくなってしまいますね。
（IE7ではセレクトフィールドのプルダウンメニューにスクロールバーが表示...続きを読む

他の回答も見る

Qjavascriptでセレクトボックスの"selected"を動的につ

javascriptでセレクトボックスの"selected"を動的につける方法について質問させてください。

現在、以下のようなフォームを作成しました。

<select name='year'>
<option value='2010'>2010</option>
<option value='2011'>2011</option>
</select>年

<select name='month'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
<option value='6'>6</option>
<option value='7'>7</option>
<option value='8...続きを読む

Aベストアンサー

こんな感じで・・・

<script>
window.onload=function(){
var f=document.getElementById("f0");
var ymd=new Date();
checkSelect(f.elements["year"],ymd.getFullYear());
checkSelect(f.elements["month"],ymd.getMonth() +1);
checkSelect(f.elements["day"],ymd.getDate());
}
function checkSelect(obj,val){
for(var i=0;i<obj.length;i++){
if(obj[i].value==val){
obj[i].selected=true;
break;
}
}
}
</script>
<form id="f0">
<div>
<select name='year'>
<opt...続きを読む

他の回答も見る

QJqueryでリストのスクロール

<ul><li></li></ul>にて作成したリストで選択した行の背景色を変更し、選択した行が
リストの先頭にスクロールするするサンプルを試しに作成してみました。
Jqueryを使用して下記のように作成してみましたが選択行がリストの先頭にうまくスクロールしずに
微妙な位置までスクロールして止まってしまいます。うまくリストの先頭に来るようにスクロールさせる
にはどのようにすればよろしいでしょうか。

【サンプル】
<html>
<head>
<meta charset="UTF-8" />
<script type="text/javascript" src="../jquery-1.6.1.min.js"></script>
<script type="text/javascript">
$(function(){
$("ul.update-scroll li").click(function() {

$("ul.update-scroll li").each(function(){

// 既に選択済の場合、選択を解除
if( $(this).hasClass("selected") ) {
//alert( $(this).text() );
$(this).toggleClass("selected");
}
});

// 選択済に変更
$(this).toggleClass("selected");

// 選択済の位置がリストの先頭に来るようにスクロール
//var i = $(this).index();
var p = $(this).offset().top;
//alert(p);
$("ul.update-scroll").animate({ scrollTop: p }, "fast");
});
});
</script>

<title>CSS</title>
<style type="text/css">
ul.update-scroll {
list-style-type: none;
width: 400px;
height: 100px;
overflow-y: scroll;
border: 2px solid #bbb;
padding-left: 1.5em;
}

ul.update-scroll li {
margin-top: 0.3em;
}

ul.update-scroll li.selected {
background:red;
}

ul.update-scroll a {
text-decoration: none;
}

</style>
</head>
<body bgcolor="rgba(255,0,0,0.15)">

<ul class="update-scroll">
<li>[2010/01/03]： <a href="javascript:void(0);">項目10</a></li>
<li>[2010/01/03]： <a href="javascript:void(0);">項目9</a></li>
<li>[2010/01/03]： <a href="javascript:void(0);">項目8</a></li>
<li>[2010/01/03]： <a href="javascript:void(0);">項目7</a></li>
<li>[2010/01/03]： <a href="javascript:void(0);">項目6</a></li>
<li>[2010/01/03]： <a href="javascript:void(0);">項目5</a></li>
<li>[2010/01/03]： <a href="javascript:void(0);">項目4</a></li>
<li>[2010/01/03]： <a href="javascript:void(0);">項目3</a></li>
<li>[2010/01/02]： <a href="javascript:void(0);">項目2</a></li>
<li>[2010/01/01]： <a href="javascript:void(0);">項目1</a></li>
</ul>
</body>
</html>

Aベストアンサー

こういうことでしょうか？

$(function(){
var ul = $("ul.update-scroll");

$("li", ul).click(function(){
ul.animate({
scrollTop : ul.scrollTop() + $(this).offset().top - ul.offset().top
}, "fast");
});
});

他の回答も見る

Qプルダウンメニュー表示時の高さの指定方法

ブラウザ上でプルダウンメニューを表示させる際に、表示される高さ（タテ幅）の指定をするにはどうすればよいか、ご存知の方は教えていただけないでしょうか？

ちなみに、プルダウンメニューの横幅は、<select>タグ内に、「style="width:（幅を指定）;"」を記述することで固定幅の設定が可能でしたが・・・

なお、プルダウンメニューは初期表示として、１件のみ表示させるものとします（すなわち、<select>タグ内の「size="1"」の指定は変えないこととする）。

というのも、プルダウンに表示させる項目（条件によって可変）の件数が多い場合に、プルダウンメニュー内でスクロールさせるのをできるだけ避けたいためです。
よって、方法としては、
１．プルダウン表示させる際の高さ（タテ幅）を固定で指定する
２．可能であれば、登録されている全項目の表示をさせる
以上２つの方法を考えています。

なにかよい方法があれば、ぜひ教えてください。

Aベストアンサー

ご存知のように<select>タグの属性で縦幅を設定することはできませんね。

http://tohoho.wakusei.ne.jp/html/select.htm

スタイルでも設定はできないようですね。

異なるＯＳで同じブラウザで同じページの<select>タグ内を
表示しても縦幅が異なりますので
ＯＳに依存されてしまうのでしょうか？
また、画面の解像度によるかもしれません。

他の回答も見る

Qセレクトメニューでレイヤーの切り替え

<html>
　<head>
　　<title>実験用</title>
　</head>
<script language="javascript">

</script>
　<body>
　　<select onChange="sel(this.value)">
　　　<option value="aaa">その１
　　　<option value="bbb">その２
　　</select>
　　<div id="aaa" style="display:none;background:skyblue">ああああああああああああああ</div>
　　<div id="bbb" style="display:none;background:skyblue">いいいいいいいいいいいい...続きを読む

Aベストアンサー

<html>
<head>
<title>実験用</title>
</head>
<script language="javascript">

</script>
<body>
<form name="fm" id="fm">
<select id="sl" name="sl" onChange="sel(this.options[this.selectedIndex].value);">
<option value="0">その１
<option value="1">その２
</select>
</form...続きを読む

他の回答も見る

Q横スクロールバーを表示したい

スクロールバーの色を変更するために下記のタグを埋め込んだ所、
今まで表示されていた横スクロールバーが消えてしまいました。
横スクロールさせないと見えない部分があるので、ぜひ表示させたいです。
どうか教えてください！

Ｗｉｎ９８ｓｅ・ＩＥ６
ＨＰビルダーでどこでも配置モードを利用しています。

<STYLE type="text/css">
</STYLE>

Aベストアンサー

overflow-x : hidden ;
↑
横スク出しちゃいやん、の印（笑）

overflow-x : auto;
横スク出るなら出てしまえ。

overflow-x : scroll ;
横スク必ず出してやる！

この行がない場合はoverflow-x : auto;と同じ意味です。
・・・言うてもIE互換モードだけだけどー。

他の回答も見る

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

このQ&Aに関連する最新のQ&A

#1です。

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

この回答への補足

このQ&Aに関連する人気のQ&A

このQ&Aを見た人はこんなQ&Aも見ています

関連するQ&A

関連するカテゴリからQ&Aを探す

C言語・C++・C#

PHP

Java

JavaScript

Perl

CGI

Ruby

Visual Basic（VBA）

Microsoft ASP

AJAX

Flash

XML

HTML・CSS

オープンソース

SEO

その他（プログラミング・Web制作）

専門家回答数ランキング

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

QSELECTのプルダウンの長さの調整

Qjavascriptでセレクトボックスの"selected"を動的につ

QJqueryでリストのスクロール

Qプルダウンメニュー表示時の高さの指定方法

Qセレクトメニューでレイヤーの切り替え

Q横スクロールバーを表示したい

Q