Crearea unui controler de volum cu glisorul jQuery UI

Dacă sunteți un vânător de freebies, este posibil să fi descărcat o mulțime de interfețe de utilizator PSD (UI). Unele dintre ele sunt cu adevărat uimitoare și ne-ar putea economisi timp prin prototiparea designului pe care lucram.

În acest post vom codifica un UI PSD și îl vom transforma într-un ceva mai funcțional. Vom codifica următorul Slider UI PSD pentru a fi aplicat ca temă jQuery UI Slider.

in orice caz, te rog noteaza că acest tutorial este destinat nivelurile intermediare de experiență. Cu toate acestea, este relativ ușor de urmărit, atâta timp cât sunteți destul de familiarizat cu CSS și jQuery.

Bine, acum să începem.

Pasul 1: interfața jQuery

Evident, avem nevoie de Biblioteca UI jQuery și jQuery și avem două opțiuni de utilizare a acestora. Mai întâi, putem conecta UI-ul jQuery și jQuery direct de la următoarele CDN: Google Ajax API CDN, Microsoft CDN și jQuery CDN, există multe avantaje ale utilizării fișierului CDN găzduit când punem site-ul nostru online.

Dar din moment ce vom lucra numai la el offline, vom folosi al doilea în schimb.

Vom descărca și personaliza biblioteca jQuery UI din pagina de descărcare oficială. Deoarece avem nevoie doar de pluginul Slider, vom selecta doar biblioteca Slider împreună cu dependențele sale și vom lăsa celelalte. Astfel, fișierele pe care le folosim vor fi mult mai subțiri și se vor putea încărca mai repede. După aceea, conectați toate aceste biblioteci la documentul HTML, de preferință în partea de jos a paginii sau înainte de închidere eticheta pentru a fi exactă.

Pasul 2: Marcarea HTML

Marcajul pentru glisor este foarte simplu, am împachetat toate marcările necesare - butonul, glisorul și volumul - în interiorul unui HTML5 secțiune etichetă. Aplicația jQuery va genera automat restul.

Pasul 3: Instalați interfața cursorului

Fragmentul de mai jos va instala cursorul pe pagină, dar se aplică numai configurația implicită.

 $ (funcția () $ ("#slider") .slider ();); 

Deci, aici vom îmbunătăți puțin cursorul prin adăugarea altor configurații.

Mai întâi, stocăm elementul glisant ca variabilă.

 var cursorul = $ ('# slider'), 

Apoi am setat valoarea implicită minimă a cursorului să fie aproximativ 35, când este încărcat pentru prima dată.

 slider.slider (interval: "min", valoare: 35,); 

În acest moment, nu vom vedea nimic încă în browser, deoarece interfața jQuery este practic doar generarea marcajului. Deci, trebuie să aplicăm anumite stiluri pentru a începe să vedem rezultatul vizual în browser.

Pasul 4: Stilurile

Înainte de a continua, avem nevoie de anumite elemente din fișierul sursă PSD, cum ar fi textura de fundal și pictograma.

Nu vom vorbi cum să felie în acest articol, ne vom concentra doar pe cod. Dacă nu sunteți sigur cum să tăiați, urmăriți mai întâi ecranul de mai jos înainte de a continua.

• Conversia unui design de la PSD la HTML - Nettuts+

Bine, acum să începem să adăugăm stilurile.

Vom începe prin poziționarea cursorului în centrul ferestrei browserului și vom atașa fundalul pe care l-am scos din PSD la corp.

 corp background: url ('... /images/bg.jpg') repetați la stânga sus;  secțiunea width: 150px; înălțime: auto; margine: 100px auto 0; poziția: relativă;  

Apoi, vom aplica stilurile pentru tooltip-ul, volumul, mânerul, glisorul gamă si cursor în sine.

Vom face acest lucru parțial, începând cu ...

cursor

Deoarece nu am definit valoarea maximă pentru Slider în sine, jQuery UI va aplica implicit; acesta este 100. Prin urmare, putem aplica, de asemenea 100 (px) pentru glisorul lăţime.

 #slider border-width: 1px; stilul frontal: solid; frontieră-culoare: # 333 # 333 # 777 # 333; raza de graniță: 25px; lățime: 100px; poziția: absolută; înălțime: 13px; fundal-culoare: # 8e8d8d; background: url ('... /images/bg-track.png') repetați la stânga; box-shadow: inset 0 1px 5px 0px rgba (0, 0, 0, .5), 0 1px 0 0px rgba (250, 250, 250, .5); stânga: 20px;  

tooltip

