HTML5 przyniósł mnóstwo nowych znaczników oraz zasad, według których należy używać starych tagów. Jednym z nich jest na przykład suwak, którym się dziś zajmiemy. Ta kontrolka jest obecna w systemach operacyjnych od lat, jednak dopiero teraz można ją zaimplementować do przeglądarki.

Powodem takiego opóźnienia prawdopodobnie jest to, iż łatwo jest stworzyć „wolno stojącą” wersję JavaScript suwaka. Jednakże ciężko było ją zaimplementować tak, aby działała w przeglądarce. Teraz jest to dużo wygodniejsze, przynajmniej dla przeglądarek, które obsługują suwaki.

Wsparcie przeglądarek

Wszystkie nowoczesne przeglądarki obsługują ten element z niechlubnym wyjątkiem Firefoxa (można to jednak łatwo odtworzyć z użyciem html5slider.js (http://frankyan.com/labs/html5slider/) . Oczywiście IE również nie obsługuje suwaków (nie ma tutaj niespodzianki). Niestety, dla produktu Microsoftu nie ma łatwej drogi na rozwiązanie tego problemu. Dobrą rzeczą jest to, że nawet jeśli przeglądarka nie obsługuje elementu suwaka, to pojawi się zwykłe pole tekstowe.

Jak to działa

Możesz zmienić te atrybuty tak, jak chcesz. Kod naszego suwaka wygląda następująco:

Fragment pliku index.html

<input id="defaultSlider" type="range" />

Obecna wartość: 0

A to jest kod jQuery, który wykrywa zmiany zdarzenia:

assets/js/slider-default.js

$(function(){
 
var currentValue = $('#currentValue');
 
$('#defaultSlider').change(function(){
currentValue.html(this.value);
});
 
// Trigger the event on load, so
// the value field is populated:
 
$('#defaultSlider').change();
 
});

Oczywiście ten kod działa tylko jeśli przeglądarka obsługuje element suwaka. W przeciwnym razie zostanie wyświetlone pole tekstowe.

Pomoc dla użytkowników Firefoxa

Jako, że 2/3 populacji Internetu nie jest w stanie zobaczyć naszego pięknego suwaka, jesteśmy zmuszeni użyć dodatkowo alternatywnego rozwiązania. Zbudujmy zatem szybką i mniej ładną jego wersję przy użyciu jQuery UI.

Fragment pliku slider-jqueryui.html

Obecna wartość: 0

Kod suwaka stworzonego przy użyciu jQuery UI możesz zobaczyć poniżej. Plik assets/js/slider-jqueryui.js

$(function(){
 
	var currentValue = $('#currentValue');
 
	$("#slider").slider({
		max: 500,
		min: 0,
		slide: function(event, ui) {
			currentValue.html(ui.value);
		}
	});
 
});

Kod jest bardzo prosty. Wykorzystuje on tylko metodę „slider”, a biblioteka jQuery robi całą resztę.

Czas zabawy

Możemy również użyć zupełnie innej formy wyświetlenia suwaka. Aby to uczynić, skorzystamy w wtyczki KnobKnob. Tak jak w poprzednich wersjach, będziemy tutaj mieli

<input type="range" />

jednakże będzie to ukryte. KnobKnob utworzy odpowiednią, obrotową kontrolkę, która zawierać będzie te same limity max i min jak oryginalny suwak. Z każdą zmianą będziemy aktualizować wartość ukrytego suwaka.

Plik slider-knob.html

<input id="slider" type="range" value="25" />

Obecna wartość: 0

Część jQuery wygląda tak: Plik assets/js/slider-knob.js

$(function(){
 
	var slider = $('#slider'),
		min = slider.attr('min'),
		max = slider.attr('max'),
		currentValue = $('#currentValue');
 
	// Hiding the slider:
	slider.hide();
 
	$('#control').knobKnob({
		snap : 10,
		value: 250,
		turn : function(ratio){
			// Changing the value of the hidden slider
			slider.val(Math.round(ratio*(max-min) + min));
 
			// Updating the current value text
			currentValue.html(slider.val());
		}
	});
 
});

Powyższy kod pobiera atrybuty min i max, a następnie używa ich do obliczenia odpowiedniej wartości suwaka.

Wnioski

Suwak jest niewątpliwie bardzo przydatny, dając użytkownikom możliwość łatwej modyfikacji wartości bez konieczności wpisania jej w polu tekstowym. Chociaż istnieje wiele do życzenia w zakresie wsparcia przeglądarek, można użyć alternatywnej wersji stworzonej przy pomocy jQuery UI.

Może Cię zainteresować:

1. Czym jest localStorage i jak je wykorzystać z HTML5
2. Tworzymy stronę w HTML5
3. HTML5 – co może pójść nie tak?