Interaktív csepp tartalom az oldalon
Interaktív csepp tartalom az oldalon.
Interaktív oldalakra népszerű a felhasználók körében, megjelenik egy webhely egy új szintre, de ettől eltekintve, hogy ők is tudják, hogy a weboldalak sokkal kényelmesebb. Ebben a leírásban megmutatom, hogyan tudunk hasznos lehet a honlap interaktív legördülő tartalmat.
Például, ha a weboldal tartalmaz egy könyvtárat, amely feltételezi, fénykép és bármely leíró információkat mindegyik, a felhasználó sokkal kényelmesebb, hogy megtekinthesse ezt az információt ugyanazon az oldalon, mint minden alkalommal, hogy menjen egy újat, majd ismét vissza, hogy más esetekben a webes könyvtár. De ahhoz, hogy illeszkedjen mindent egy weboldal nagyon problematikus: ha egy weboldal már nagyon régóta, és azt hiszem, hogy nem túl kényelmes. Ez az ehhez hasonló helyzetekben segít, hogy interaktív webes tartalmat az oldalon, amely akkor jelenik meg, amikor a felhasználó lesz szükség, és újra eltűnnek, amikor a felhasználó weboldalt akarja. Ez az értelme az interaktív weboldalak - a felhasználó által végrehajtott intézkedések és interaktív honlap teljesíti a kívánságait. Ez igaz lehet a termék katalógus, néhány fotó egy leírást, és még most, amikor egy weboldal, hogy található a sok tartalom (hogy ne legyen túl hosszú), a rejtett jegyzetek, amelyek megjelennek és eltűnnek. Azt hiszem, meg fogja találni sokkal esetekben az ilyen internetes interaktivitást. És a legfontosabb dolog az, hogy nagyon egyszerű. Térjünk a szavaktól a cselekvés és a kezdéshez!
1. Így hozunk létre egy weboldalt a cég, amely részt vesz egy szép csomagolópapír. On interaktív weboldal lesz a könyvtár képekkel, kattintva, amely a látogató láthatja interaktív tartalom információkkal csomagot. A gomb ismételt megnyomásával, interaktív webes fül zárva lesz. Tehát anélkül mozog egy új weboldal oldal, a felhasználó kényelmesen megtekintheti az összes lehetőséget. Ezen kívül azt megnyitja a képet fogja változtatni a stílusát, és hogy fog kinézni egy kicsit más. És mindez teszünk mindössze néhány Stoczek jQuery kódot. Kezdjük a legegyszerűbb tervezési weboldalakat. Hozzon létre egy HTML és CSS fájlok, és hívja őket index.html és style.css. Nem fogok létrehozni egy bonyolult design, mert a célja a bemutató kicsit más: hogy mutassa meg, hogyan kell egy weboldal interaktív tartalmat. Létrehozunk egy egyszerű oldalt sapkával, a felső navigációs és tartalmi rész, hol lesz az interaktív képeket. Ehhez index.html írják be az alábbi kódot:
Ajándék „éjjel és nappal”
Csodálatos ajándék a fekete papírra fehér rózsa.
Klasszikus és elegancia
Ajándék „Tenderness”
Élénk színek és finom tavaszi virágok ad az összes szeretettel!
Ajándék „éjjel és nappal”
Csodálatos ajándék a fekete papírra fehér rózsa.
Klasszikus és elegancia
Ajándék „Tenderness”
Élénk színek és finom tavaszi virágok ad az összes szeretettel!
Ajándék „éjjel és nappal”
Csodálatos ajándék a fekete papírra fehér rózsa.
Klasszikus és elegancia
Ajándék „Tenderness”
Élénk színek és finom tavaszi virágok ad az összes szeretettel!
Ajándék „éjjel és nappal”
Csodálatos ajándék a fekete papírra fehér rózsa.
Klasszikus és elegancia
Ajándék „Tenderness”
Élénk színek és finom tavaszi virágok ad az összes szeretettel!
minden egyszerű itt. Tag kalapok weboldal, a felső navigációs tag, a tag szakasz interaktív tartalom és a lábléc tag. A címke tartalmát nyolc kép, mindegyik saját kép (amely megtalálható a kiegészítő anyagok). Miután minden egyes tag kép található div tag, amelyben az szerepel, hogy a megfelelő leírást minden interaktív kép (leírom a két típus, de mindet természetesen más lesz). . Mindezek div címkét ugyanazon osztály class = „description Is már csatlakozik a fájlt a stílusok az oldalt, de még mindig stílusok még, így ebben a szakaszban az oldal így néz ki:
Itt meg kell figyelni, hogy a tény, hogy elrejtse blokkokat leíró kép, hozzárendelve az összes díva az osztállyal leírás display: none. Ez az a stílus lesz a jövőben, hogy megváltoztassuk a jQuery kódot megnyitni, és újra elrejteni a legördülő interaktív tartalmat.
Alkalmazása után ezek a stílusok a mi weboldal fog kinézni:
3. Most van itt az ideje, hogy ezt a interaktivitás mi weblapot. Először is le kell tölteni, és csatlakoztassa a jQuery könyvtár a weblapot. Akkor töltse le azt jquery.com honlap, vagy nem találja a fájlokat további források ebben a leckében. Létrehozni egy külön mappát szkriptek parancsfájlokat. Is, hozzon létre egy mappát a letöltött fájlt jquery könyvtár és csatlakoztassa a index.html dokumentum címkék közötti fejét.
4. Most hozzon létre egy új fájlt java script, és mentse el egy mappát script nevű myscript.js. És csatlakoztassa az index.html dokumentumot. Azt csinálni, mielőtt a záró testet.
Miért a végén? Mivel így a oldal betöltése gyorsabb, mint ha mi ezt a fájlt az elején.
5. lépés az újonnan létrehozott fájlt és meg kell kezdeni interaktivitást honlapunkon.
Lesz néhány sor, hogy fog az online tartalom nyitott és zárt, és az aktív elem, hogy megváltoztatja a stílust.
6. Amikor a oldal készen áll, elindul a funkciót. A függvény egy esemény hallgató, amely választ ad egy kattintással egy elemére osztály «bemutatja» (ebben az osztályban van hozzárendelve az összes képünk).
Ha kattintás történik, futtasson egy funkció, amely megkeresi a következő div után megjelenő képek (DIV egy leírást a képen), és „lefagy” az ő slideToggle kapcsolót. Ez a kapcsoló működik az elv a „nyílt tartalom az először kattintott, közel a második.”
A következő sor „lefagy” a kép toggleClass, ami lesz rendelve az osztály „activ” képet az első kattintás, és törölje őket.
Ennyi van még hátra csak regisztrálni az osztály „aktiv” a dokumentumban a stílust. Csináljuk: Ide style.scc és felírni a következő sort:
Láthatjuk a script a böngészőben az oldal újratöltődik.
Ahhoz, hogy az új leckéket, hogyan lehet még használni jQuery (és nem csak), iratkozz fel a blog frissítéseket. Ígérem, hogy csak egy érdekes és hasznos órákat! Köszönöm, és sok szerencsét!