Share
Astăzi marchează prima intrare într-o nouă serie "Web Dev Q & A". Sunt de multe ori trimis prin e-mail cu privire la diverse întrebări legate de dezvoltarea web. Deși unii sunt mai specifici decât alții, multe dintre acestea, sunt sigur, ar fi de apel la toți cititorii noștri. Ca atare, în fiecare săptămână, vom posta un nou lot de întrebări și răspunsuri din partea comunității, atât în articole, cât și în formularul video, pentru confortul dvs..
În această săptămână, discutăm funcțiile de redirecționare JavaScript, un compilator LESS și acele plutitoare CSS dificile.
"Hi Nettuts +: există o modalitate ușoară de a crea funcții de apel invers cu JavaScript obișnuit, similar cu ceea ce putem face cu jQuery?"
Desigur. Acest lucru este ușor. De exemplu, să creăm o funcție generică.
Accentsconagua
funcția doSomething (nume) alert ("Bună ziua," + nume); DoSomething ("John și Kate Plus 8"); Când a fost chemat, așa cum era de așteptat, browserul va alerta "Bună, John și Kate Plus 8." Acum, dacă vrem să trecem și o funcție de apel invers, ca al doilea parametru al funcției "doSomething", putem trece pur și simplu o funcție anonimă.
funcția doSomething (nume, cb) alertă ("Bună ziua," + nume); doSomething ("John and Kate Plus 8", funcția () alert ('această funcție de apel inversă se va executa numai după ce doSomething are');); Observați cum am adăugat un al doilea argument la Fă ceva() funcție: "cb." Sunteți liber să etichetați așa cum doriți, deși este obișnuit să o păstrați ca "cb", care se referă la "ctoateb"Acum, această funcție anonimă va fi reprezentată prin intermediul acestei variabile.
Ultimul pas este să-l numiți doar în partea de jos a funcției.
funcția doSomething (nume, cb) alertă ("Bună ziua," + nume); cb (); // rulați acum funcția de apel invers doSomething ("John and Kate Plus 8", funcția () alert ('această funcție de apel inversă se va difuza numai după ce doSomething are');); Dragă Nettuts +: Mi-a plăcut videoclipul LESS.js, dar nu vreau să îl folosesc pentru producție. Există o aplicație pentru Coda care îmi va compila în mod automat codul?
Lucru sigur. Cea mai bună soluție am reușit să găsesc este numită LESS.app.
După ce îl descărcați (gratuit), glisați pur și simplu folderul proiectului în aplicație, care îl instruiește ceas toate fișierele .LESS. În acest moment, puteți continua să lucrați la proiectul dvs., ca de obicei. De fiecare dată când salvați, compilatorul va rula, ceea ce generează / actualizează un automat creat style.css fişier. Când ați terminat să vă dezvoltați aplicația, trebuie doar să schimbați referințele foilor de stil style.less la style.css, în consecinţă. Uşor! Acum nu există niciun motiv să nu profitați de LESS - dacă nu utilizați o soluție diferită, cum ar fi Sass.
"Hei Nettuts +: Deci, am un meniu de navigare cu o listă de legături orizontale, dar când am setat o culoare de fundal în meniu, nimic nu apare, cum se face?
Meniu Problemă
Bine, aceasta este o confuzie comună. Motivul pentru care nu apare fundalul "negru" se datorează faptului că ați deplasat toate elementele listei din stânga. Când faceți acest lucru, provoacă restrângerea elementului parent (#nav). Există două soluții:
"Overflow: hidden" este un truc mic care a fost descoperit doar în ultimii ani, în jurul anului 2005. Aplicând o valoare "ascunsă" sau "auto" la proprietatea "overflow", pare să reamintească elementului părinte că ar trebui să-i înfășoare copiii! Logica este un pic ciudat, recunosc; cu toate acestea, funcționează.
#nav fundal: negru; overflow: ascuns; / * ta da! * /
Setarea "overflow" funcționează 80% din timp, însă, ar putea exista momente când trebuie să se suprapună limitele elementului părinte, caz în care "overflow: hidden"; va opri imaginea / elementul. A doua soluție este de a folosi metoda populară "clearfix". Veți folosi acest lucru de multe ori, așa că vă recomandăm să mergeți mai departe și să salvați codul în instrumentul de gestionare a fragmentelor preferate, cum ar fi TextExpander, Texter sau Snippets.
Mai întâi, reveniți la marja dvs. și aplicați o clauză de "clarificare" elementului părinte.
Apoi, să adăugăm stilul adecvat pentru această clasă. Funcționalitatea generală este folosirea clasei "după" psuedo pe elementul părinte pentru a aplica conținutul și apoi pentru a clarifica acel conținut - care, în esență, mimează adăugarea
în partea de jos a marjei. Cu toate acestea, această metodă este mai inteligentă și nu ne distruge marcajul semantic frumos..clarfix * zoom: 1; / * declanșatorii au haslayout în versiunile mai vechi ale iE .clearfix: după content: ""; afișare: bloc; clar: ambele; vizibilitate: ascuns; font-size: 0; înălțime: 0;
"hasLayout este importantă deoarece forțează elementul să aibă o formă dreptunghiulară."
După cum puteți vedea, vom folosi "după" pentru a adăuga un spațiu gol după tot conținutul plutitor. Apoi am setat ecranul să blocheze și să-l șterge, ceea ce obligă părintele să înfășoare copiii plutiți. În sfârșit, am stabilit câteva reguli generale de vizibilitate, dimensiune font și înălțime pentru a ne asigura că acest cod nu afectează aspectul nostru în anumite browsere.
Este de remarcat declarația "* zoom: 1" în partea de sus. Proprietatea "zoom" ne permite să declanșăm proprietatea "hasLayout" proprietară a IE. hasLayout este importantă deoarece forțează elementul să aibă o formă dreptunghiulară. Aceasta înseamnă că conținutul elementului nu poate curge în jurul altor cutii, ceea ce va cauza adesea probleme majore de aspect cu site-ul dvs. Web. Atunci când proprietatea proprietară a Microsoft "hasLayout" este egală cu adevărat, elementul "are aspect". Din fericire, putem declanșa acest lucru prin adăugarea de proprietăți specifice selectorilor noștri, inclusiv "zoom". Altele declanșeazăLayout, pentru a numi doar o mână, sunt:
Aceasta va face acest lucru pentru această intrare "Web Dev Q & A". Dacă aveți o întrebare de dezvoltare web "nu prea complicată" pentru dvs., puteți:
Vă mulțumim pentru citire și vizionare!
