Tworzenie kontrolera woluminu za pomocą suwaka jQuery UI

Jeśli jesteś łowcą freebiesów, są szanse, że pobrałeś wiele interfejsów użytkownika PSD (UI). Niektóre z nich są naprawdę niesamowite i mogą zaoszczędzić nasz czas, prototypując projekt, nad którym pracowaliśmy.

W tym poście zakodujemy interfejs PSD i zamienimy go w coś bardziej funkcjonalnego. Zamierzamy zakodować następujący suwak interfejsu użytkownika PSD, który zostanie zastosowany jako motyw jQuery UI Slider.

jednak, zanotuj proszę ten samouczek jest przeznaczony poziomy pośrednie doświadczenia. Powiedziawszy to, nadal jest stosunkowo łatwy do naśladowania, o ile dobrze znasz CSS i jQuery.

W porządku, teraz zacznijmy.

Krok 1: interfejs jQuery

Oczywiście potrzebujemy biblioteki jQuery i biblioteki jQuery UI i mamy dwie możliwości ich wykorzystania. Po pierwsze, możemy połączyć jQuery i jQuery UI bezpośrednio z następującego CDN: Google Ajax API CDN, Microsoft CDN i jQuery CDN, istnieje wiele zalet korzystania z hostowanego pliku CDN, gdy umieszczamy naszą stronę na żywo online.

Ale ponieważ będziemy pracować nad tym tylko offline, będziemy korzystać z druga zamiast tego.

Pobierz i dostosuj bibliotekę jQuery UI z oficjalnej strony pobierania. Ponieważ potrzebujemy jedynie wtyczki Slider, wybierzemy tylko bibliotekę Slider wraz z jej zależnościami i pozostawimy pozostałe. W ten sposób pliki, których używamy będą znacznie cieńsze i mogą ładować się szybciej. Następnie połącz wszystkie te biblioteki z dokumentem HTML, najlepiej na dole strony lub przed zamknięciem tag dokładnie.

Krok 2: znaczniki HTML

Znaczniki suwaka są bardzo proste, zawinęliśmy wszystkie niezbędne znaczniki - podpowiedź, suwak i wolumin - wewnątrz HTML5 Sekcja etykietka. Interfejs użytkownika jQuery automatycznie wygeneruje resztę.

Krok 3: Zainstaluj interfejs suwaka

Poniższy fragment zainstaluje suwak na stronie, ale stosuje tylko konfigurację domyślną.

 $ (function () $ ("#slider") .slider (););

W ten sposób nieco poprawimy suwak, dodając inne konfiguracje.

Po pierwsze, przechowujemy element suwaka jako zmienną.

 var slider = $ ('# suwak'),

Następnie ustawiamy minimalną wartość domyślną suwaka, która ma być 35, kiedy jest po raz pierwszy załadowany.

 slider.slider (zakres: "min", wartość: 35,);

W tym momencie nie zobaczymy jeszcze niczego w przeglądarce, ponieważ jest to interfejs jQuery w zasadzie tylko generowanie znaczników. Musimy więc zastosować kilka stylów, aby wizualnie zobaczyć wynik w przeglądarce.

Krok 4: Style

Przed kontynuowaniem potrzebujemy zasobów z pliku źródłowego PSD, takich jak tekstura tła i ikona.

Nie będziemy rozmawiać jak pokroić w tym artykule skupimy się tylko na kodzie. Jeśli nie masz pewności, jak pokroić, przed kontynuowaniem obejrzyj poniższy screencast.

Konwertowanie projektu z PSD na HTML - Nettuts+

W porządku, teraz zacznijmy dodawać style.

Zaczniemy od ustawienia suwaka pośrodku okna przeglądarki i dołączenia tła, które wycięliśmy z PSD do ciało.

 body background: url ('… /images/bg.jpg') powtórz górne lewe;  sekcja szerokość: 150px; height: auto; margin: 100px auto 0; pozycja: względna;

Następnie zastosujemy style dla podpowiedź, objętość, Uchwyt, suwak zasięg i suwak samo.

Zrobimy tę część po części, zaczynając od…

Suwak

Ponieważ nie zdefiniowaliśmy maksymalnej wartości samego suwaka, interfejs jQuery zastosuje domyślne; to jest 100. Dlatego możemy również złożyć wniosek 100 (px) dla suwaka szerokość.

 #slider border-width: 1px; border-style: solid; border-color: # 333 # 333 # 777 # 333; border-radius: 25px; szerokość: 100px; pozycja: absolutna; wysokość: 13px; kolor tła: # 8e8d8d; background: url ('… /images/bg-track.png') powtórz górny lewy; box-shadow: wstawka 0 1px 5px 0px rgba (0, 0, 0, .5), 0 1px 0 0px rgba (250, 250, 250, .5); left: 20px;

Podpowiedź

Podpowiedź zostanie umieszczona nad suwakiem, określając jej pozycja absolutnie z -25px za to najwyższa pozycja.

 .podpowiedź pozycja: absolutna; Blok wyświetlacza; top: -25px; szerokość: 35px; wysokość: 20px; kolor: #fff; wyrównywanie tekstu: środek; czcionka: 10pt Tahoma, Arial, sans-serif; border-radius: 3px; granica: 1px bryła # 333; box-shadow: 1px 1px 2px 0px rgba (0, 0, 0, .3); wielkość pudełka: obramowanie; tło: gradient liniowy (góra, rgba (69,72,77,0,5) 0%, rgba (0,0,0,0,5) 100%);

