0

このjqueryプラグインを使用して、選択したドロップダウンボックスの見栄えを良くしています。http://code.google.com/p/select-box/

これが機能しているフィドルです：http： //jsfiddle.net/FQKax/1/

2つのドロップダウンの幅を変えたいのですが、それらをdivでラップし、jsをハックして異なるIDを与えようとしました。考えられることはすべてありますが、喜びはありません。

また、実際のドロップダウンビットのテキストの色を変更できないように見えることを認めるのは恥ずかしいことです。背景色などを変更することはできますが、テキストの色を変更できるかどうか悩んでいます...奇妙な

4

4 に答える 4

3

オブジェクトのクラス名として使用するものを指定できるオプションがありますがsbHolder、CSSを書き直す必要があるため、これを変更する必要はありません。適用する追加のクラスを設定できると便利ですが、そうではありません。

select要素の周りにラッパーを配置し、CSSを使用してデフォルトの幅をオーバーライドしますhttp://jsfiddle.net/FQKax/8/

.wrapper-one .sbHolder{
    width: 500px;
}

.wrapper-two .sbHolder {
    width: 200px;
}


<div class="wrapper-one">
<select id="language">
    <option value="javascript">Javascript</option>
    <option value="objective-c">Objective C</option>
    <option value="python">Python</option>
</select>
</div>
<br/><br/>

<div class="wrapper-two">
<select id="language2">
    <option value="javascript">Javascript</option>
    <option value="objective-c">Objective C</option>
    <option value="python">Python</option>
</select>
</div>

これにはマークアップを追加する必要がありますが、@cihの答えは追加しません。それに応じて各インスタンスをマークするためにjQueryを使用する必要がありますhttp://jsfiddle.net/FQKax/37/ 

$("#language").selectbox();
$("#language2").selectbox();

$(".sbHolder").each(function(index){
    $(this).addClass('instance-' + index);
});

.instance-0.sbHolder{
    width: 500px;
}

.instance-1.sbHolder {
    width: 200px;
}
于 2012-10-12T23:04:15.033 に答える
1 
$(".sbHolder").first().addClass("first");

これにより、最初のチェックボックスでターゲットにできるクラスが追加されます。複数のセレクターを反復処理するためのより良い方法があります。このリンクを確認してください。

それ以外は、ジョーが残りの質問に答えます。

于 2012-10-12T23:02:33.283 に答える
1

これを試してください http://jsfiddle.net/FQKax/30/

<link href="http://select-box.googlecode.com/svn/tags/0.2/jquery.selectbox.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script type="text/javascript" src="http://select-box.googlecode.com/svn/tags/0.2/jquery.selectbox-0.2.min.js"></script>


<select id="language">
 <option value="javascript">Javascript</option>
 <option value="objective-c">Objective C</option>
 <option value="python">Python</option>
</select>
<br/><br/>

<select id="language2">
  <option value="javascript">Javascript</option>
  <option value="objective-c">Objective C</option>
  <option value="python">Python</option>
 </select>


  ##### JQUERY #######
      $(function () {
        $("#language").selectbox();
        $("#language2").selectbox();
        $(".sbHolder").each(function(){
          var $langDom = $(this);
          if($langDom.prev().attr('id') == 'language'){
            $langDom.addClass("language_1");  
          } else if($langDom.prev().attr('id') == 'language2') {
            $langDom.addClass("language_2");          
         }
       });
     });

    ###### CSSS TO ADD #####
   .language_1{
     width: 1200px;
    }

    .language_2{
      width: 200px;
     }

</ p>

于 2012-10-12T23:11:04.460 に答える
0

テキストの色については、変更.sbOptions a:link, .sbOptions a:visited {}および/または.sbOptions a:hover, .sbOptions a:focus, .sbOptions a.sbFocus {}。

幅の場合、.sbOptionsはドロップダウン幅、.sbHolder {}は「現在選択されている」アイテムの幅です。

于 2012-10-12T22:56:40.487 に答える