Fake einen Kippschalter mit einem Eingabebereich, Umgang mit benutzerdefinierten Bereich

Question

Ich muss einen Kippschalter mit einem Eingabebereich vortäuschen. Die Idee ist, eine kurze Reichweite zu schaffen, mit nur 2 Werten, min und max. Die CSS-Taste entspricht einem Ende des Bereichs. Bisher klickst du darauf, das div, das den Bereich enthält, bewegt sich ein wenig und bringt das andere Ende des Waldläufers unter deine Maus.

Ich habe diese Funktion, die für alle Eingabebereiche auf der Seite gilt. Aber ich muss es nur auf einige Klassen anwenden, nicht alle. Aber ich kann nicht die richtige Syntax finden und es funktioniert nicht.

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

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

Fiddle

Answer 1

Da Sie bereits jQuery verwenden, können Sie phr ase Ihr Widget-Maker als jQuery-Plugin wie folgt:

$.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. 
    }); 
}; 

Nun rufen Sie das Widget auf jedem Ihrer Bereiche und einen Selektor für den entsprechenden Behälter passieren:

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

Demo

Alternativ können Sie alle Widgets mit einem einzigen Befehl aufrufen, indem Sie allen Containern dieselbe Klasse zuweisen:

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

Demo

Answer 2

Darf ich fragen, eine Verfeinerung bitte?

Ich habe die gefälschte Schaltfläche abgeschlossen. Wie Sie in dieser FIDDLE

(das weißen Feld verschwinden, habe ich ihm etwas Opazität nur um zu zeigen, dass die Taste funktioniert) sehen Die rote Box (jetzt grün aufgrund meines fehlerhaften Code Teil) ist in dem Hintergrund und ich würde es brauchen, um die Farbe je nach Status zu ändern. Ich habe das versucht, aber es funktioniert nicht. Hier ist der Code:

$.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'); 

Thanks :)