Share
Tro det eller ei, det er mye kraftig interaktivitet du kan bringe til nettstedet ditt ved hjelp av javascript i tillegg til glatt navigasjonsmenyer! Denne opplæringen vil hjelpe deg med å finne din indre ku ved å introdusere deg til en av de kraftigste og modulære javascriptbiblioteker-MooTools! Vi lager et fleksibelt verktøy for å markere produktene eller tjenestene dine på nettstedet ditt ved hjelp av MooTools javascript-rammeverket. Lær også noen av de mange grunnene til at MooTools bare kan være det riktige javascriptbiblioteket for alle dine fremtidige prosjekter!
Så her er det vi bygger, det er en smart rollover mekanisme som fungerer veldig bra som et produkt highlighter.
Jeg vet hva du tenker ... Hva kan MooTools muligens ha å tilby som kan føre til at jeg slår av mitt lange forhold med jQuery-Or Prototype and Scriptaculous for den saks skyld!
Et av de største problemene jeg har spilt på med å bruke jQuery tidligere, er det faktum at så mange av programtilleggene deres er opprettet og utviklet uavhengig - noe som betyr at du legger din tillit til en fremmed for å være aktivt oppdatert deres plugin som jQuery-biblioteket fortsetter å frigjøre nyere og nyere versjoner også. Når dette mislykkes (og ofte ganger det gjør det) finner du deg selv og søker etter den riktige versjonen av kjernebiblioteket som lar skriptet fungere riktig!
Kanskje Prototype og dens kjente partner i kriminalitet, Scriptaculous, er mer din stil. I dette spesielle tilfellet vil du bli fratatt din rett til modularitet, og du er tvunget til å inkludere to biffede biblioteker på alle sidene dine - eller i noen tilfeller også en pluginfil!
Så hvis MooTools er så flott da ... hvorfor blir det ikke brukt mer? Hvorfor er det ikke gazillions av opplæringsprogrammer og bøker på hver bibliotekshylle ?! Det er en rekke årsaker:
Du vil imidlertid finne rikelig med verktøy for å jobbe med flere unike områder av skripting, som JSON-filparsing, informasjonskapsler og flash-embedding for å nevne noen. Også en praktisk nedlastingsside som lar deg velge nøyaktig hva du trenger for prosjektet ditt, slik at du kan sikre den minste filstørrelsen mulig.
Gå over til MooTools Core Builder-siden! For dette bestemte prosjektet vil du velge Fx.Morph, Element.Event, DomReady, og velgere og klikk "Download" ved hjelp av YUI Compressor. Alle avhengigheter blir automatisk valgt for deg. Vær oppmerksom, da visse nettlesere vil legge til en ".txt" -utvidelse til en javascriptfil for din beskyttelse. Dette må tydeligvis fjernes, og vær så snill å trimme av noen av de søte tegnene i filnavnet.
Opprett HTML-dokumentet du vil bruke for dette prosjektet, og legg til MooTools-biblioteket. Sidens hode ser noe slik ut:
Mootools - Product Highlights! ...
Ta en titt på følgende stiler og HTML for å se hvordan jeg har lagt ut siden.
CSS-kode:
HTML kode:
Legg merke til hvordan jeg har HTML-filen lagt ut. Jeg vil ikke bruke ID-er til å velge noen av side- eller bobleelementene, og i stedet lage arrays av alle elementene som inneholder de to klassene, som vil tillate dette skriptet å skalere, uavhengig av hvor mange elementer du velger å markere! Alle bobler og sider er inneholdt i en innpakning som er helt posisjonert innenfor sidekartet (som inneholder vår bakgrunn der alt dette sitter på toppen av).
Vi starter med å lage en wrapper-funksjon for vår javascript-kode som plasserer en hendelseslytter på vinduobjektet, avfyring når DOM er lastet og klar. Dette er viktig fordi vi trenger vårt skript for å umiddelbart begynne å endre DOM når det er tilgjengelig.
Hvis vi IKKE bruker denne wrapper-funksjonen, er det ganske sannsynlig at du får feil som hevder at enkelte elementer ikke eksisterer. Et annet alternativ kan være å plassere det innebygde javascript på slutten av dokumentlegemet. Men hvis du bestemmer deg for å feste skriptet eksternt, kommer du igjen til dette problemet, så det er en god vane å komme inn i nå!
Et annet alternativ for 'domready' er å bruke 'load' som vil brenne når siden (bilder inkludert) er fullstendig lastet. Vi vil ikke ha dette for dette bestemte prosjektet fordi det betyr at bilder (som våre bobler) kanskje blinker intitalt på skjermen før de blir skjult av vårt skript.
En annen viktig ting å merke seg om du bestemmer deg for å koble dette skriptet fra en ekstern .js-fil, vil du sikre at du kobler den etter at du har koblet MooTools-biblioteket i dokumenthodet.
Accentsconagua
window.addEvent ('domready', funksjon () ...); Deretter begynner vi med å opprette arrays for både vår side og bobleelementer og sette noen innledende in-line stiler.
window.addEvent ('domready', funksjon () // Opprett variabler (i dette tilfellet to arrays) som representerer våre bobler og sider var myPages = $$ ('. side'); var myBubbles = $$ ('.bubble' ); // Sett bobler opacity til null slik at de er skjult i utgangspunktet // og skift synlighet på for deres container tilbake på myBubbles.setStyle ('opacity', 0); $ ('bubbleWrap'). SetStyle ('synlighet' 'synlig')); Til slutt vil vi legge til hendelselyttere på sideikonene for å fyre morph-effekter på deres tilsvarende bobler. Legg merke til at rekkefølgen på boblene som er lagt ut i HTML-koden, er SAME rekkefølgen til sidens ikoner. Dette er viktig!
window.addEvent ('domready', funksjon () // Opprett variabler (i dette tilfellet to arrays) som representerer våre bobler og sider var myPages = $$ ('. side'); var myBubbles = $$ ('.bubble' ); // Sett bobler opacity til null slik at de er skjult i utgangspunktet // og skift synlighet på for deres container tilbake på myBubbles.setStyle ('opacity', 0); $ ('bubbleWrap'). SetStyle ('synlighet' '/ synlig') // Legg til hendelsene på sidene myPages.each (funksjon (el, i) / * Her endrer vi standard 'link' -egenskapen for å "avbryte" for våre morph-effekter, noe som sikrer at effektene avbrytes når musen går og går inn for å umiddelbart begynne at morph-effekten blir kalt * / el.set ('morph', link: 'cancel'); el.addEvents ('mouseenter': function () myBubbles [i]. morph ('opacity': 1, 'margin-top': '-15px');, 'mouseleave': funksjon () myBubbles [i] .morph ('opacity': 0,' margin-top ': 0);););); Du vil legge merke til at vi vedlegger en funksjon ved hjelp av hver () -metoden til alle elementene i 'myPages'-arrayet. Og for hver funksjon passerer vi i 'el' som representerer sideelementet, og 'I' som er et heltall som representerer plasseringen av det sideteelementet innenfor dets rekkefølge. Vi bruker variabelen 'i' for å ringe morph-effekten på riktig og tilsvarende bobleelement innenfor 'myBubbles'-arrayen.
Og det er det! Ganske smertefri var det ikke? Husk å se den fungerende demoen, og også bokmerk MooTools Docs-siden og MooTools Download-siden for fremtidig referanse! Jeg håper denne veiledningen var nyttig, og jeg gleder meg til å sette sammen noe litt mer avansert i nær fremtid ved hjelp av kraften i MooTools-klassene!
