Spojler je pohodlný nástroj pre dané stránky. Je široko používaný na rôznych fórach a blogoch, čo umožňuje používateľovi skryť konkrétny prvok v okamihu stlačenia tlačidla. Spojler navyše vyzerá na webe dobre a pomáha skryť tie časti, ktoré zbytočne preťažujú stránku.
Je to nevyhnutné
knižnica Jquery
Inštrukcie
Krok 1
Spojler je možné implementovať pomocou populárnej knižnice doplnkov jquery napísanej v programovacom jazyku Java Script. Používa sa na implementáciu úplnej interakcie programovacieho jazyka s kódom HTML stránky. Pripojenie jquery sa vykonáva pomocou jazyka HTML pomocou značky „“. Musíte určiť umiestnenie, kde sa nachádza skript, a nastaviť jeho typ: $ (document).ready (function ()
Krok 2
Fragment textu uvedený v určitom odseku musí byť uzavretý v samostatnej vrstve - div, pomocou ktorej sa bude ovládať samotný spojler: Saša kráčala po diaľnici a nasávala sušenie.
Krok 3
Ďalej musíte vytvoriť pred všetkými prvkami s názvom spoil príslušné tlačidlá, ktoré text zbalia a rozšíria. Najskôr je samotný spojler skrytý pomocou štandardnej funkcie „hide ()“: $ („div [name = 'spoil']“). Hide (); Ďalej je potrebné vytvoriť text a obrázok pre všetky spojlery, ktoré sa použije ako pozadie pre tlačidlá: $ (“P [name = 'spoilbutton']“). Html („Zobraziť text“);
Krok 4
Nájdite všetky tlačidlá na stránke a skontrolujte nadpisy prvej úrovne pred tlačidlom. Za týmto účelom vytvorte podmienku, ktorá bude vyhľadávať značky h1 podľa názvu. Zadaný text nadpisu sa zalomí do samotného div: $ („p [name = 'spoilbutton']“). Každý (function () {If ($ (this).prev (this).get (0).tagName == “H1”) {Var NewSpoilButton = “” + $ (this).prev (this).html () +”Zobraziť text”; $ (this).prev (this).replaceWith (“”); $ (this).replaceWith (NewSpoilButton);}})
Krok 5
Ďalej musíte kliknutie zvládnuť kliknutím myši. Ak je zistené kliknutie, môže sa zobraziť: $ („div [name = 'spoilbutton']“). Kliknite (function () {If ($ (this).next (this).css („display“) = =”Blok”) {
Krok 6
Potom napíš dedičstvo. V rámci divu je text v odseku p, ktorého obsah je umiestnený v značke span: $ (this).children („p“). Children („span“). Html („Zobraziť text“); Zbaliť otvorený spojler. Ak nie je otvorený, rozbaľte text. Tento krok je založený na pravidle dedičnosti: $ (this).next (this).slideUp („normal“);} else {$ (this).children („p“). Children („span“). Html („Skryť text“); $ (this).next (this).slideDown („normal“);} return false; })
Krok 7
Potom sa zaznamená samotné kliknutie myši na tlačidlo, pomocou ktorého skript skryje a rozloží spojler. $ (“P [name = 'spoilbutton']”). Kliknite (function () {If ($ (this).next (this).css (“display”) = “block”) {$ (this).next (this).slideUp („normal“); $ (this).html („Hide“);} return false;}); Spoiler ready. Zobrazí sa, keď sa nájde zodpovedajúci blok DIV.
