外出自粛中でも楽しく過ごす!QAまとめ>>

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

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

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

A 回答 (2件)

#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の読込みは不要となります。
    • good
    • 0
この回答へのお礼

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

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

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
    • good
    • 0

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

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

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

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

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

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


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

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

Aベストアンサー

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

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

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

> プルダウンの表示長さを調節することはできませんでしょうか?
残念ながらそういう方法はありません。

ブラウザベンダーに連絡して、バグを修正してもらうのを待つか、
代替案として<select size="">を指定したり、
<optgroup>で入れ子にしていくとか、
JavaScriptのフローティングウインドウ(ポップアップウインドウ)で擬似的にプルダウンメニューをつけるくらいしかないと思います。


横幅については

<option value="1" label="ほげ">あいうえおあいうえお・・・</option>

という、短く表示する方法もありますが、ブラウザが対応していない可能性の方が高いです。
(この例では「ほげ」が表示される・・・はず)

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

・・・ブラウザのバグと思います。
参考に、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'>8</option>
<option value='9'>9</option>
<option value='10'>10</option>
<option value='11'>11</option>
<option value='12'>12</option>
</select>月

<select name='day'>
<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'>8</option>
<option value='9'>9</option>
<option value='10'>10</option>
<option value='11'>11</option>
<option value='12'>12</option>
<option value='13'>13</option>
<option value='14'>14</option>
<option value='15'>15</option>
<option value='16'>16</option>
<option value='17'>17</option>
<option value='18'>18</option>
<option value='19'>19</option>
<option value='20'>20</option>
<option value='21'>21</option>
<option value='22'>22</option>
<option value='23'>23</option>
<option value='24'>24</option>
<option value='25'>25</option>
<option value='26'>26</option>
<option value='27'>27</option>
<option value='28'>28</option>
<option value='29'>29</option>
<option value='30'>30</option>
<option value='31'>31</option>
</select>日


このセレクトボックスに、例えば今日の日付"2010年9月30日"だったら、それぞれの年、月、日の<option>に"selected"をつけたいのですが、javascriptではどのようにして実現したら良いのでしょうか?

よろしくお願いします。

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'>
<option value='2009'>2009</option>
<option value='2010'>2010</option>
<option value='2011'>2011</option>
</select>年

<select name='month'>
<option value='8'>8</option>
<option value='9'>9</option>
<option value='10'>10</option>
</select>月

<select name='day'>
<option value='29'>29</option>
<option value='30'>30</option>
<option value='31'>31</option>
</select>日
</div>
</form>

こんな感じで・・・

<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>

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

【サンプル】
<html>
<head>
<meta charset="UTF-8" />
<script type="text/javascript" src="../jquery-1.6.1...続きを読む

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:(幅を指定);"」を記述することで固定幅の設定が可能でしたが・・・

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

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

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

Aベストアンサー

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

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

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

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

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

<html>
 <head>
  <title>実験用</title>
 </head>
<script language="javascript">
<!--
function sel(flg){
 flg.style.display = "block";
}
//-->
</script>
 <body>
  <select onChange="sel(this.value)">
   <option value="aaa">その1
   <option value="bbb">その2
  </select>
  <div id="aaa" style="display:none;background:skyblue">ああああああああああああああ</div>
  <div id="bbb" style="display:none;background:skyblue">いいいいいいいいいいいいいい</div>
 </body>
</html>

このスクリプトは動かないのですが、イメージとしては
セレクトメニューで選んだら、それに対応したレイヤーを
表示させたり、非表示にしたりしたいのです。

環境はWinXP,IE6とMac9.2.2,IE5.1です。
何かいい方法は無いでしょうか。

<html>
 <head>
  <title>実験用</title>
 </head>
<script language="javascript">
<!--
function sel(flg){
 flg.style.display = "block";
}
//-->
</script>
 <body>
  <select onChange="sel(this.value)">
   <option value="aaa">その1
   <option value="bbb">その2
  </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">
<!--
function sel(flg){
for(i=0;fm.sl.options.length>i;i++){
document.getElementById(i).style.display = "none";
}
document.getElementById(flg).style.display = "block";
}
//-->
</script>
<body>
<form name="fm" id="fm">
<select id="sl" name="sl" onChange="sel(this.options[this.selectedIndex].value);">
<option value="0">その1
<option value="1">その2
</select>
</form>
<div id="0" style="display:none;background:skyblue;">ああああああああああああああ</div>
<div id="1" style="display:none;background:skyblue;">いいいいいいいいいいいいいい</div>
</body>
</html>

<html>
<head>
<title>実験用</title>
</head>
<script language="javascript">
<!--
function sel(flg){
for(i=0;fm.sl.options.length>i;i++){
document.getElementById(i).style.display = "none";
}
document.getElementById(flg).style.display = "block";
}
//-->
</script>
<body>
<form name="fm" id="fm">
<select id="sl" name="sl" onChange="sel(this.options[this.selectedIndex].value);">
<option value="0">その1
<option value="1">その2
</select>
</form...続きを読む

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

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

Win98se・IE6
HPビルダーでどこでも配置モードを利用しています。

<STYLE type="text/css"><!--body {scrollbar-face-color:#ffffff;
scrollbar-track-color:#ffffff; scrollbar-arrow-color:#C0C0C0;
scrollbar-highlight-color:#808080; scrollbar-shadow-color:#C0C0C0;
scrollbar-3dlight-color:#ffffff;
scrollbar-darkshadow-color:#ffffff;
overflow-x : hidden ;} -->
</STYLE>

Aベストアンサー

overflow-x : hidden ;

横スク出しちゃいやん、の印(笑)

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

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

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

Q