Hjemmeside » Coding » Opprette en volumkontroll med jQuery UI Slider
Opprette en volumkontroll med jQuery UI Slider
Hvis du er en freebiesjeger, er det sjansene for at du har lastet ned mange PSD-brukergrensesnitt (brukergrensesnitt). Noen av dem er virkelig fantastiske og kan spare tid ved å prototypere designet vi jobbet med.
I dette innlegget vil vi kode en PSD-brukergrensesnitt og gjøre det til noe mer funksjonelt. Vi skal kode følgende PSD UI Slider for å bli brukt som jQuery UI Slider tema.
derimot, Vennligst noter at denne opplæringen er ment for mellomstore nivåer av erfaring. Når det er sagt, er det fortsatt relativt enkelt å følge, så lenge du er ganske kjent med CSS og jQuery.
Ok, nå la oss komme i gang.
Trinn 1: jQuery-brukergrensesnittet
Vi trenger åpenbart jQuery og jQuery UI Library, og vi har to muligheter til å bruke dem. For det første kan vi koble jQuery og jQuery UI direkte fra følgende CDN: Google Ajax API CDN, Microsoft CDN og jQuery CDN, det er mange fordeler ved å bruke den vertsbaserte CDN-filen når vi legger nettstedet vårt til live online.
Men siden vi bare vil jobbe med det offline, vil vi bruke sekund vei i stedet.
Vi laster ned og tilpasser jQuery UI-biblioteket fra den offisielle nedlastingssiden. Da vi bare trenger Slider-pluginet, velger vi bare Slider-biblioteket sammen med dets avhengigheter og lar de andre. På den måten blir filene vi bruker, mye slankere og kan lastes raskere. Deretter kobler du alle disse bibliotekene til HTML-dokumentet, helst nederst på siden eller før lukkingen
tag for å være eksakt.
Trinn 2: HTML markup
Markeringen for glidebryteren er veldig enkel, vi pakket inn alt nødvendig merking - verktøytipset, glidebryteren og volumet - inne i en HTML5 seksjon stikkord. JQuery-brukergrensesnittet genererer deretter resten automatisk.
Trinn 3: Installer glidebryteren
Utsnittet nedenfor vil installere Slider på siden, men det gjelder bare standardkonfigurasjonen.
$ (funksjon () $ ("#slider") .slider (););
Så her vil vi forbedre skyvekontrollen litt ved å legge til andre konfigurasjoner.
Først lagrer vi skyveelementet som en variabel.
var glidebryter = $ ('# glidebryter'),
Deretter angir vi minimumsverdien for skyveknappen for å være omtrent 35, når den først er lastet.
slider.slider (rekkevidde: "min", verdi: 35,);
På dette tidspunktet vil vi ikke se noe i nettleseren enda, fordi jQuery brukergrensesnittet er I utgangspunktet bare genererer markeringen. Så, vi må bruke noen stiler for å begynne å se resultatet visuelt i nettleseren.
Trinn 4: Stilene
Før vi fortsetter, trenger vi noen ressurser fra PSD-kildefilen, som bakgrunnstekstur og ikonet.
Vi snakker ikke om hvordan å skjære I denne artikkelen vil vi bare fokusere på koden. Hvis du ikke er sikker på hvordan du skal skille, må du se følgende screencast først før du fortsetter.
Konvertere et design fra PSD til HTML - Nettuts+
OK, la oss begynne å legge stilene.
Vi starter med å plassere skyveknappen midt i nettleservinduet og legge til bakgrunnen vi hadde skåret ut fra PSD til kropp.
kropp bakgrunn: url ('... /images/bg.jpg') gjenta øverst til venstre; seksjon bredde: 150px; høyde: auto; margin: 100px auto 0; posisjon: relativ;
Deretter bruker vi stilene for verktøytipset, volumet, håndtaket, skyveknappen område og glidebryteren seg selv.
Vi vil gjøre denne delen av en del, begynner med ...
Slider
Siden vi ikke definerte maksimumsverdien for skyvekontrollen, vil jQuery brukergrensesnittet bruke standardverdien; det er 100. Derfor kan vi også søke 100 (px) for glidebryteren bredde.
Vi har endret volumikonet litt for å møte ideen vår. Tanken er at vi skal skape en effekt til løft volumstangen gradvis i samsvar med glidebryterens verdi. Jeg er sikker på at du ofte sett en slik effekt i et mediaspiller brukergrensesnitt.
I dette trinnet skal vi begynne å jobbe med Sliderens spesielle effekt.
tooltip
På dette tidspunktet har verktøytipset ikke noe innhold, så vi skal fylle det med skyveverdien. Også verktøytipsets horisontale posisjon samsvarer med håndtakets posisjon.
Først av alt lagrer vi verktøytipselementet som en variabel.
var tooltip = $ ('.tooltip');
Deretter definerer vi verktøytipsens effekt som vi har nevnt ovenfor inne i Slide Event.
lysbilde: funksjon (hendelse, ui) var verdi = slider.slider ('verdi'), tooltip.css ('left', verdi) .text (ui.value);
Men vi vil også at verktøytipset skal være skjult.
tooltip.hide ();
Etter det, når håndtak skal begynne å glide, det vil bli vist med en fade-in effekt.
Som vi har nevnt ovenfor i Stiler seksjon, Vi planlegger volumikonet for å endre tilsvarende med håndtakets posisjon eller for å være nøyaktig, glidebryterens verdi. Så, vi vil anvende følgende betingede utsagn for å skape denne effekten.
Men for det første lagrer vi volumelementet og glidebryterens verdi som en variabel.
volum = $ ('volum');
Da starter vi betinget utsagn.
Når glidebryterens verdi er lavere eller lik 5 Volumikonet har ingen knapper i det hele tatt, noe som indikerer at volumet er veldig lavt, men når skyveverdien øker, begynner volumstangen også å øke.
if (verdien <= 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'); ;
Sett dem alle sammen
Ok, hvis du er forvirret med alle de ovennevnte ting, ikke vær. Her er snarveien. Sett alle følgende koder i dokumentet ditt.