Bara de instrumente va fi poziționată deasupra cursorului prin specificarea acestuia poziția absolută cu -25px pentru ei poziția superioară.

 .tooltip poziție: absolută; afișare: bloc; top: -25px; lățime: 35px; înălțime: 20px; culoare: #fff; text-align: centru; font: 10pt Tahoma, Arial, sans-serif; raza de graniță: 3px; frontieră: 1px solid # 333; box-shadow: 1px 1px 2px 0px rgba (0, 0, 0, .3); dimensiunea cutiei: caseta de margine; fundal: gradient liniar (top, rgba (69,72,77,0,5) 0%, rgba (0,0,0,0,5) 100%);  

Volum

Am modificat pictograma volumului puțin pentru a ne îndeplini ideea. Ideea este că vom crea un efect ridicați treptat bara de volum în conformitate cu valoarea cursorului. Sunt sigur că ați văzut adesea un astfel de efect într-o interfață de utilizator pentru player media.

 .volum display: inline-block; lățime: 25px; înălțime: 25px; dreapta: -5px; fundal: url ('... /images/volume.png') nu-repeta 0 -50px; poziția: absolută; margin-top: -5px;  

UI Handle

Stilul mânerului este destul de simplu; va avea o icoană care arată ca un cerc metalic, tăiată din PSD și atașată ca fundal.

De asemenea, vom schimba modul cursor la ac indicator, astfel încât utilizatorul va observa că acest element este drag-able.

 .ui-glisor-mâner poziție: absolută; z-index: 2; lățime: 25px; înălțime: 25px; cursor: pointer; fundal: url ('... /images/handle.png') nu-repeta 50% 50%; font-weight: bold; culoare: # 1C94C4; contur: nici unul; top: -7px; margin-stânga: -12px;  

Gama Slider

Gama de culori va avea o culoare gradientă ușor albă.

 .ui-cursor-gama fundal: gradient liniar (top, #ffffff 0%, # eaeaea 100%); poziția: absolută; frontieră: 0; top: 0; înălțime: 100%; raza de graniță: 25px;  

Pasul 5: Efectul

În acest pas vom începe să lucrăm la efectul special al Slider.

tooltip

În acest moment, tooltip-ul nu are încă conținut, deci îl vom umple cu valoarea cursorului. De asemenea, poziția orizontală a instrumentului va corespunde poziției mânerului.

Mai întâi de toate, stocăm elementul tooltip ca variabilă.

 var tooltip = $ ("tooltip"); 

Apoi definim efectul instrumentului pe care l-am menționat mai sus în cadrul evenimentului Slide.

 slide: funcție (eveniment, ui) var value = slider.slider ('valoare'), tooltip.css ('stânga', valoare) .text (ui.value); 

Dar, de asemenea, dorim să fie inițial ascunsă instrumentul.

 tooltip.hide (); 

După aceea, când mâner este pe punctul de a începe să alunece, va fi arătat cu efect de estompare.

 start: funcție (eveniment, ui) tooltip.fadeIn ('rapid'); , 

Și când utilizatorul oprește alunecarea mânerului, vârful de instrument va dispărea și va fi ascuns.

 stop: funcție (eveniment, ui) tooltip.fadeOut ('rapid'); , 

Volum

Așa cum am menționat mai sus în Stiluri de sectiune, planificăm pictograma volumului pentru a schimba corespunzător poziția mânerului sau pentru a fi exactă, valoarea cursorului. Deci, vom aplica următoarea declarație condiționată pentru a crea acest efect.

Dar, în primul rând, stocăm elementul de volum, precum și valoarea glisorului ca variabilă.

 volum = $ ('. volum'); 

Apoi începem declarația condiționată.

Când valoarea cursorului este mai mică sau egală cu 5 pictograma volumului nu va conține niciun bara, indicând faptul că volumul este foarte scăzut, dar când valoarea cursorului este în creștere, bara de volum va începe să crească și ea.

 în cazul în care (valoare <= 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'); ; 

Pune-le pe toate împreună

În regulă, în caz că ești confuz cu toate lucrurile de mai sus, nu fi. Iată scurtătura. Puneți toate codurile următoare în documentul dvs..

 $ slider.slider (interval: "min", min: 1, valoare: $ (functie () 35, start: functie (eveniment, ui) tooltip.fadeIn ('fast'); slide: functie (event, ui) var value = slider.slider '); tooltip.css (' stânga ', valoare) .text (ui.value); dacă (valoare <= 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'); , ); ); 

În regulă, să vedem rezultatul în browser.

• Demo
• Descărcați sursa

Concluzie

Astăzi am creat cu succes o temă jQuery UI mai elegantă, dar în același timp am tradus cu succes și o interfață de utilizator PSD într-un controler de volum funcțional.

Sperăm că acest tutorial te inspiră și te-ar putea ajuta să înțelegi cum să transformi un PSD într-un produs mai util.

În cele din urmă, dacă aveți întrebări cu privire la acest tutorial, nu ezitați să o adăugați în secțiunea de comentarii de mai jos.