Spoiler je vhodný nástroj pro web. Je široce používán na různých fórech a blogech, což uživateli umožňuje skrýt určitý prvek v době stisknutí tlačítka. Spoiler navíc na webu vypadá dobře a pomáhá skrýt ty části, které zbytečně přetěžují stránku.
Je to nutné
Knihovna Jquery
Instrukce
Krok 1
Spoiler lze implementovat pomocí populární knihovny plug-in jquery napsané v programovacím jazyce Java Script. Používá se k implementaci úplné interakce programovacího jazyka s kódem HTML stránky. Připojení jQuery se provádí pomocí HTML pomocí značky „“. Musíte určit umístění, kde se skript nachází, a nastavit jeho typ: $ (document).ready (function ()
Krok 2
Fragment textu zadaný v určitém odstavci musí být uzavřen v samostatné vrstvě - div, pomocí které bude ovládán samotný spoiler: Sasha kráčel po dálnici a nasával sušení.
Krok 3
Dále musíte vytvořit před všemi divy s názvem zkazit odpovídající tlačítka, která sbalí a rozšíří text. Nejprve je samotný spoiler skryt pomocí standardní funkce "hide ()": $ (“div [name = 'spoil']“). Hide (); Dále je třeba vytvořit text a obrázek pro všechny spoilery, který bude použit jako pozadí pro tlačítka: $ (“P [name = 'spoilbutton']“). Html („Zobrazit text“);
Krok 4
Najděte všechna tlačítka na stránce a zkontrolujte, zda jsou před tlačítkem nadpisy první úrovně. Chcete-li to provést, vytvořte podmínku, která bude hledat značky h1 podle názvu. Zadaný text nadpisu se zalomí do samotného div: $ („p [name = 'spoilbutton']“). Each (function () {If ($ (this).prev (this).get (0).tagName == “H1”) {Var NewSpoilButton = “” + $ (this).prev (this).html () +”Zobrazit text”; $ (this).prev (this).replaceWith (“”); $ (this).replaceWith (NewSpoilButton);}})
Krok 5
Dále musíte klikáním kliknout na tlačítko myši. Pokud je detekováno kliknutí, může být zobrazeno: $ (“div [name = 'spoilbutton']“). Click (function () {If ($ (this).next (this).css („display“) = =”Blok”) {
Krok 6
Pak napište dědictví. V rámci div je text v odstavci p, jehož obsah je umístěn ve značce span: $ (this).children („p“). Children („span“). Html („Zobrazit text“); Sbalit otevřený spoiler. Pokud není otevřený, rozbalte text. Tento krok je založen na pravidle dědičnosti: $ (this).next (this).slideUp („normal“);} else {$ (this).children („p“). Children („span“). Html („Skrýt text“); $ (this).next (this).slideDown („normal“);} return false; })
Krok 7
Poté je zaznamenáno samotné kliknutí myši na tlačítko, čímž skript skryje a rozloží spoiler. $ („P [name = 'spoilbutton']“). Klikněte na (funkce () {If ($ (toto). Další (toto).css („zobrazení“) = „blok“) {$ (toto). Další (this).slideUp („normal“); $ (this).html („Hide“);} return false;}); Spoiler ready. Objeví se, když je nalezen odpovídající blok DIV.
