De gebruikersinterface van JQuery kan zoveel toevoegen aan een webpagina. Er zijn veel verschillende widgets die de gebruikersinterface biedt. Een opkomende ster, is de schuifregelaar. In deze zelfstudie laat ik u zien hoe u een schuifregelaar gebruikt om de tekstgrootte van een artikel op een pagina te bepalen. Hiermee kan de gebruiker precies het formaat instellen dat bij hem past, en het is ook een behoorlijk indrukwekkende functie op een site!

Het schuifgedeelte van deze zelfstudie reproduceert een techniek die oorspronkelijk door Buck Wilson is gemaakt.

Ons doel

We willen uiteindelijk dat onze pagina er ongeveer zo uitziet:

Gedrag:

• Wanneer de schuifregelaar wordt gesleept, wordt er een bel ingeblazen, die de huidige grootte aangeeft.
• De tekst "huidige tekstgrootte" wordt ook weergegeven met de huidige tekstgrootte ernaast.
• We zullen ook proberen om de tekst één px te laten vergroten of één px te verlagen bij klikken van het plus- of minteken.

Stap 1: de benodigde Javascript-bestanden ophalen

Natuurlijk hebben we JQuery nodig, maar we hebben ook enkele UI-bestanden nodig om JQuery uit te breiden. We kunnen een UI-bestand krijgen dat aangepast is aan onze behoeften op de JQuery UI Build Your Download-pagina.

Zoals je kunt zien, zijn er een aantal echt geweldig klinkende effecten daar! Hoe verleidelijk het ook mag zijn, we hebben niet al deze effecten nodig om het gewenste product te bereiken. Alles wat we nodig hebben is:

• UI Core
• schuif
• Klaus Hartl's Cookie-plugin

Stap 2: De HTML

Voor deze zelfstudie ga ik geen tijd verspillen aan het uitleggen van de basisprincipes van HTML en het maken van een lay-out met deze en CSS. Als je daar meer over wilt weten, zijn er andere tutorials hier, zoals mijn Top Panel-zelfstudie of de tutorial Zelfstudie met tabs van Collis.

            
 
 
 
 
 
 
 
 
 
 
 
Tekstformaat schuifregelaar
 
Huidige lettergrootte:  
 
 Lorem Ipsum is gewoon dummy tekst van de drukkerij- en zetbranche. Lorem Ipsum is de standaard dummy-tekst van de industrie sinds de jaren 1500, toen een onbekende printer een keuken van het type in beslag nam en deze tot een soort exemplaar boek maakte. Het heeft niet alleen vijf eeuwen overleefd, maar ook de sprong naar elektronisch zetwerk, en bleef in wezen onveranderd. Het werd gepopulariseerd in de jaren zestig met de uitgave van Letraset-bladen met Lorem Ipsum-passages en meer recent met desktop publishing-software zoals Aldus PageMaker inclusief versies van Lorem Ipsum. 
 
   

U zult dus verschillende dingen opmerken:

1. De PNG-oplossing voor IE 5.5 en 6. Ik heb direct een link naar de Google-codepagina gemaakt. Dit betekent dat ik elke transparante PNG moet afsluiten met een -trans.png .
2. Ik heb ook rechtstreeks gelinkt aan JQuery en ons op maat gemaakte UI-bestand.
3. Ik heb de benodigde tags voor de schuifregelaar in de #header geplaatst

OPMERKING: Om de schuifregelaar te laten werken, hebben we een staaf en een handvat nodig.

Stap 3: De CSS

