Startpagina » Coding » Een volumeregelaar maken met jQuery UI-schuifregelaar
Een volumeregelaar maken met jQuery UI-schuifregelaar
Als je freebies-jager bent, is de kans groot dat je veel PSD-gebruikersinterfaces (UI) hebt gedownload. Sommigen van hen zijn echt geweldig en zouden onze tijd kunnen besparen door een prototype te maken van het ontwerp waar we aan werkten.
In deze post coderen we een PSD UI en veranderen deze in iets functioneler. We gaan de volgende PSD UI-schuifregelaar coderen om te worden toegepast als het thema van de jQuery-gebruikersinterface-schuifregelaar.
Echter, let alstublieft op waarvoor deze zelfstudie bedoeld is tussenliggende niveaus van ervaring. Dat gezegd hebbende, het is nog steeds relatief gemakkelijk te volgen, zolang je maar bekend bent met CSS en jQuery.
Oké, laten we nu beginnen.
Stap 1: de gebruikersinterface van jQuery
We hebben natuurlijk de jQuery en de jQuery UI Library nodig, en we hebben twee opties om ze te gebruiken. Ten eerste kunnen we de jQuery en de jQuery UI rechtstreeks koppelen vanaf het volgende CDN: Google Ajax API CDN, Microsoft CDN en jQuery CDN, er zijn veel voordelen van het gebruik van het gehoste CDN-bestand wanneer we onze site online zetten.
Maar omdat we er alleen offline aan zullen werken, zullen we de tweede manier in plaats daarvan.
We zullen de jQuery UI-bibliotheek downloaden en aanpassen vanaf de officiële downloadpagina. Omdat we alleen de Slider-plug-in nodig hebben, selecteren we alleen de Slider-bibliotheek samen met zijn afhankelijkheden en laten we de anderen. Op die manier zullen de bestanden die we gebruiken veel slanker zijn en sneller kunnen worden geladen. Verbind daarna al die bibliotheken met het HTML-document, bij voorkeur onderaan de pagina of vóór het sluiten
tag om precies te zijn.
Stap 2: HTML-markup
De opmaak voor de schuifregelaar is heel eenvoudig, we hebben alle benodigde markeringen - de tooltip, de schuifregelaar en het volume - ingepakt in een HTML5 sectie label. De gebruikersinterface van jQuery genereert dan automatisch de rest.
Stap 3: installeer de gebruikersinterface van de schuifregelaar
Het onderstaande fragment installeert de schuifregelaar op de pagina, maar deze is alleen van toepassing op de standaardconfiguratie.
$ (function () $ ("#slider") .slider (););
Dus hier zullen we de schuif een beetje verbeteren door andere configuraties toe te voegen.
Eerst bewaren we het schuifelement als een variabele.
var slider = $ ('# slider'),
Vervolgens stellen we de minimale standaardwaarde van de schuifregelaar in 35, wanneer het eerst wordt geladen.
slider.slider (bereik: "min", waarde: 35,);
Op dit moment zien we nog niets in de browser, omdat de gebruikersinterface van jQuery dat is eigenlijk alleen het genereren van de markup. We moeten dus een aantal stijlen toepassen om het resultaat visueel in de browser te kunnen zien.
Stap 4: De stijlen
Voordat we verder gaan, hebben we een aantal items uit het PSD-bronbestand nodig, zoals de achtergrondstructuur en het pictogram.
We zullen er niet over praten hoe te snijden in dit artikel zullen we ons alleen concentreren op de code. Als u niet zeker weet hoe u moet snijden, bekijk dan eerst de volgende screencast voordat u verder gaat.
Een ontwerp converteren van PSD naar HTML - Nettuts+
Oké, laten we beginnen met het toevoegen van de stijlen.
We beginnen met het positioneren van de schuifregelaar in het midden van het browservenster en koppelen de achtergrond die we uit de PSD hadden gesneden aan de lichaam.
Vervolgens passen we de stijlen toe voor de tooltip, het volume, het handvat, de schuifregelaar reeks en de schuif zelf.
We zullen dit deel per deel doen, te beginnen met ...
schuif
Omdat we de maximumwaarde voor de Slider zelf niet hebben gedefinieerd, past de gebruikersinterface van jQuery de standaardwaarde toe; dat is 100. Daarom kunnen we ook van toepassing zijn 100 (px) voor de slider's breedte.
We hebben het volumepictogram enigszins aangepast om aan ons idee te voldoen. Het idee is dat we een effect gaan creëren verhoog de volumebalk geleidelijk in overeenstemming met de waarde van de schuifregelaar. Ik weet zeker dat je zo'n effect vaak zag in een gebruikersinterface van een mediaspeler.
De stijl van het handvat is vrij eenvoudig; het zal een pictogram hebben dat eruitziet als een metalen cirkel, in plakjes is gesneden van de PSD en als achtergrond is bijgevoegd.
We zullen ook de cursormodus veranderen naar wijzer, dus de gebruiker zal opmerken dat dit element versleepbaar is.
In deze stap gaan we werken aan het speciale effect van de Slider.
tooltip
Op dit punt heeft de tooltip nog geen inhoud, dus we gaan hem vullen met de waarde van de schuifregelaar. De horizontale positie van de tooltip komt ook overeen met de positie van de hendel.
Allereerst slaan we het tooltip-element op als een variabele.
var tooltip = $ ('. tooltip');
Vervolgens definiëren we het effect van de tooltip die we hierboven hebben genoemd in het dia-evenement.
slide: function (event, ui) var value = slider.slider ('value'), tooltip.css ('left', value) .text (ui.value);
Maar we willen ook dat de tooltip aanvankelijk verborgen is.
tooltip.hide ();
Daarna, wanneer de handvat staat op het punt om te glijden, het wordt getoond met een fade-in effect.
start: function (event, ui) tooltip.fadeIn ('snel'); ,
En wanneer de gebruiker stopt met het verschuiven van het handvat, zal de tooltip vervagen en worden verborgen.
stop: function (event, ui) tooltip.fadeOut ('snel'); ,
Volume
Zoals we hierboven in de Stijlen gedeelte, we plannen het volumepictogram om overeenkomstig te veranderen met de positie van de greep of om precies te zijn, de waarde van de schuifregelaar. Daarom zullen we de volgende voorwaardelijke verklaring toepassen om dit effect te creëren.
Maar ten eerste bewaren we het volume-element en de waarde van de schuifregelaar als een variabele.
volume = $ ('. volume');
Daarna starten we de voorwaardelijke verklaring.
Wanneer de waarde van de schuifregelaar kleiner of gelijk is aan 5 het volumepictogram bevat helemaal geen balken, wat aangeeft dat het volume erg laag is, maar wanneer de waarde van de schuifregelaar toeneemt, zal de volumebalk ook beginnen te stijgen.
if (value <= 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'); ;
Leg ze allemaal samen
Oké, voor het geval je verward bent met al het bovenstaande, doe dat dan niet. Hier is de snelkoppeling. Zet alle volgende codes in uw document.
$ (function () var slider = $ ('# slider'), tooltip = $ ('. tooltip'); tooltip.hide (); slider.slider (bereik: "min", min: 1, waarde: 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 (waarde <= 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'); , ); );
Oké, laten we nu het resultaat in de browser bekijken.
demonstratie
Download de bron
Conclusie
Vandaag hebben we met succes een meer elegant jQuery UI-thema gemaakt, maar tegelijkertijd hebben we ook een PSD-gebruikersinterface vertaald naar een functionele volumecontroller.
We hopen dat deze tutorial u inspireert en u kan helpen begrijpen hoe u van een PSD een bruikbaarder product maakt.
Ten slotte, als u vragen heeft over deze tutorial, kunt u deze toevoegen in de sectie Opmerkingen hieronder.
