Spoileri on kätevä työkalu sivustolle. Sitä käytetään laajalti eri foorumeilla ja blogeissa, jolloin käyttäjä voi piilottaa tietyn elementin painikkeen painamisen yhteydessä. Lisäksi spoileri näyttää hyvältä sivustolta ja auttaa piilottamaan ne osat, jotka turhaan ylikuormittavat sivua.
Se on välttämätöntä
Jquery-kirjasto
Ohjeet
Vaihe 1
Spoileri voidaan toteuttaa käyttämällä suosittua Jquery-laajennuskirjastoa, joka on kirjoitettu Java Script -ohjelmointikielellä. Sitä käytetään ohjelmointikielen täydellisen vuorovaikutuksen toteuttamiseen sivun HTML-merkintäkoodin kanssa. Jquery-yhteys tehdään HTML-koodilla käyttämällä tagia . Sinun on määritettävä komentosarjan sijainti ja määritettävä sen tyyppi: $ (document).ready (function ()
Vaihe 2
Tietyssä kappaleessa määritelty tekstifragmentti on suljettava erilliseen kerrokseen - div, jonka avulla itse spoileria ohjataan: Sasha käveli valtatietä ja imi kuivumista.
Vaihe 3
Seuraavaksi sinun on luotava kaikkien pilaantuvien divien eteen vastaavat painikkeet, jotka romahtavat ja laajentavat tekstiä. Ensinnäkin spoileri on piilotettu käyttämällä tavallista "hide ()" -toimintoa: $ ("div [name = 'spoil']"). Piilota (); Seuraavaksi sinun on luotava teksti ja kuva kaikille spoilereille, jota käytetään painikkeiden taustana: $ (“P [name = 'spoilbutton']"). Html ("Show text");
Vaihe 4
Etsi kaikki sivun painikkeet ja tarkista ensimmäisen tason otsikot painikkeen edessä. Voit tehdä tämän luomalla ehdon, joka etsii h1-tunnisteita nimen mukaan. Määritetty otsikkoteksti kietoutuu itse div: iin: $ (“p [name = 'spoilbutton']"). Jokainen (function () {If ($ (this).prev (this).get (0).tagName == “H1”) {Var NewSpoilButton = “” + $ (this).prev (this).html () +”Show text”; $ (this).prev (this).replaceWith (“”); $ (this).replaceWith (NewSpoilButton);}})
Vaihe 5
Seuraavaksi sinun on käsiteltävä hiiren painikkeen napsautusta napsautuksella. Jos napsautus havaitaan, se voidaan näyttää: $ (“div [name = 'spoilbutton']"). Napsauta (function () {Jos ($ (tämä).seuraava (tämä).css ("näyttö") = =”Estä”) {
Vaihe 6
Kirjoita sitten perintö. Div: n sisällä teksti on kappaleessa p, jonka sisältö on sijoitettu span-tagiin: $ (this).children (“p”). Children (“span”). HTML („Show text”); Kutista avoin spoileri. Jos se ei ole auki, laajenna tekstiä. Tämä vaihe perustuu perintösääntöön: $ (this).next (this).slideUp ("normal");} else {$ (this).children ("p"). Children ("span"). HTML ("Piilota teksti"); $ (this).next (this).slideDown ("normal");} return false; })
Vaihe 7
Sitten tallennetaan hiiren napin painallus, jolla komentosarja piiloutuu ja avaa spoilerin. $ (“P [name = 'spoilbutton']"). Napsauta (function () {If ($ (this).next (this).css (“display”) =”block”) {$ (this).next (this).slideUp ("normaali"); $ (this).html ("Piilota");} return false;}); Spoiler ready. Se ilmestyy, kun vastaava DIV-lohko löytyy.
