Połącz się z nami

Internet Maker

Suwak w HTML5

Opublikowane

dnia

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

zawiera tak naprawdę wszystko, czego potrzebujesz, aby wyświetlić na swojej stronie suwak. Obsługuje on bowiem atrybut value, max, min oraz step (domyślnie 1). Użyte przeze mnie atrybuty najlepiej zobrazuje poniższa tabelka:

Atrybut

Wartość

Domyślnie

Opis

value Liczba

Nie ustawiono

Domyślna pozycja suwaka.
min Liczba

0

Dolny limit zakresu. Jest to wartość, która wyświetla się, gdy suwak jest przesunięty maksymalnie do lewej.
max Liczba

500

Górny limit zakresu. Jest to wartość, która wyświetla się, gdy suwak jest przesunięty maksymalnie do prawej.
step Liczba

1

Liczba, o którą zmienia się wartość suwaka z każdym jego ruchem.

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

Fragment pliku index.html

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

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

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.

Student Informatyki i Ekonometrii na Politechnice Gdańskiej, zapalony fotograf i multiinstrumentalista.

Kontynuuj czytanie
Reklama
Kliknij, by skomentować

Zostaw komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

Internet Maker

Pozycjonowanie strony internetowej a reklamy w Internecie – czym się różnią?

Nie masz cierpliwości do pozycjonowania? Skorzystaj z pomocy profesjonalistów!

Opublikowane

dnia

przez

Chcesz osiągnąć sukces w e-biznesie i zwiększyć widoczność swojej strony w sieci? Nie pozostaje Ci nic innego jak zająć się promocją witryny. Zacznij od inwestycji w pozycjonowanie, czyli zgodnej ze wskazówkami Google optymalizacji strony pod wyszukiwarkę internetową. Pamiętaj, że największa ilość wejść pochodzi właśnie z wyszukiwarek, dlatego zajmowanie wysokiej pozycji w rankingu Google szybko przełoży się na lepsze statystyki.

(więcej…)

Kontynuuj czytanie

Internet Maker

Jak szybko i łatwo stworzyć stronę mobilną

Opublikowane

dnia

W dzisiejszych czasach coraz bardziej popularne staje się przeglądanie stron internetowych na urządzeniach mobilnych. Ba! Samo surfowanie po sieci to w sumie już przeszłość – obecnie zakupy czy płatności mobilne to chleb powszedni dla polskich internautów. 

(więcej…)

Kontynuuj czytanie

Internet Maker

Strona na WordPressie? Grunt to dobry hosting

Opublikowane

dnia

WordPress jest powszechnie uważany za najlepszy system zarządzania treścią zarówno dla prostych blogów i stron, jak i większych serwisów internetowych oraz sklepów. Szacuje się, że już 23% witryn na świecie korzysta z WordPressa, a wśród nich takie marki jak BBC,  MTV czy Sony.

(więcej…)

Kontynuuj czytanie

Internet Maker

Jak zabezpieczyć swoje zdjęcia w chmurze

Opublikowane

dnia

Niedawny wyciek nagich zdjęć znanych osobistości wznowił dyskusje na temat bezpieczeństwa naszych prywatnych danych. Jako że część fotografii została wykradziona poprzez iCloud, prezentujemy dziś jak zabezpieczyć swoje dane w chmurze. (więcej…)

Kontynuuj czytanie

Internet Maker

Jak usunąć historię swojej aktywności z Facebooka?

Opublikowane

dnia

Usunięcie swojej aktywności z Facebooka nie jest takie proste, jakby się mogło wydawać. Portal społecznościowy daje możliwość zachowania kopii swoich postów oraz zamknięcia całego konta, jednak co w przypadku gdy chcemy usunąć tylko poszczególne wpisy? (więcej…)

Kontynuuj czytanie
Reklama

Popularne