Weboldal Ivana Cherednichenko, hozzon létre egy legördülő listában a weboldal

Természetesen számos módja van, hogy hozhat létre egy legördülő lista, de ebben a cikkben bemutatjuk a működési elve egy ilyen lista. Ezért alakult a lista nagyon egyszerű lesz, és az egyszerűség a kulcs a sikeres végrehajtásához.

A HTML-ben, vannak speciális címkéket, amelyek lehetővé teszik, hogy létrehoz listák - ezt a címkét

és
• . Ezek a címkék a leggyakrabban használt, hogy megteremtse a listákat a web-oldalak, ellentétben a tag
  ; Ez az oka annak, hogy fogunk használni címkék
  és
  • .

    Létrehozásához az elején egy egyszerű lista, így például a következőkben bemutatjuk:

    Ha olyan környezetben Quick oldal. hozhat létre egy listát egy nagyon egyszerű módja! Ennek eredményeként, akkor kap a következő HTML-kód:

    Ezen a ponton, hogy a lista nem bővíteni és összeomlás, mert csak HTML-kódot. Ahhoz, hogy hozzá egy dinamikus, ami annyira szükséges legördülő listában, akkor kell átalakítani, ezt a listát a következő formában:

    Azt nyilvánították nevezett funkció doMenu. amely eltarthat egy számértéket AIndex. Attól függően, hogy ez az érték fogja kezelni az egyik két feltételnek. Az adott körülmények között azt fellebbezni a az ingatlan értéke style.display. Ez a CSS-tulajdonság lehetővé teszi, hogy meghatározza, hogy milyen típusú oldal elem. A teljes rendelkezésre álló hét értékeket az ingatlan, de fogunk összpontosítani két: blokk és nincs. Ha megad egy blokk értékét. ez teszi egy elem a blokk oldalán. Így egy elem lehet szabadon elhelyezhető. Egy példája a blokk elem tag

    . A lista elemeit is blokk, így használjuk az ingatlan. Ha az ingatlan értéke style.display hozzárendeli a none. ez teszi az oldalelemek láthatatlan. Ebben az esetben az oldal jelenik meg, mintha ez az elem nem létezik a forráskód a web-oldal [2, p. 515].

    Ebben a szakaszban, akkor van valami, mint a következő web-oldalon:

    Ha fut az oldalon, akkor már ezen a listán: nyitó és záró elemeit. Úgy tűnik, hogy a probléma megoldódott - hoztunk létre egy legördülő listából. De ha a fejlődő saját web-oldalt, akkor előfordulhat, hogy a kérdésekre.

    Először is, hogy miért nem használja style.visibility tulajdonság helyett style.display. Csak style.visibility tulajdonság lehetővé teszi, hogy a tétel oldalai látható vagy nem látható [2, p. 536]. De ha a tétel nem látható (style.visibility = „rejtett”), ez nem jelenti azt, hogy van olyan elem az oldalon. Ha a kód szoktuk ezt a tulajdonságot, majd bezárta az első fejezet az elemek között látható elemei létezett egy rés, amit ebben az esetben semmit. Ha azt szeretnénk, hogy vizuálisan látni a különbségeket a két tulajdonság, helyettesíti a megfelelő töredéke a script kód a következő blokk kódját, és az eredményeket a Web-böngésző zárt az első fejezet az elemek:

    DoMenu funkció módosításához a következő:

    Változtatások mentése és fuss át a Web-böngésző. Nos? List nyitja és zárja? Igen! Vegyük észre, hogy nem változott a forráskód HTML-oldalak és korrigált funkciót. Most adjuk hozzá a többi lista terméket.

    A fenti függvény, fordulunk, hogy a gyűjtemény (tömb) az összes elem document.all oldalon. Természetesen ahelyett, hogy fordult a megfelelő oldalra gyűjtemény lehetne használni document.getElementById funkciót. amely elérhető a W3C DOM szabvány, de véleményem szerint a fellebbezés a gyűjtemény lesz nagyobb biztonságban és a kód ebben az esetben (ene) is működik, a régi böngészők [1, p. 112].

    Most van itt az ideje, hogy hozzon létre egy listát, amely tartalmazza több mint egy fészkelő elem. Tekintettel arra, hogy létrehoztunk egy nagyon sokoldalú kódot szélesíteni az elemek száma és a beágyazási szint a lista elemek nagyon egyszerű. Cserélje ki a kódot az első elem a következő részlet:

    Most megpróbálunk adni egy modern formája legördülő listából. Ehhez meg kell határoznunk egy stílust, valamint felhívni a két kép. Minden egyes elem, amely al-elemek, meg kell adni a képet tag, amely szeretné beállítani az azonosító ID. Kérdezd az egyetemes értékét az ingatlan, nem volt szükséges, hogy minden körülmények között és kivételeket a script kódot. A legoptimálisabb ebben az esetben az ID = „chapter_imgX”. ahol ahelyett, hogy az X szimbólumot meg kell tenni a megfelelő numerikus azonosítót. Például az elem „1. fejezet”, a címkét:

    ; A „1. kategóriába” elem -

    és így tovább.

    Néhány felhasználó letilthatja a képek megjelenítését, így a kép címkéket, kívánatos, hogy meghatározza és méretét a paraméterek szélesség és magasság. Egy egyszerű példa erre nem került sor, de ha azt akarjuk, hogy megvédje a listát, ha letiltja a képek megjelenítését ne hanyagolja a két címkeparaméterek .

    Most változik a függvény doMenu a következő:

    Itt létrehozunk egy kiegészítő változó imgObj. amely egy hivatkozás egy tárgy képét. Használhatja a gyűjtemény document.images. de úgy, hogy ne keverjék össze Önnek, a kód az tisztában van a gyűjtemény minden oldalelemek - document.all. Továbbá, szükség esetén alelemeinek nem látható vonal imgObj.src = „treeOpened.png” fut ezen a kapcsolaton keresztül. Ez a sor lehetővé teszi, hogy letölthető treeOpened.png kép imgObj fokon.

    Távolítani egy listát a jelölő címke, amely beilleszti az alapértelmezett böngésző, meg kell kérni a következő stílus:

    Azért hoztuk létre a többé-kevésbé jó megjelenésű legördülő listából, amely akkor nagyon könnyen módosítására és javítására. Ha azt szeretnénk, hogy rákattint a képre van egy nyitó vagy záró megfelelő listát, akkor meg kell szúrni a címkét Lásd a következő kódot: onClick = "doMenu (X);". ahol X helyett azonosítójával listát kell megjeleníteni vagy zárva kattintva egy adott képet.

    Azért hoztuk létre a legördülő listából. Ezekkel a példákkal, mint egy kiindulási pont, akkor képes lesz arra, hogy fokozza, és jelentősen javítja, ezért szoktuk univerzális megközelítést a listán. Ahhoz, hogy tovább bővítse a listát lesz szükség, minimális időráfordítással. Természetesen minél több színes és barátságos szeretne létrehozni a listán, annál nehezebb lesz a forráskódot. De ne felejtsük el, hogy ha egy univerzális megközelítés, akkor hozzon létre egy szép fajok listája, minden gond nélkül.

    Hasonló legördülő listák használják a tartalom bizonyos szakaszait termékek tanúsítványokat. valamint a részben a helyszínen térképet.

    Teljesítményének javítására adott a cikkben forgatókönyvek, ajánljuk számos módon.

    A második lehetőség, hogy kilépjen a használata rajzokat. Ahhoz, hogy hajtsák végre a két legördülő minta megjelenítéséhez szükséges jeleket „plusz” és „mínusz”, de hogy ezek a karakterek is megjeleníthetők, és egyszerű szimbólumok. Úgyhogy használja őket, hanem a rajzok; Ebben az esetben - ez egy nagy lehetőség.

    Itt van beállítva a stílus, amely keretet rajzol a vastagsága egy pixel körül a kontúrt a linkeket. Meg kell jegyezni, hogy a hátránya ennek a módszernek, hogy meg kell érkezni csak betűméret ilyen hivatkozást, hogy ez ugyanaz a forma, mint a „plusz” és „mínusz”. Mint látható a függvény kódját, nyilvánvaló, hogy csak lehetővé teszi, hogy cserélje ki a szimbólumok bizonyos feltételek mellett.

    A kód maga egy ilyen kapcsolat a következő lenne:

    Egy további hasznos darab kódot tovább csökkenthető:

    Mint látható, a munka helyett a képen, akkor használja ugyanazt a megközelítést, de csak használható címkék . Mint egy működő példa oldal térkép - megtekinthetjük a forrás HTML-kódot a kártya, hogy a konkrét megvalósítása a legördülő listában a web-oldal.

    Sok olvasó ezt az oldalt kérdés merült fel, hogy hogyan lehet egy oldalt a legördülő listát, amelyben az oldal betöltésekor a tartalmát, hogy van, akkor nem jelennek meg összeomlott. Szóval szerkesztett példákat legördülő listából a cikket, és további információkat, amelyeket meg lehet valósítani.

    Ehhez meg kell változtatni a szkript néhány (lásd article_12_9.html az archívumból a példák a cikket). Ehhez meg kell végrehajtani új funkciók: doMenu_Hide. amely elrejti a tartalmát a lista, amely összehajtani és doMenu_Show. amely felfedi a tartalmát a listán, azaz, hogy megjelenítse a tartalmát. doMenu funkciót is módosított, hogy meg tudja valósítani az összes lehetőséget az új megközelítés. Azt is hozzáteszi, egy új funkció onBodyLoad. amely leírja a hatását, ha az oldal betöltésekor - vagyis, amelyek részei a legördülő listából láthatónak kell lennie, ha az oldal megnyitásakor, és melyek nem. Kapunk az alábbi kódot:

    Figyeljük meg, hogy a kód úgy néz szokatlanul onBodyLoad funkciót. Ez használ egy hivatkozást document.all. adja meg a megfelelő beállításokat, ami kell doMenu_Hide funkció (azonos paraméterekkel függvényében kap doMenu_Show).

    Most meg akarja változtatni a címke tovább . Kész az oldal, ahol az indításkor nem jelenít meg minden elem a listában az archívumban tárolt a példák a cikk (article_12_9.html).

    Észrevetted már, hogy az egyesítés az utolsó forráskód mutatja be ezt a cikket funkció doMenu az Előre meghatározott paraméterek - fejezet és shSpan. Ez úgy történik, hogy a kódokat az összes legördülő listák azonos megjelenés és úgy érzi, nem egyedi jellemzői néhány legördülő listából.

    Azt az eredményt hozták ezt a cikket szeretném megosztani veletek a lista ihodnymi kódokat, hogy hoztunk létre ezt a cikket.

    előző ◈ a következő