入力範囲を持つトグルスイッチを偽造する、カスタム範囲を扱う

Question

入力範囲でトグルスイッチを偽造する必要があります。 考えられるのは、minとmaxの2つの値だけで短い範囲を作成することです。 cssボタンは範囲の一端に一致します。ここまでをクリックすると、範囲を含むdivがマウスの下にレンジャーのもう一方の端を持っていく少し移動します。

この機能はページのすべての入力範囲に適用されます。しかし、私はそれをすべてのクラスではなく、いくつかのクラスでのみ適用する必要があります。しかし、私は正しい構文を見つけることができないし、それは動作しません。

Javascriptを：

$('input[type="range"]').on('change', function() { 
$('div#launcher01').css('margin-top', parseInt($(this).val() ) > 0 ? parseInt($(this).val() ) + 'px' : '0px'); 
    }); 

CSS：

.fakbl input { 
height: 50px; 
width: 50px; 

HTML：あなたはすでにjQueryのを使用しているので

<div id="launcher01"> 
<div class="fakbl"> 
<input type="range" id="launch01" name="launch01" min="0" max="50" step="50"" /> 
</div> 
</div> 

Fiddle

Answer 1

、あなたがPHRすることができますjQueryプラグインとしてあなたのウィジェットメーカーアーゼ次のように：

$.fn.rangeButton = function(containerSelector) { 
    return this.each(function() { 
     var $self = $(this); 
     $self.on('change', function() { 
      $self.closest(containerSelector).css('margin-left', ($self.val()/3) > 0 ? ($self.val()/3) + 'px' : '0px'); 
     }).trigger('change'); // trigger 'change' immediately to initialize everything. 
    }); 
}; 

を今、あなたの範囲のそれぞれにウィジェットを起動し、適切なコンテナのためのセレクタを渡す：

$('#launcher01 input[type="range"]').rangeButton('#launcher01'); 
$('#launcher02 input[type="range"]').rangeButton('#launcher02'); 

Demo

また、すべてのコンテナに同じクラスを与えることで、1つのコマンドですべてのウィジェットを呼び出すことができます。

$('.myClass input[type="range"]').rangeButton('.myClass'); 

Demo

Answer 2

私は洗練をしてください聞いてもいいですか？

私は偽のボタンを完了しました。あなたはこのFIDDLE

で見ることができるように（白いボックスが消え、私はちょうどボタンが動作していることを示すために、これまでいくつかの不透明度を追加しました） 赤箱（今緑による私のバギーのコード部分には）であります背景と私はそれに応じて色を変更する必要があります。私はこれを試しましたが、うまくいきません。ここで コード：

$.fn.rangeButton = function(containerSelector) { 
     return this.each(function() { 
      var $self = $(this); 
      $self.on('change', function() { 
       $self.closest(containerSelector).css('margin-left',  ($self.val()/3) > 0 ? ($self.val()/3) + 'px' : '0px'); 


    // this part is not working, if you remove this part, the button works flawlessy 
      if ($self = 100) { 
       document.getElementById("fakbuttonsfondo01").style.backgroundColor="rgb(0, 191, 1)"; 
      } else { 
       document.getElementById("fakbuttonsfondo01").style.backgroundColor="rgb(0, 0, 255)"; 
      } 
    // end of buggy code 



      }).trigger('change'); // trigger 'change' immediately to initialize everything. 
     }); 
    }; 

    $('#launcher01 input[type="range"]').rangeButton('#launcher01'); 
    $('#launcher02 input[type="range"]').rangeButton('#launcher02'); 

感謝:)