Share
JQuerys användargränssnitt kan lägga till så mycket till en webbsida. Det finns många olika widgets som användargränssnittet ger. En upp och kommande stjärna är reglaget. I den här handledningen visar jag dig hur du använder en reglage för att styra textstorleken på en artikel på en sida. Detta låter användaren kontrollera exakt storleken som passar dem, och det är också en ganska imponerande funktion att ha på en webbplats!
Den glidande delen av denna handledning reproducerar en teknik som ursprungligen skapades av Buck Wilson.
Vi vill så småningom att vår sida ska se ut så här:
Beteende:
Självklart behöver vi JQuery, men vi behöver också några användargränssnitt för att utvidga JQuery. Vi kan få en användargränssnittfil som är anpassad till våra behov på JQuery-användargränssnittet Bygg din nedladdningssida.
Som du kan se finns det några riktigt bra ljudeffekter där! Så frestande som det kan vara, behöver vi inte alla dessa effekter för att uppnå den önskade produkten. Allt vi behöver är:
För denna handledning kommer jag inte att slösa bort tid för att förklara grunderna i HTML och skapa en layout med den och CSS. Om du vill lära dig mer om det finns det andra handledningssätt här som min Top Panel handledning eller Collis 'Tabbed Content handledning.
Nätskärmar Text Size Slider
Nuvarande teckensnitt:Lorem Ipsum är helt enkelt dummy text av tryckeriet och typesetting industrin. Lorem Ipsum har varit branschens standard dummy text från 1500-talet, när en okänd skrivare tog en typ av typ och förvrängde den för att göra en typprovsbok. Det har överlevt inte bara fem århundraden, men också språnget i elektroniskt uppsättning, som förblir väsentligen oförändrad. Det blev populariserat på 1960-talet med utgivandet av Letraset-plåtar som innehöll Lorem Ipsum-passager och senare med skrivbordspubliceringsprogram som Aldus PageMaker inklusive versioner av Lorem Ipsum.
Så du märker flera saker:
OBS! För att skjutreglaget ska fungera måste vi ha en bar och ett handtag.
Här är CSS för att få den sidan att se lite bättre ut. Den här sidan är ganska enkel, och därför är CSS ganska enkel också:
kropp bakgrund: # 373737; text-align: center; marginal: 0px; #header width: 700px; höjd: 200px; bakgrund: # 48887d url (bilder / header.jpg); marginal-vänster: auto; marginal-höger: auto; position: relativ; .slider_container position: absolute; höjd: 25px; topp: 170px; vänster: 165px; .minus background: url (images / minus-trans.png) no-repeat; höjd: 9px; bredd: 25px; överflöde: gömd; flyta till vänster; markör: pekare; .slider_bar background: url (images / bar-trans.png) no-repeat; höjd: 9px; bredd: 316px; flyta till vänster; marginal: 0px 5px; position: relativ; .add bakgrund: url (bilder / add-trans.png) no-repeat; höjd: 25px; bredd: 23px; flyta till vänster; position: relativ; topp: -5px; markör: pekare; .slider_handle background: url (images / selector-trans.png) no-repeat; höjd: 25px; bredd: 12px; position: absolut; topp: -8px; #slider_caption background: url (images / caption-trans.png) no-repeat; höjd: 45px; bredd: 38px; överflöde: gömd; position: absolut; topp: -50px; margin-vänster: -10px; vaddering: 5px 0px 0px 0px; font-family: "Myriad Pro"; färg: # 36665d; font-weight: bold; text-align: center; #text font-family: Helvetica, Arial, sans-serif; bredd: 655px; bakgrund: # f9f9f9; marginal-vänster: auto; marginal-höger: auto; vaddering: 20px 20px 20px 25px; position: relativ; #text p font-size: 12px; text-align: left; svart färg; #text h1 text-align: left; marginal-vänster: 20px; p font-family: Arial, Helvetica, sans-serif; färg: #CCCCCC; #font_indicator position: absolute; höger: 100px; topp: 50px; typsnittstorlek: 10px; display: none;
Återigen kommer jag inte att gå i detalj med CSS heller. Om du fortfarande behöver mer hjälp med det, var noga med att kolla in de två handledningarna som jag nämnde ovan. Om du har några frågor, var god och låt mig veta i kommentarerna.
Observera att alla png-bilder som har alfa-genomskinlighet har a-trans.png slutar.
När jag först lärde mig om glidareffekten, googled jag det för att undersöka lite mer om det och hur det fungerar. Tja, jag hade tur att hitta denna fantastiska screencast. Det hade en riktigt snygg effekt också; en bildtext som tycktes visa skjutreglaget, ovanpå reglaget. Tyvärr stannade de där. Vi kommer att använda en variant av deras JQuery-kod som en hoppa av punkt:
Accentsconagua
$ (funktion () $ ('# slider_caption'). hide (); var captionVisible = false; $ ('slider_bar'). skjutreglaget (handtag: '.slider_handle', startValue: 26, minValue: 0, maxValue : 100, start: funktion (e, ui) $ ('# slider_caption'). FadeIn ('fast', funktion () captionVisible = true;);, stopp: funktion (e, ui) if captionVisible == false) $ ('# slider_caption'). fadeIn ('fast', funktion () captionVisible = true;); $ ('# slider_caption'). css ('left', ui.handle.css ("font": ui.value * 15/100 + 8) .text (Math.round (ui.value * 15/100 + 8)); $ ("div # text p" fadeIn ("slow"); $ ('# slider_caption'). fadeOut ('fast', funktion () captionVisible = false;);, slide: funktion (e, ui) $ 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");); Några viktiga idéer:
$ (funktion () $ ('# slider_caption'). hide (); var calloutVisible = false; $ ('slider_bar'). skjutreglaget (handtag: '.slider_handle', startValue: 26, minValue: 0, maxValue FadeIn ('slow', funktion () calloutVisible = true;); $ ('# font_indicator'). FadeIn ('slow' ); stoppa: funktionen (e, ui) if (calloutVisible == false) $ ('# slider_caption'). fadeIn ('fast', funktion () calloutVisible = true;); $ font_indicator '). fadeIn (' slow '); $ (' # slider_caption '). css (' left ', ui.handle.css (' left ')) .text (Math.round (ui.value * 15/100 + 8)); $ ('# font_indicator b') .text (Math.round (ui.value * 15/100 + 8)); $ ("div # text p"). Animate (fontSize: ui.value FadeIn ("slow", function () calloutVisible = false;); $ ('# font_indicator'). fadeOut ('slow');, slide: funktion (e, ui) $ ('# slider_caption'). css ('left', ui.handle.css ('left')) ui.value * 15/100 + 8)); $ ('# font_indicator b'). text (Math.round (ui. värde * 15/100 + 8)); $ ("div # text p"). css (fontSize: ui.value * 15/100 + 8). fadeIn ("slow"); );
Viktiga idéer om #font_indicator
Detta skulle bara inte vara en funktionell design, om vi inte gav plus- och minusteckningarna handlingar på klick. Denna kod kan vara lite slarvig och inte helt effektiv, men det blir jobbet gjort. Detta projekt krävde en överraskande mängd matematik, vilket förklarar några av de snygga siffrorna som slutar användas.
Utan ytterligare ado, här är resten av javascript, jag kommer att förklara det efteråt:
css ('font-size'); var currentFontSizeNum = parseFloat (currentFontSize, 10); var newFontSize = currentFontSizeNum + 1, om (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) $ ('# 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 (långsam). $ ('# font_indicator b'). text (Math.round (newFontSize)); $ (# Font_indicator) fadeout (långsam). annars $ ('# font_indicator'). fadeIn ('slow'); $ ('# font_indicator b'). text ("Är inte 8 tillräckligt liten?"); $ (# Font_indicator) fadeout (långsam). returnera false; ); Några viktiga anteckningar:
Matte tid
Justering av handtaget och bildtexten för att reagera på plus och minus-klick var en riktig utmaning. Vad jag slutade göra var att bestämma bredden på stapeln (316px) och dela upp den mellan de 16 möjliga teckensnittstorlekarna (8-23) för att räkna ut hur mycket utrymme varje steg tog.
316/16 =
För att vara säker måste jag sedan räkna ut startpunkten för teckensnittstorleken. Jag visste att det här inte var just 12, för jag modifierade det något med 15/100 + 8. Så jag tog startvärdet på handtaget (26) och multiplicerade det med det:
26 * 15/100 + 8 =
Jag tänkte på det, eftersom det var avrundat skulle det vara tolv ändå.
Så jag tänkte på att handtaget skulle vara [fontstorlek * 19.75 - 158 (de första 8 storlekarna)] px.
Trodde bara att jag skulle ge dig en inblick i min konstiga och överkomplicerade matte;). Det finns förmodligen mycket enklare sätt att göra det, men jag antar att det här är min logik.
För att hantera kakor använde jag Klaus Hartls utmärkta cookie plugin. Du kan visa den grundläggande syntaxen för plugin-modulen i länken som jag angav. Utmaningen var att hitta en plats som på ett tillförlitligt sätt ställa in kakan. Jag slutade med att ställa in det när webbläsaren uppdaterar eller ändrar sidan. På så sätt gör det bara det när det är nödvändigt och realiserbart också. Först lägger vi till koden till toppen av javascript filen för att läsa kakan:
var startSize = $ .cookie ('fontSize'); var startSize = parseFloat (startSize, 12); $ ('# text p'). css ('fontstorlek', startstorlek); Som jag nämnde ovan måste vi ställa in kakan när sidan är avslutad. Det gör vi genom att använda följande kod:
window.onbeforeunload = leaveCookie; funktion leaveCookie () var FontSize = $ ('# text p'). css ('font-size'); var IntFontSize = parseFloat (FontSize, 10); $ .cookie ('fontSize', IntFontSize); Vad jag gjorde:
Hoppas du hittade denna handledning användbar! Var god ursäkta min programmeringslogik, jag tänker inte alltid så effektivt: P. Om du har några frågor eller kommentarer, vänligen meddela mig det i kommentarerna!