Hier is de CSS om die pagina er een beetje beter uit te laten zien. Deze pagina is vrij eenvoudig en daarom is de CSS ook vrij eenvoudig:

 lichaam achtergrond: # 373737; text-align: center; marge: 0px;  #header width: 700px; hoogte: 200 px; achtergrond: # 48887d url (images / header.jpg); marge links: auto; marge-rechts: auto; positie: relatief;  .slider_container position: absolute; hoogte: 25px; top: 170px; links: 165px;  .minus background: url (images / minus-trans.png) geen herhaling; hoogte: 9px; breedte: 25px; overloop verborgen; zweven: links; cursor: pointer;  .slider_bar background: url (images / bar-trans.png) geen herhaling; hoogte: 9px; breedte: 316 px; zweven: links; marge: 0px 5px; positie: relatief;  .add background: url (images / add-trans.png) geen herhaling; hoogte: 25px; breedte: 23 px; zweven: links; positie: relatief; top: -5px; cursor: pointer;  .slider_handle background: url (images / selector-trans.png) geen herhaling; hoogte: 25px; breedte: 12px; positie: absoluut; top: -8px;  #slider_caption background: url (images / caption-trans.png) geen herhaling; hoogte: 45 px; breedte: 38px; overloop verborgen; positie: absoluut; top: -50px; margin-left: -10px; opvulling: 5px 0px 0px 0px; font-family: "Myriad Pro"; kleur: # 36665d; lettertype: vet; text-align: center;  #text font-family: Helvetica, Arial, sans-serif; breedte: 655px; achtergrond: # f9f9f9; marge links: auto; marge-rechts: auto; opvulling: 20px 20px 20px 25px; positie: relatief;  #text p font-size: 12px; text-align: left; de kleur zwart;  #text h1 text-align: left; marge links: 20 px;  p font-family: Arial, Helvetica, sans-serif; kleur: #CCCCCC;  #font_indicator positie: absoluut; rechts: 100px; top: 50px; lettergrootte: 10px; Geen weergeven;  

Nogmaals, ik ga ook niet in detail treden met de CSS. Als je daar nog steeds meer hulp bij nodig hebt, moet je die twee tutorials die ik hierboven noemde eens bekijken. Als je nog vragen hebt, laat het me dan weten in de comments.

Merk op dat alle png-afbeeldingen met alfatransparantie een -trans.png einde hebben.

Stap 4: basisschuifregelaareffecten

