Hjemmeside » Coding » Oprettelse af en lydstyring med jQuery UI-skyderen
Oprettelse af en lydstyring med jQuery UI-skyderen
Hvis du er en freebiesjæger, er du chancen for, at du har downloadet mange PSD-brugergrænseflader (brugergrænseflader). Nogle af dem er virkelig fantastiske og kunne spare vores tid ved at prototyper det design, vi arbejdede på.
I dette indlæg vil vi kode en PSD brugerflade og gøre det til noget mere funktionelt. Vi skal kode følgende PSD UI Slider til at blive anvendt som jQuery UI Slider tema.
Imidlertid, Bemærk venligst at denne vejledning er beregnet til mellemliggende niveauer erfaring. Når det er sagt, er det stadig relativt nemt at følge, så længe du er ret bekendt med CSS og jQuery.
Okay, lad os nu komme i gang.
Trin 1: jQuery-brugergrænsefladen
Vi har naturligvis brug for jQuery og jQuery UI Library, og vi har to muligheder for at udnytte dem. For det første kan vi forbinde jQuery og jQuery UI direkte fra følgende CDN: Google Ajax API CDN, Microsoft CDN og jQuery CDN, der er mange fordele ved at bruge den hostede CDN-fil, når vi sætter vores websted live online.
Men da vi kun vil arbejde på det offline, bruger vi sekund måde i stedet.
Vi downloader og tilpasser jQuery UI-biblioteket fra den officielle downloadside. Da vi kun har brug for Slider-pluginet, vælger vi kun Slider-biblioteket sammen med dets afhængigheder og forlader de andre. På den måde vil de filer, vi bruger, være meget slankere og kan indlæses hurtigere. Derefter forbinder alle disse biblioteker til HTML-dokumentet, helst nederst på siden eller før tætningen
tag for at være præcis.
Trin 2: HTML markup
Markeringen til skyderen er meget enkel, vi har pakket alle nødvendige markeringer - værktøjstip, skyderen og lydstyrken - inde i en HTML5 afsnit tag. JQuery-brugergrænsefladen genererer derefter resten automatisk.
Trin 3: Installer skyderen UI
Udsnittet nedenfor installerer skyderen på siden, men det gælder kun standardkonfigurationen.
$ (funktion () $ ("#slider") .slider (););
Så her vil vi forbedre skyderen lidt ved at tilføje andre konfigurationer.
Først gemmer vi skyderelementet som en variabel.
var skyder = $ ('# skyder'),
Derefter indstiller vi minimumsværdien af skyderen til ca. 35, når den først læsses.
slider.slider (interval: "min", værdi: 35,);
På dette tidspunkt vil vi ikke se noget i browseren endnu, fordi jQuery UI er dybest set kun genererer markup. Så vi skal bruge nogle stilarter til at begynde at se resultatet visuelt i browseren.
Trin 4: Stilene
Før vi fortsætter, har vi brug for nogle aktiver fra PSD-kildefilen som baggrundsstruktur og ikon.
Vi vil ikke tale om hvordan at skære I denne artikel vil vi kun fokusere på koden. Hvis du ikke er sikker på, hvordan du skal skære, skal du se følgende screencast først, inden du fortsætter.
Konvertere et design fra PSD til HTML - Nettuts+
Okay, lad os nu begynde at tilføje stilarterne.
Vi starter med at placere skyderen midt i browservinduet og vedhæfte baggrunden, som vi havde skåret ud fra PSD til legeme.
krop baggrund: url ('... /images/bg.jpg') gentag øverst til venstre; sektion bredde: 150px; højde: auto; margin: 100px auto 0; stilling: relativ;
Derefter vil vi anvende stilarterne for værktøjstip, lydstyrken, håndtaget, skyderen rækkevidde og skyderen sig selv.
Vi vil delvist gøre denne del, begyndende med ...
Slider
Da vi ikke definerede maksimumsværdien for skyderen selv, bruger jQuery-brugergrænsefladen standardværdien; det er 100. Derfor kan vi også anvende 100 (px) til skyderen bredde.
Vi har ændret volumenikonet lidt for at opfylde vores ide. Ideen er, at vi vil skabe en effekt til hæv lydstyrken gradvis i overensstemmelse med skyderens værdi. Jeg er sikker på, at du ofte har set en sådan effekt i en medieafspiller brugergrænseflade.
I dette trin skal vi begynde at arbejde på skyderens særlige effekt.
tooltip
På dette tidspunkt har værktøjstipen intet indhold endnu, så vi skal fylde det med skyderens værdi. Værktøjstipens vandrette position svarer også til håndtagets position.
Først og fremmest gemmer vi værktøjstipelementet som en variabel.
var tooltip = $ ('.tooltip');
Derefter definerer vi værktøjstipens effekt, som vi har nævnt ovenfor, indenfor Slide Event.
Som vi har nævnt ovenfor i Stil sektion, Vi planlægger volumenikonet til at ændre tilsvarende med håndtagets position eller for at være præcis, skyderens værdi. Så vi vil anvende følgende betingede erklæring for at skabe denne effekt.
Men for det første gemmer vi volumenelementet samt skyderenes værdi som en variabel.
volumen = $ ('. volumen');
Så starter vi den betingede erklæring.
Når skyderens værdi er lavere eller lig med 5 volumenikonet vil slet ikke have nogen knapper, hvilket indikerer at lydstyrken er meget lav, men når skyderenes værdi er stigende, begynder lydstyrken også at stige.
hvis (værdi <= 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'); ;
Sæt dem alle sammen
Okay, hvis du er forvekslet med alle de ovennævnte ting, skal du ikke være. Her er genvejen. Sæt alle de følgende koder i dit dokument.
I dag har vi med succes oprettet et mere elegant jQuery UI-tema, men samtidig har vi også succesfuldt oversat et PSD-brugergrænseflade til en funktionel volumenkontroller.
Vi håber, at denne vejledning inspirerer dig og kan hjælpe dig med at forstå, hvordan du konverterer en PSD til et mere brugbart produkt.
Endelig, hvis du har spørgsmål vedrørende denne tutorial, er du velkommen til at tilføje den i kommentarfeltet nedenfor.
