Hemsida » Kodning » Skapa en volymkontroll med jQuery UI Slider
Skapa en volymkontroll med jQuery UI Slider
Om du är en freebiesjägare, är chansen att du har laddat ner massor av PSD-användargränssnitt (användargränssnitt). Några av dem är verkligen fantastiska och kan spara vår tid genom att prototyper den design vi arbetade med.
I det här inlägget kommer vi att koda ett PSD-gränssnitt och omvandla det till något mer funktionellt. Vi ska koda följande PSD-gränssnittsklient för att användas som jQuery UI Slider-temat.
dock, notera att att denna handledning är avsedd för mellanliggande nivåer av erfarenhet. Med detta sagt är det fortfarande relativt lätt att följa, så länge du är ganska bekant med CSS och jQuery.
Okej, nu ska vi komma igång.
Steg 1: jQuery-användargränssnittet
Vi behöver självklart jQuery och jQuery UI-biblioteket, och vi har två alternativ att använda dem. Först kan vi länka jQuery och jQuery UI direkt från följande CDN: Google Ajax API CDN, Microsoft CDN och jQuery CDN, det finns många fördelar med att använda värddatorns CDN-fil när vi lägger vår webbplats live online.
Men eftersom vi bara kommer att arbeta på det offline, kommer vi att använda andra sätt istället.
Vi hämtar och anpassar jQuery UI-biblioteket från den officiella nedladdningssidan. Eftersom vi bara behöver Slider-plugin väljer vi bara Slider-biblioteket tillsammans med dess beroende och lämnar de andra. På så sätt blir filerna vi använder mycket slankare och kan laddas snabbare. Därefter länkar alla dessa bibliotek till HTML-dokumentet, helst längst ner på sidan eller före slutet
tagg för att vara exakt.
Steg 2: HTML markup
Markeringen för skjutreglaget är väldigt enkelt, vi förpackade all nödvändig markering - verktygstips, reglaget och volymen - inuti en HTML5 sektion märka. JQuery-användargränssnittet genererar automatiskt resten.
Steg 3: Installera reglaget UI
Nedan visas sändaren på sidan, men den gäller endast standardkonfigurationen.
$ (funktion () $ ("#slider"). slider (););
Så här förbättrar vi reglaget lite genom att lägga till andra konfigurationer.
Först lagrar vi glidelementet som en variabel.
var slider = $ ('# slider'),
Då ställer vi in minsta standardvärdet för skjutreglaget för att vara ungefär 35, när den först laddas.
slider.slider (range: "min", värde: 35,);
Vid denna tidpunkt kommer vi inte att se någonting i webbläsaren än, eftersom jQuery-användargränssnittet är i grund och botten bara generera uppmärkning. Så, vi måste tillämpa några stilar för att börja visa visningen visuellt i webbläsaren.
Steg 4: Stilarna
Innan vi fortsätter behöver vi några tillgångar från PSD-källfilen, såsom bakgrundsstruktur och ikon.
Vi kommer inte prata om hur man skivar I den här artikeln kommer vi bara att fokusera på koden. Om du inte vet hur du skivar, titta på följande skärmdump först innan du fortsätter.
Konvertera en design från PSD till HTML - Nettuts+
Okej, nu börjar vi lägga till stilar.
Vi börjar med att placera reglaget i mitten av webbläsarens fönster och bifoga bakgrunden som vi hade skivat ut från PSD till kropp.
Därefter kommer vi att tillämpa stilar för verktygstipset, volymen, handtaget, reglaget räckvidd och den reglaget sig.
Vi kommer att göra den här delen av del, från och med ...
Slider
Eftersom vi inte definierade det maximala värdet för skjutreglaget själv tillämpar jQuery-gränssnittet standardvärdet; det är 100. Därför kan vi också ansöka 100 (px) för skjutreglaget bredd.
Vi har ändrat volymikonen lite för att uppfylla vår idé. Tanken är att vi ska skapa en effekt för höja volymstången gradvis i enlighet med reglaget värde. Jag är säker på att du ofta sett en sådan effekt i ett mediaspelares användargränssnitt.
I detta steg kommer vi att börja arbeta med Sliderens speciella effekt.
Tooltip
Vid denna tidpunkt har verktygetipset inget innehåll ännu, så vi ska fylla i det med reglaget värde. Dessutom kommer verktygstipsens horisontella position att motsvara handtaget läge.
Först och främst lagrar vi verktygstipselementet som en variabel.
var tooltip = $ ('. verktygstips');
Då definierar vi verktygstipsens effekt som vi nämnde ovanför inuti Slide Event.
Som vi har nämnt ovan i Stilar avsnitt, Vi planerar volymikonen för att ändra på motsvarande sätt med handtaget eller för att vara exakt, reglaget värde. Så, vi kommer att tillämpa följande villkorliga uttalande för att skapa denna effekt.
Men för det första lagrar vi volymelementet såväl som reglaget som en variabel.
volym = $ ('volym');
Då börjar vi det villkorliga uttalandet.
När reglaget är lägre eller lika med 5 Volymikonen kommer inte att ha några knappar alls, vilket indikerar att volymen är väldigt låg, men när reglaget ökar kommer volymen även att öka.
if (värde <= 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ätt dem alla tillsammans
Okej, om du är förvirrad med alla ovanstående saker, var det inte. Här är genvägen. Lägg alla följande koder i ditt dokument.
Idag har vi framgångsrikt skapat ett mer elegant jQuery UI-tema men samtidigt har vi också framgångsrikt översatt ett PSD-användargränssnitt till en funktionell volymkontroll.
Vi hoppas att denna handledning inspirerar dig och kan hjälpa dig att förstå hur man gör en PSD till en mer användbar produkt.
Slutligen, om du har några frågor angående denna handledning, var god och lägg till den i kommentarfältet nedan.
