3

数時間検索しましたが、カスタム スクロールバー/矢印を含むボックスの例は 0 件しか見つかりませんでした。それが不可能であり、最善のアイデアはそれをしないことであると話している人々のいくつかの参照を見つけることができました.

これらのアドバイス以外に、これに対するクロスブラウザ互換のソリューションはありますか? サイズのカスタムスクロールバーを現在使用しているサイトを知っている人はいますか?そのコードを見ることができますか?

ありがとう。

4

1 に答える 1

0

通常、<select>要素はオンザフライで巧妙に作成された と のセットに置き換えられて<div>非表示になり、 にいくつかのイベント委譲が行われるため、 hidden で実際のオプションを選択できます。<ul><li><li><select>

たとえば、次のようになります。

 $(function(){
    $('select:visible').each(function(){
       var 
          $this = $(this), 
          $select = $('<div/>', {
            'css':{
              'display': 'inline-block',
              'position': 'relative'
            }
          }),
          $items, $ul,
          $display = $('<p/>');

       $this.hide();
       $items = $this.find('option').map(function(){ return '<li data-value="'+this.value+'">'+$(this).text()+'</li>'; }).get().join(''); // map the options from the select in an html string

       $ul = $('<ul/>', {
         'css':{
           'display':'none',
           'position':'absolute',
           'bottom': '0',
           'width': 'inherit'
         }
       });

       $ul.append($items); // append the items from the original select

       $select.append($display).append($ul); // create the "fake" select
       $this.before($select);

       $ul.on('click', 'li', function(e){
          $display.text($(e.target).text()); // set the text of your select
          $this.val($(e.target).data('value')); // set the value of the original select that is hidden
       });

       $select.click(function(){
         $ul.toggle(); // show/hide the items
       });
    });
 });

私は今このコードを作成しましたが、テストしていませんが、それがアイデアです。すべてのスタイリング (CSS) はあなた次第です。white-space: nowrap;必要に応じて拡張できるように、LI のクラスを必ず設定してください。

このすべてのカスタム HTML を使用して、独自の矢印を追加できます。スクロールバーについては、jScrollpane などの既存のソリューションを使用し$ulて、アイテムを保持するアイテムにアタッチし、 max-heightcss スタイルを効果的に設定することを思い出させることができます。

于 2012-12-03T20:17:46.640 に答える