Tom

Zmodyfikowaliśmy nieco ikonę głośności, aby spełnić nasz pomysł. Chodzi o to, że zamierzamy stworzyć efekt stopniowo zwiększaj pasek głośności zgodnie z wartością suwaka. Jestem pewien, że często widziałeś taki efekt w interfejsie użytkownika odtwarzacza multimedialnego.

 .volume display: inline-block; szerokość: 25px; wysokość: 25px; po prawej: -5px; background: url ('… /images/volume.png') no-repeat 0 -50px; pozycja: absolutna; margin-top: -5px;

Uchwyt interfejsu użytkownika

Styl rękojeści jest dość prosty; będzie mieć ikonę, która wygląda jak metalowe koło, pocięta z PSD i dołączona jako tło.

Zmienimy także tryb kursora na wskaźnik, więc użytkownik zauważy, że ten element jest przeciągalny.

 .uchwyt ui-slider position: absolute; z-index: 2; szerokość: 25px; wysokość: 25px; cursor: pointer; background: url ('… /images/handle.png') no-repeat 50% 50%; waga czcionki: pogrubiona; kolor: # 1C94C4; zarys: brak; top: -7px; lewy margines: -12px;

Zasięg suwaka

Zakres suwaka będzie miał lekko biały kolor gradientu.

 .zakres suwaka ui tło: liniowy-gradient (góra, #ffffff 0%, # eaeaea 100%); pozycja: absolutna; granica: 0; top: 0; wysokość: 100%; border-radius: 25px;

Krok 5: Efekt

W tym kroku zaczniemy pracować nad efektem specjalnym Slidera.

Podpowiedź

W tym momencie etykieta narzędzia nie ma jeszcze treści, więc wypełnimy ją wartością suwaka. Również pozycja pozioma podpowiedzi będzie odpowiadać pozycji uchwytu.

Po pierwsze, przechowujemy element podpowiedzi jako zmienną.

 var tooltip = $ ('. tooltip');

Następnie definiujemy efekt podpowiedzi, o którym wspominaliśmy powyżej w ramach zdarzenia slajdów.

 slide: function (event, ui) var value = slider.slider ('value'), tooltip.css ('left', value) .text (ui.value);

Ale chcemy też, aby etykieta narzędzia była początkowo ukryta.

 tooltip.hide ();

Po tym, kiedy uchwyt wkrótce zacznie się przesuwać, pojawi się z efektem zanikania.

 start: function (event, ui) tooltip.fadeIn ('fast'); ,

A kiedy użytkownik przestanie przesuwać uchwyt, etykieta narzędzi zniknie i zostanie ukryta.

 stop: function (event, ui) tooltip.fadeOut ('fast'); ,

Tom

Jak wspomnieliśmy powyżej w Sekcja Style, planujemy ikonę głośności, aby zmieniać się odpowiednio z pozycją uchwytu lub dokładniej, wartość suwaka. Tak więc zastosujemy następującą instrukcję warunkową, aby utworzyć ten efekt.

Ale, po pierwsze, przechowujemy element woluminu oraz wartość suwaka jako zmienną.

 volume = $ ('. volume');

Następnie zaczynamy instrukcję warunkową.

Gdy wartość suwaka jest mniejsza lub równa 5 ikona głośności nie będzie mieć żadnych pasków, co wskazuje, że głośność jest bardzo niska, ale gdy wartość suwaka rośnie, pasek głośności zacznie się zwiększać.

 jeśli (wartość <= 5)  volume.css('background-position', '0 0');  else if (value <= 25)  volume.css('background-position', '0 -25px');  else if (value <= 75)  volume.css('background-position', '0 -50px');  else  volume.css('background-position', '0 -75px'); ;

Połóż je wszystkie razem

W porządku, na wypadek, gdybyś pomylił się ze wszystkimi powyższymi rzeczami, nie bądź. Oto skrót. Umieść wszystkie następujące kody w swoim dokumencie.

 $ (function () var slider = $ ('# slider'), tooltip = $ ('. tooltip'); tooltip.hide (); slider.slider (zakres: "min", min: 1, wartość: 35, start: function (event, ui) tooltip.fadeIn ('fast');, slide: function (event, ui) var value = slider.slider ('value'), volume = $ ('. Volume '); tooltip.css (' left ', value) .text (ui.value); if (wartość <= 5)  volume.css('background-position', '0 0');  else if (value <= 25)  volume.css('background-position', '0 -25px');  else if (value <= 75)  volume.css('background-position', '0 -50px');  else  volume.css('background-position', '0 -75px'); ; , stop: function(event,ui)  tooltip.fadeOut('fast'); , ); );

Dobra, zobaczmy teraz wynik w przeglądarce.

Próbny
Pobierz źródło

Wniosek

Dzisiaj z powodzeniem stworzyliśmy bardziej elegancki motyw jQuery UI, ale jednocześnie z powodzeniem przetłumaczyliśmy interfejs użytkownika PSD na funkcjonalny kontroler głośności.

Mamy nadzieję, że ten poradnik Cię zainspiruje i pomoże ci zrozumieć, jak przekształcić PSD w produkt bardziej użyteczny.

Na koniec, jeśli masz jakiekolwiek pytania dotyczące tego samouczka, możesz dodać go w sekcji komentarzy poniżej.