Share
Geloof het of niet, er is veel krachtige interactiviteit die je naar je site kunt brengen met behulp van javascript, naast gladde navigatiemenu's! Deze tutorial zal je helpen je innerlijke koe te vinden door je kennis te laten maken met een van de krachtigste en modulaire Javabibliotheken - MooTools! We zullen een flexibele tool creëren om uw sites producten of diensten te markeren met behulp van het MooTools JavaScript-framework. Leer ook enkele van de vele redenen waarom MooTools misschien wel de juiste javascript-bibliotheek is voor al uw toekomstige projecten!
Dus dit is wat we aan het bouwen zijn, het is een slim mechanisme voor het omdraaien dat heel goed werkt als een product-markeerstift.
Ik weet wat je denkt ... Wat zou MooTools mogelijk te bieden hebben waardoor ik mijn langdurige relatie met jQuery-Of Prototype en Scriptaculous zou kunnen verbreken, wat dat betreft!
Een van de grootste problemen die ik tegenkwam bij het gebruik van jQuery in het verleden, is het feit dat zoveel van hun plug-ins onafhankelijk worden gemaakt en ontwikkeld, wat BETEKENT dat je een vreemdeling vertrouwt om actief zijn plug-in bij te werken. omdat de jQuery-bibliotheek ook nieuwe en nieuwere versies vrijgeeft. Wanneer dit mislukt (en vaak gebeurt dit), zoekt u naar de juiste versie van de kernbibliotheek waardoor uw script correct kan werken!
Misschien zijn Prototype en de bekende partner in crime, Scriptaculous, meer jouw stijl. In dit specifieke geval wordt u het recht op modulariteit ontnomen en moet u twee vette bibliotheken op al uw pagina's opnemen, of in sommige gevallen ook een plug-ins.!
Dus als MooTools zo geweldig is dan ... waarom wordt het niet meer gebruikt? Waarom zijn er geen gazillions van tutorials en boeken op elke bibliotheekplank ?! Er zijn een paar redenen:
U zult echter ruime tools vinden om met meer unieke gebieden van scripting te werken, zoals het parseren van JSON-bestanden, cookies en het insluiten van Flash om er maar een paar te noemen. Ook een handige downloadpagina waarmee u precies kunt kiezen wat u nodig hebt voor uw project, zodat u de kleinste bestandsgrootte kunt garanderen.
Ga naar de MooTools Core Builder-pagina! Voor dit specifieke project, wil je selecteren Fx.Morph, Element.Event, DomReady, en selectors en klik op "Download" met YUI Compressor. Alle afhankelijkheden worden automatisch voor u gekozen. Wees voorzichtig, omdat bepaalde browsers een '.txt'-extensie toevoegen aan een javascript-bestand ter bescherming. Dit moet natuurlijk worden verwijderd en voel je vrij om enkele van de vette personages in de bestandsnaam in te korten.
Maak het HTML-document dat u voor dit project gaat gebruiken en voeg de MooTools-bibliotheek toe. Mijn paginakop ziet er ongeveer zo uit:
Mootools - Hoogtepunten van het product! ...
Bekijk de volgende stijlen en HTML om te zien hoe ik de pagina heb ingedeeld.
CSS-code:
HTML code:
Merk op hoe ik de HTML-lay-out heb. Ik zal geen ID's gebruiken om een van de pagina- of bubbelelementen te selecteren en in plaats daarvan arrays maken van alle elementen die de twee klassen bevatten, waardoor dit script kan schalen, ongeacht hoeveel items je wilt markeren! Alle bubbels en pagina's bevinden zich in een wrapper die absoluut is gepositioneerd in de wrapper van de site (die onze achtergrond bevat waar dit allemaal bovenop zit).
We beginnen met het maken van een wrapper-functie voor onze JavaScript-code waarmee een gebeurtenislistener op het vensterobject wordt geplaatst en wordt geactiveerd zodra de DOM is geladen en gereed is. Dit is belangrijk omdat we ons script nodig hebben om onmiddellijk te beginnen met het wijzigen van de DOM zodra deze beschikbaar is.
Als we deze wrapper-functie NIET gebruiken, is het zeer waarschijnlijk dat u fouten krijgt die beweren dat bepaalde elementen niet bestaan. Een andere optie zou kunnen zijn om het ingesloten javascript aan het einde van de documenttekst te plaatsen. Als u echter besluit om het script extern toe te voegen, komt u dit probleem opnieuw tegen, dus het is een goede gewoonte om nu verder te gaan!
Een andere optie voor 'domready' is om 'load' te gebruiken, die wordt geactiveerd zodra de pagina (inclusief afbeeldingen) volledig is geladen. We willen dit niet voor dit specifieke project omdat het betekent dat afbeeldingen (zoals onze bubbels) op het scherm kunnen knipperen voordat ze worden verborgen door ons script.
Een ander belangrijk ding om op te merken - als je beslist om dit script te linken van een extern '.js' bestand, moet je ervoor zorgen dat je het linkt NA je de MooTools-bibliotheek in de documentkop hebt gekoppeld.
Accentsconagua
window.addEvent ('domready', function () ...); Vervolgens beginnen we met het maken van de arrays voor zowel onze pagina- als bubbelelementen en stellen we enkele initiële in-line stijlen in.
window.addEvent ('domready', function () // Maak variabelen (in dit geval twee arrays) die onze bubbels en pagina's vertegenwoordigen var myPages = $$ ('. page'); var myBubbles = $$ ('. bubble' ); // Zet de dekking op nul zodat ze in eerste instantie // verborgen zijn en schakel de zichtbaarheid voor hun container terug in myBubbles.setStyle ('opacity', 0); $ ('bubbleWrap'). SetStyle ('visibility', 'zichtbaar') ); Ten slotte voegen we gebeurtenislisteners toe aan de paginapictogrammen om morph-effecten op hun bijbehorende bubbels af te vuren. Merk op dat de volgorde van de bubbels zoals uiteengezet in de HTML de ZELFDE volgorde is van de paginapictogrammen. Dit is belangrijk!
window.addEvent ('domready', function () // Maak variabelen (in dit geval twee arrays) die onze bubbels en pagina's vertegenwoordigen var myPages = $$ ('. page'); var myBubbles = $$ ('. bubble' ); // Zet de dekking op nul zodat ze in eerste instantie // verborgen zijn en schakel de zichtbaarheid voor hun container terug in myBubbles.setStyle ('opacity', 0); $ ('bubbleWrap'). SetStyle ('visibility', 'visible') // Voeg onze events toe aan de pagina's myPages.each (functie (el, i) / * Hier veranderen we de standaard 'link' eigenschap in 'cancel' voor onze morph-effecten, waardoor effecten worden onderbroken wanneer de de muis verlaat en komt binnen om onmiddellijk het morph-effect te beginnen dat wordt aangeroepen * / el.set ('morph', link: 'cancel'); el.addEvents ('mouseenter': function () myBubbles [i]. morph ('opacity': 1, 'margin-top': '-15px');, 'mouseleave': function () myBubbles [i] .morph ('onacity': 0, 'margin-top ': 0);););); U ziet dat we een functie koppelen met de methode each () voor alle elementen van de array 'myPages'. En voor elke functie geven we in 'el' door wat het pagina-element vertegenwoordigt, en 'i', wat een geheel getal is dat de plaatsing van dat pagina-element in zijn array voorstelt. We gebruiken de variabele 'i' voor het aanroepen van het morph-effect op het juiste en bijbehorende bellenelement in de array 'myBubbles'.
En dat is het! Vrij pijnloos, toch? Zorg ervoor dat je de werkende demo bekijkt en voeg ook een bladwijzer toe aan de MooTools Documenten-pagina en MooTools-downloadpagina voor toekomstig gebruik! Ik hoop dat deze tutorial nuttig was en ik kijk er naar uit om in de nabije toekomst iets geavanceerder te maken met behulp van de kracht van MooTools-klassen!
