Share
Laten we toevoegen aan onze vaardighedenset Foundation door te leren hoe je gebruik kunt maken van voortgangsbalken, waarschuwingen, tooltips en de mega-drop die Zurb gebruikt op hun site, maar niet echt in Foundation. We zullen kijken naar het toevoegen van al deze componenten aan het contactformulier uit de vorige zelfstudie, met behulp van een vleugje aangepast jQuery, zodat u een idee krijgt van hoe deze elementen kunnen werken in uw eigen projecten. Laten we beginnen.
Allereerst voegen we een tooltip toe aan het selectievakje "Stuur mij spam", zodat gebruikers iets meer te weten komen over de spam die we sturen als ze het vakje aanvinken.
Zoals in elk vorig codefragment dat functionaliteit toevoegt zoals een tooltip voor een element, vertrouwt het op een klasse om dingen uit te schakelen, in dit geval is het 'has-tip'.
Het is je misschien ook opgevallen dat we de tekst binnen het label in een span-tag hebben ingepakt. Deze span-tag heeft een van de aangepaste elementattributen van Foundation nodig, 'data-tooltip'. Dat geeft je een werkende tooltip, maar je wilt wat tekst in de tip en misschien de breedte instellen. Beide kunnen worden bereikt met nog meer attributen, 'titel' en 'gegevensbreedte'. Zonder gegevensbreedte vult de tip gewoon de ruimte van de bovenliggende container van het element.
Door de 'has-tip'-klasse toe te voegen en uw gewenste element in de reeks in te pakken met deze kenmerken, kunt u eenvoudig een tooltip plakken op elk element.
In de vorige tutorial bouwden we een eenvoudig responsief contactformulier, waaruit bleek hoe de formulierelementen van Foundation konden worden gebruikt. Laten we nu wat meer elementen implementeren om een nieuwe laag aan het formulier toe te voegen. We doen dit door fasen toe te voegen aan de knop Verzenden; we nemen de standaardklik van de verzendberichtknop, voegen een voortgangsindicator toe, een succesbericht en wissen de ingangen zodra de e-mail is verzonden.
Omdat ik alleen Foundation-functies presenteer, is dit geen functionele vorm, hoewel je een op php gebaseerd send-script kunt toevoegen en ajax kunt gebruiken om het formulier te plaatsen zonder van de pagina weg te hoeven navigeren. Bekijk Een formulier indienen zonder pagina vernieuwen met jQuery voor verdere instructies.
Direct onder ons submit-element kunnen we onze voortgangsbalk toevoegen. Dit maakt gebruik van dezelfde klassen als knoppen, deze keer met behulp van de afgeronde klasse.
Een div gebruiken met de klasse "progress" stelt de dingen in en fungeert als de container, terwijl de span binnenin (gebruikmakend van de "meterklasse") de kleur is die de container progressief vult.
Notitie: De reeks gebruikt een stijltag met de startbreedte van de voortgangsbalk. We zullen jQuery gebruiken om dit later te animeren.
Laten we een succesbericht toevoegen, zodat gebruikers weten dat het bericht is verzonden. In dit voorbeeld richten we ons alleen op een succeswaarschuwing, maar in een echt wereldscenario heb je misschien ook een foutmelding nodig. U kunt dit implementeren met behulp van de submit-handler en de jQuery-plug-in valideren.
Succes! Je bericht is verzonden. ×
Neem een div en voeg het kenmerk 'data-alert' toe samen met een aantal klassen, namelijk 'alert-box' en 'succes'. Als we ook een knop Sluiten toevoegen, kunnen gebruikers het succesbericht sluiten nadat ze het hebben gelezen. Als je kijkt naar wat we tot nu toe hebben samengesteld, ziet het er een beetje rommelig uit, maar dat is goed, want we zullen nu wat jQuery toevoegen om de lagen van interactie te creëren die we nodig hebben.
Accentsconagua
var submitButton = $ ('# submitme'); // Variabele naar cache knopelement var progressBar = $ ('# progress'); // Variabele om voortgangsbalk in de cache in te voegen var var progressBarMeter = $ ('# progress .meter'); // Variabel naar cache-meterelement var alertBox = $ ('. Alert-box'); // Variabel naar cache-meterelement var closeButton = $ ('. Close'); // Variabele in cache close-knopelement $ (submitButton) .click (function () // Start de verzendinteractie $ (this) .fadeOut (500); // Fades-out verzendknop wanneer op setTimeout wordt geklikt (function () // Vertragingen van het volgende effect $ (progressBar) .fadeIn (500); // Fades in de voortgangsbalk $ (progressBarMeter) .animation (width: '100%', 2000); // Animates the progress bar setTimeout ( function () // Vertragingen van het volgende effect $ (progressBar) .fadeOut (500); // Vervaagt voortgangsbalk wanneer animatie setTimeout voltooit (function () // Vertraagt het volgende effect $ (alertBox) .fadeIn (500) ; // Fades in success alert, 500);, 2500);, 500);); Om deze code beter uit te leggen, heb ik elke regel becommentarieerd. Het is een eenvoudige rij effecten die de gewenste interactie creëert. Hoewel dit puur visueel is, maar gemakkelijk kan worden aangepast om echte feedback en validatie toe te voegen. Het zou ook nuttig voor ons zijn om een close-waarschuwingsfunctie toe te voegen die het formulier opnieuw instelt voor toekomstig gebruik.
Notitie: We hebben alle elementen in de functie in de cache opgeslagen door ze in variabelen op te slaan. Je kunt meer lezen over waarom we dit doen door Quick Tip te lezen - jQuery Newbs: stop met springen in de pool
$ (closeButton) .klik (function () // Start de reset-functie $ (alertBox) .fadeOut (500); // Fades out succesbericht $ (progressBarMeter) .css (width: '0%'); // Herstelt voortgangsbalk setTimeout (function () // Vertragingen het volgende effect $ ('input, textarea'). Niet ('input [type = submit]'). Val ("); // Reset de invoervelden $ (submitButton) .fadeIn (500); // Fades terug in de submit-knop, 500); return false; // Hiermee wordt voorkomen dat de succeswaarschuwing wordt verwijderd omdat we deze gewoon willen verbergen); Ook hier heb ik elke regel becommentarieerd om uit te leggen wat elke lijn aan het doen is. Dat bestrijkt bijna onze upgrade naar het contactformulier. Deze functies zijn zeer flexibel en kunnen overal in uw projecten worden gebruikt, aanpassing is in een handomdraai met behulp van CSS.
Ik heb veel tijd doorgebracht in de Google-discussiegroep van de Foundation en veel mensen vragen naar de Mega Drop-functie op de websites van Zurb. Ik dacht dat ik dit hier zou behandelen, want het lijkt erop dat niemand echt bespreekt wat een strsight-forward beetje van jQuery is.
Neem een sectietag en vul deze met de gewenste inhoud in de vervolgkeuzelijst, voeg een stijlkenmerk toe met "display: none" en vervolgens de volgende jQuery-code:
var megaDrop = $ ('# megaDrop'); // Variabele voor het cachen van megaDrop-element var megaContainer = $ ('# megaContainer'); // Variabele om megaContainer-element in cache te plaatsen $ (megaDrop) .klik (functie () $ (megaContainer) .slideToggle (300, function () if ($ (this) .is (": hidden")) $ (megaDrop) .html ("+"); else $ (megaDrop) .html ("×"););); Alles wat Mega Drop echt is, is een slideToggle-effect dat een container met een glijdende animatie toont en verbergt. Er zijn veel praktische toepassingen voor de Mega Drop, of dit nu een uitgebreide navigatie is, of een verborgen galerij, of misschien zelfs een promotievideo..
Veel projecten, met name dashboardinterfaces, vereisen grafieken en chartjs.org is een geweldige manier om ze toe te voegen aan uw op Foundation gebaseerde projecten. Waarom zou u het niet uitproberen, uw gegevens op verschillende manieren visualiseren, animeren en aanpassen? Deze kaarten zien er geweldig uit in het kader van de Foundation, zelfs op retina-schermen.
Chartjs gebruikt het HTML5-canvaselement, ondersteund door alle moderne browsers, en polyfills bieden ondersteuning voor IE7 / 8. De plug-in is afhankelijk van de omgeving, licht van gewicht en biedt tal van aanpassingsmogelijkheden.
In de volgende tutorial bespreken we de Joyride-plug-in (waarmee gebruikers een rondleiding krijgen op uw site), panels, prijstabellen, reguliere tabellen en uitwisseling; waarmee u verschillende afbeeldingen kunt instellen voor verschillende schermformaten. Nog genoeg om te dekken!
