Share
I dag markerer den første oppføringen i en ny "Web Dev Q & A" -serie. Jeg mailes ofte om ulike webutviklingsrelaterte spørsmål. Selv om noen er mer spesifikke enn andre, vil mange av disse, jeg er sikker, appellere til alle våre lesere. Som sådan, hver uke eller så, legger vi inn en ny gruppe spørsmål og svar fra samfunnet, i både artikkel og videoform, for enkelhets skyld.
Denne uken diskuterer vi Javascript tilbakeringingsfunksjoner, en mindre kompilator og de vanskelige CSS-flyter.
"Hei Nettuts +: Er det en enkel måte å lage tilbakeringingsfunksjoner med vanlig JavaScript, ligner på hva vi kan gjøre med jQuery?"
Selvfølgelig. Dette er noe lett. For eksempel, la oss opprette en generisk funksjon.
Accentsconagua
funksjon doSomething (navn) alert ('Hei,' + navn); doSomething ("John og Kate Plus 8"); Når du ringer, vil du, som forventet, varsle "Hei, John og Kate Plus 8." Nå, hvis vi også vil sende en tilbakeringingsfunksjon, som den andre parameteren til "doSomething" -funksjonen, kan vi bare sende en anonym funksjon.
funksjon doSomething (navn, cb) alert ('Hei,' + navn); doSomething ("John and Kate Plus 8", funksjon () alert ('denne tilbakeringingsfunksjonen vil bare løpe etter at doSomething har');); Legg merke til hvordan vi har lagt et annet argument til gjør noe() funksjon: "cb." Du er fri til å merke dette slik du ønsker, men det er vanlig å beholde det som "cb", som refererer til "callebAkk. "Nå vil den anonyme funksjonen bli representert via denne variabelen.
Det siste trinnet er å bare kalle det på bunnen av funksjonen.
funksjon doSomething (navn, cb) alert ('Hei,' + navn); cb (); // nå kjøre tilbakeringingsfunksjonen doSomething ("John og Kate Plus 8", funksjon () alert ('denne tilbakeringingsfunksjonen vil bare løpe etter at doSomething har');); Kjære Nettuts +: Jeg elsket LESS.js-videoen din, men vil ikke bruke den til produksjon. Er det en app for Coda som automatisk vil kompilere koden min i stedet?
Sikkert. Den beste løsningen jeg kunne finne er kalt LESS.app.
Etter at du har lastet ned den (gratis), drar du enkelt prosjektmappen din inn i appen, som instruerer den se alle .LESS-filer. På dette tidspunktet kan du fortsette å jobbe med prosjektet ditt, per vanlig. Hver gang du lagrer, kjører kompilatoren, som genererer / oppdaterer en automatisk opprettet style.css fil. Når du er ferdig med å utvikle appen din, trenger du bare å endre stilark referanser fra style.less til style.css, tilsvarende. Lett! Nå er det ingen grunn til ikke å dra nytte av MINDRE - med mindre du bruker en annen løsning, som Sass.
"Hei Nettuts +: Så jeg har en navigasjonsmeny med en liste over horisontale koblinger, men når jeg setter en bakgrunnsfarge til menyen, vises ingenting? Hvordan kommer? Her er koden min:"
Menyproblem
Ok, dette er en vanlig forvirring. Grunnen til at bakgrunnen for "svart" ikke vises, er fordi du har dratt alle listepostene til venstre. Når du gjør det, får det foreldreelementet (#nav) til å kollapse. Det er to løsninger:
"Overflow: hidden" er et smalt lite trick som bare ble oppdaget i de siste årene, rundt 2005. Ved å bruke en verdi av "skjult" eller "auto" til "overløp" -egenskapen, synes det å minne foreldreelementet om at Det skal være å pakke inn barna sine! Logikken er litt rar, jeg innrømmer; likevel, det virker.
#nav bakgrunn: svart; overløp: skjult; / * ta da! * /
Innstilling av "overløp" virker 80% av tiden, men det kan være ganger når vi trenger å overlappe grensene til overordnet element, i så fall "overløp: skjult;" vil hakke bildet / elementet av. Den andre løsningen er å bruke den populære "clearfix" metoden. Du bruker ofte denne, så jeg anbefaler at du går videre og lagre koden i verktøylinjehåndteringsverktøyet, som TextExpander, Texter eller Snippets.
Gå først tilbake til oppslaget, og bruk en klasse med "clearfix" til overordnet elementet.
Deretter la vi legge til riktig styling for denne klassen. Den generelle funksjonaliteten er at vi bruker "etter" psuedo-klassen på foreldreelementet for å bruke innhold, og deretter fjerner det innholdet - som i det vesentlige etterligner å legge til
til bunnen av markeringen din. Denne metoden er imidlertid smartere, og ødelegger ikke vår vakre, semantiske mark-up..clearfix * zoom: 1; / * triggers har haslayout i eldre versjoner av iE .clearfix: etter content: ""; skjerm: blokk; klare: begge; synlighet: skjult; skriftstørrelse: 0; høyde: 0;
"hasLayout er viktig fordi det tvinger elementet til å ha en rektangulær form."
Som du ser, bruker vi ": etter" for å legge til et tomt mellomrom etter alt det flytede innholdet. Vi stiller deretter skjermen for å blokkere, og rydder den, noe som tvinger foreldrene til å vikle de flytende barna. Til slutt setter vi noen generelle synlighet, skriftstørrelse og høyderegler for å sikre at denne koden ikke påvirker vårt layout i noen nettlesere.
Verdt å merke seg er "* zoom: 1" -deklarasjonen øverst. Egenskapen "zoom" tillater oss å utløse IEs proprietære "hasLayout" -egenskap. hasLayout er viktig fordi det tvinger elementet til å ha en rektangulær form. Dette betyr at innholdet i elementet ikke kan flyte rundt andre bokser, noe som ofte fører til store layoutproblemer med nettstedet ditt. Når Microsofts proprietære eiendom "hasLayout" er lik true, har elementet "layout". Heldigvis kan vi utløse dette ved å legge til bestemte egenskaper for våre selektorer, inkludert "zoom". Andre harLayout utløser, for å nevne bare en håndfull, er:
Det vil gjøre det for dette flaggskipet "Web Dev Q & A" -oppføring. Hvis du har et "ikke-for-komplisert" webutviklingsspørsmål for oss, kan du:
Takk for at du leser og ser på!