Toen ik voor het eerst hoorde over het schuifeffect, heb ik het Googled om er iets meer over te onderzoeken en hoe het werkt. Nou, ik had het geluk om deze geweldige screencast te vinden. Het had ook een heel net effect; een bijschrift dat de positie van de schuifbalk boven aan de schuif leek weer te geven. Helaas zijn ze daar gestopt. We gaan een variatie van hun JQuery-code als startpunt gebruiken:

 $ (function () $ ('# slider_caption'). hide (); var captionVisible = false; $ ('. slider_bar'). slider (handle: '.slider_handle', startValue: 26, minValue: 0, maxValue : 100, start: functie (e, ui) $ ('# slider_caption'). FadeIn ('fast', function () captionVisible = true;);, stop: function (e, ui) if ( captionVisible == false) $ ('# slider_caption'). fadeIn ('fast', function () captionVisible = true;); $ ('# slider_caption'). css ('left', ui.handle.css ('left')). text (Math.round (ui.value * 15/100 + 8)); $ ("div # text p"). anim (fontSize: ui.value * 15/100 + 8 ) .fadeIn ("slow"); $ ('# slider_caption'). fadeOut ('fast', function () captionVisible = false;);, slide: function (e, ui) $ ('# slider_caption '). css (' left ', ui.handle.css (' left ')). text (Math.round (ui.value * 15/100 + 8)); $ ("div # text p"). css (fontSize: ui.value * 15/100 + 8). fadeIn ("slow"););

Enkele belangrijke ideeën:

• Ten eerste verbergen we het bijschrift met Javascript. Dit maakt het bijschrift zichtbaar als Javascript is uitgeschakeld voor slechts een klein beetje meer toegankelijkheid.
• Zoals u kunt zien, hebben we nu ook een .slider-modifier en verschillende subitems:
  • startValue: Dit specificeert de positie waar het handvat begint bij
  • minValue: Dit specificeert de minimumwaarde waar het handvat naartoe gaat
  • maximum waarde: Dit specificeert de maximale waarde waar het handvat naartoe gaat
  • begin: Hiermee kunnen we JQuery vertellen wat te doen wanneer de gebruiker de balk gaat verschuiven
  • hou op: Dit geeft aan wat er gebeurt wanneer de schuifregelaar wordt losgelaten
  • slide: Dit geeft aan wat er gebeurt als de schuifregelaar wordt verschoven
  • handvat: Dit laat ons toe om te specificeren wat het handvat zal zijn
• We kennen ook een variabele toe die ons zal helpen te weten wanneer hou op: wordt weergegeven, ongeacht of het bijschrift zichtbaar is of niet, en voer vervolgens een actie uit op basis van die conclusie.
• We moesten ook een limiet stellen aan de lettergroottes die mogelijk waren, dus we beperkten de schuifregelaarwaardemogelijkheden tot tussen 8 en 23. We deden dit door elementaire wiskunde uit te voeren op de waarde van de schuifregelaar. (vermenigvuldigd met 15/100 en 8 toegevoegd)
• Deze vergelijking resulteerde in decimale plaatsgroottes, dus moesten we deze afronden met de Math.ronde
• Merk ook op dat de methode waarmee we het bijschrift hebben gemaakt bovenop het handvat blijft. We hebben de linker csv-waarde van het bijschrift gelijk gemaakt aan het handvat.
• Merk op dat op de hou op: Ik heb de tekstgrootte geanimeerd, terwijl ik op de dia de CSS-grootte voortdurend verander. Dit lijkt misschien contra-intuïtief, dat is zo slide: Ik zou het niet animeren, maar door de essentie van geleidelijk glijden en vergroten van de grootte doet het hetzelfde. Als ik zou animeren in plaats van alleen de css te veranderen, zou het schokkerig zijn en niet meer reageren.

Stap 5: De tekst bijschrift toevoegen

 $ (function () $ ('# slider_caption'). hide (); var calloutVisible = false; $ ('. slider_bar'). slider (handle: '.slider_handle', startValue: 26, minValue: 0, maxValue : 100, start: functie (e, ui) $ ('# slider_caption'). FadeIn ('fast', function () calloutVisible = true;); $ ('# font_indicator'). FadeIn ('langzaam' );, stop: function (e, ui) if (calloutVisible == false) $ ('# slider_caption'). fadeIn ('fast', function () calloutVisible = true;); $ ('# font_indicator '). fadeIn (' langzaam '); $ (' # slider_caption '). css (' left ', ui.handle.css (' left ')). tekst (Math.round (ui.value * 15/100 + 8)); $ ('# font_indicator b'). Text (Math.round (ui.value * 15/100 + 8)); $ ("div # text p"). Animeren (fontSize: ui.value * 15/100 + 8). FadeIn ("slow"); $ ('# slider_caption'). FadeOut ('fast', function () calloutVisible = false;); $ ('# font_indicator'). fadeOut ('slow');, slide: functie (e, ui) $ ('# slider_caption'). css ('left', ui.handle.css ('left')). text (Math.round ( ui.value * 15/100 + 8)); $ ('# font_indicator b'). text (Math.round (ui. waarde * 15/100 + 8)); $ ("div # text p"). css (fontSize: ui.value * 15/100 + 8). fadeIn ("langzaam"); );

Belangrijke ideeën over #font_indicator

• We hebben dezelfde fade-in en fade-outeffecten toegevoegd op dezelfde plaatsen als het bijschrift
• We hebben de linker css-positie echter weggelaten
• Merk op dat we een hebben tag in de div # font-indicator. Dit maakt niet alleen het nummer meer opvallend, maar stelt ons ook in staat om de huidige waarde van de schuifregelaar als tekst erin te plaatsen. Als we zojuist aan het einde van de div waren toegevoegd, zou elke waarde van de tekengrootte pas aan het eind toenemen.

Stap 6: De Plus- en Min-acties geven

Dit zou gewoon geen functioneel ontwerp zijn, als we de plus- en mintekens-acties niet op klikken zouden geven. Deze code is misschien een beetje slordig en niet perfect efficiënt, maar het klopt. Dit project vereiste een verrassende hoeveelheid wiskunde, wat enkele van de maffe nummers verklaart die uiteindelijk worden gebruikt.

Zonder verder oponthoud, hier is de rest van het javascript, ik zal het naderhand uitleggen:

 $ (". add"). klik (function () var currentFontSize = $ ('# text p'). css ('font-size'); var currentFontSizeNum = parseFloat (currentFontSize, 10); var newFontSize = currentFontSizeNum + 1; if (newFontSize < 24)  $('#text p').css('font-size', newFontSize); $('#slider_caption').css('left', newFontSize*19.75 - 158).fadeIn('fast').text(Math.round(newFontSize )).fadeOut(); $('.slider_handle').css('left', newFontSize*19.75 - 158); $('#font_indicator').fadeIn('slow'); $('#font_indicator b').text(Math.round(newFontSize )); $('#font_indicator').fadeOut('slow');  else $('#font_indicator').fadeIn('slow'); $('#font_indicator b').text("Isn't 23 big enough?"); $('#font_indicator').fadeOut('slow');  return false; ); $(".minus").click(function() var currentFontSize = $('#text p').css('font-size'); var currentFontSizeNum = parseFloat(currentFontSize, 10); var newFontSize = currentFontSizeNum-1; if (newFontSize > 8) $ ('# tekst p'). Css ('font-size', newFontSize); $ ('# slider_caption'). css ('left', newFontSize * 19.75 - 158) .fadeIn ('fast'). text (Math.round (newFontSize)). fadeOut (); $ ('. slider_handle'). css ('left', newFontSize * 19.75 - 158); $ ( '# Font_indicator') FadeIn ( 'slow.'); $ ('# font_indicator b'). text (Math.round (newFontSize)); $ ( '# Font_indicator') fade-out ( 'slow.');  else $ ('# font_indicator'). fadeIn ('langzaam'); $ ('# font_indicator b'). tekst ("Is 8 niet klein genoeg?"); $ ( '# Font_indicator') fade-out ( 'slow.');  return false; );

Enkele belangrijke opmerkingen:

• Als u de basis Javascript-syntaxis kent, zou dit vrij vanzelfsprekend moeten zijn.
• Ik wijs een initiële variabele toe om de huidige lettergrootte te krijgen.
• Ik converteer het vervolgens naar een geheel getal
• Vervolgens maak ik een andere variabele aan die één waarde hoger is.
• Ik plaats een limiet tussen onder de 24 en boven de 8, met behulp van een als anders uitspraak.

Wiskunde tijd

Het aanpassen van de hendel en het bijschrift om te reageren op de plus- en minklik was een echte uitdaging. Wat ik uiteindelijk deed, was het uitzoeken van de breedte van de balk (316px), en die delen tussen de 16 mogelijke lettergroottes (8-23) om uit te zoeken hoeveel ruimte elke stap in beslag nam.

316/16 =

Om veilig te zijn, moest ik vervolgens de startplaats voor de lettergrootte bepalen. Ik wist dat dit niet precies 12 was, omdat ik het enigszins had aangepast met de 15/100 + 8. Dus nam ik de startwaarde van het handvat (26) en vermenigvuldigde het daarmee:

26 * 15/100 + 8 =

Ik dacht dat, aangezien het afgerond was, het toch twaalf zou zijn.

Dus ik dacht dat het handvat de [lettergrootte * 19,75 - 158 (de eerste 8 maten)] px zou zijn.

Ik dacht dat ik je een blik zou gunnen in mijn rare en te ingewikkelde wiskunde;). Er zijn waarschijnlijk veel gemakkelijkere manieren om het te doen, maar ik denk dat dit mijn logica is.

Stap 7: Cookie Time, het cookie lezen

Voor het omgaan met cookies heb ik de uitstekende cookie-plug-in van Klaus Hartl gebruikt. U kunt de basissyntaxis van de plug-in bekijken in de link die ik heb verstrekt. De uitdaging was om een ​​plek te vinden die de cookie betrouwbaar zou instellen. Ik heb het uiteindelijk ingesteld toen de browser de pagina vernieuwde of veranderde. Op deze manier doet het het alleen wanneer nodig en ook realistisch. Eerst voegen we de code toe aan de bovenkant van het JavaScript-bestand om de cookie te lezen:

 var startSize = $ .cookie ('fontSize'); var startSize = parseFloat (startSize, 12); $ ('# text p'). css ('font-size', startSize);

Wat ik deed:

• Ik heb eerst de cookie gelezen en deze naar de variabele startgrootte verzonden
• Ik veranderde toen die variabele in een geheel getal
• Vervolgens heb ik dat nummer toegevoegd aan de standaard CSS van de tekst

Stap 8: De cookie instellen

Zoals ik hierboven al zei, moeten we de cookie instellen wanneer de pagina wordt afgesloten. We doen dit door de volgende code te gebruiken:

 window.onbeforeunload = leaveCookie; function leaveCookie () var FontSize = $ ('# text p'). css ('font-size'); var IntFontSize = parseFloat (FontSize, 10); $ .cookie ('fontSize', IntFontSize); 

Wat ik deed:

• LET OP: deze JS is buiten van de JQuery $ (function () );
• Ten eerste heb ik een functie geactiveerd toen de browser de pagina verliet
• Vervolgens heb ik de tekstgrootte geconverteerd naar een geheel getal
• Dan leg ik dit in de koek
  

Dat is het!

Ik hoop dat je deze tutorial nuttig hebt gevonden! Excuses mijn programmeerlogica, ik denk niet altijd zo efficiënt: P. Als je vragen of opmerkingen hebt, aarzel dan niet om het me te laten weten in de comments!

• Abonneer u op de NETTUTS RSS-feed voor meer dagelijkse webontwikkelingen, tuts en artikelen.

Code