A spoiler kényelmes eszköz a webhely számára. Széles körben használják különféle fórumokon és blogokban, lehetővé téve a felhasználó számára, hogy egy gombnyomáskor elrejtsen egy adott elemet. Sőt, a spoiler jól néz ki az oldalon, és segít elrejteni azokat a részeket, amelyek szükségtelenül túlterhelik az oldalt.
Szükséges
Jquery könyvtár
Utasítás
1. lépés
A spoiler a Java Script programozási nyelven írt népszerű jquery plug-in könyvtár segítségével valósítható meg. A programozási nyelv és az oldal HTML jelölőkódjának teljes interakciójának megvalósítására szolgál. A jquery kapcsolat HTML használatával történik a címke használatával. Meg kell adnia a parancsfájl helyét, és be kell állítania a típusát: $ (document).ready (function ()
2. lépés
Az egyes bekezdéseken belül megadott szövegtöredéket külön rétegbe kell zárni - egy div-be, amelynek segítségével magát a spoilert is irányítani lehet: Sasha végigment az autópályán és megszáradt.
3. lépés
Ezután létre kell hozni az összes spoil nevű div elé a megfelelő gombokat, amelyek összecsukják és kibővítik a szöveget. Először maga a spoiler van elrejtve a szokásos "hide ()" függvény segítségével: $ (“div [name = 'spoil']"). Hide (); Ezután létre kell hoznia egy szöveget és képet az összes spoiler számára, amelyet a gombok háttereként használunk: $ (“P [név = 'spoilbutton']"). Html („Szöveg megjelenítése”);
4. lépés
Keresse meg az összes gombot az oldalon, és ellenőrizze, hogy az első szintű fejlécek vannak-e a gomb előtt. Ehhez hozzon létre egy feltételt, amely név szerint keresi a h1 címkéket. A megadott címszöveg magába a div-be csomagolódik: $ (“p [név = 'spoilbutton']"]. Mindegyik (function () {If ($ (this).prev (this).get (0).tNAME == „H1”) {Var NewSpoilButton = “” + $ (this).prev (this).html () +”Text show”; $ (this).prev (this).replaceWith (“”); $ (this).replaceWith (NewSpoilButton);}})
5. lépés
Ezután kattintással kell kezelnie az egérgomb kattintását. Ha kattintást észlel, akkor megjeleníthető: $ (“div [név = 'spoilbutton']"). Kattintson a (function () {if ($ (this).next (this).css („display”) = = "Blokk") {
6. lépés
Majd írj örökséget. A div-en belül a szöveg a p bekezdésben található, amelynek tartalma egy span címkébe kerül: $ (this).children („p”). Children („span”). Html („Text show”); Összecsukás nyitott spoiler. Ha nincs nyitva, bontsa ki a szöveget. Ez a lépés az öröklési szabályon alapszik: $ (this).next (this).slideUp („normal”);} else {$ (this).children („p”). Children („span”). Html („Szöveg elrejtése”); $ (this).next (this).slideDown („normal”);} false értéket ad vissza; })
7. lépés
Ezután rögzíti az egérrel a gombra való kattintást, amellyel a szkript elrejti és kibontja a spoilert. $ (“P [név = 'spoilbutton']"). Kattintson a (function () {if ($ (this).next (this).css (“display”) =”block”) {$ (this).next gombra. (this).slideUp („normál”); $ (this).html („Hide”);} false értéket ad vissza;}); Spoiler kész. Akkor jelenik meg, ha egy megfelelő DIV blokkot talál.
