Bok svima!
Prethodno sam vam pokazao kako izraditi spoiler za WordPress blog pomoću dodatka Advanced Spoiler, možete ga pročitati u ovom članku
Za početnike želim objasniti što je spojler na web mjestu i zašto je potreban. Spoiler je blok unutar kojeg je skriven tekst ili drugi sadržaj. Spoiler sadrži naslov, klikom na koji se otvara prethodno skriveni sadržaj, ovdje jasan primjer spojler ne radi na mom blogu:
Kliknite da vidite sadržaj spojlera
Čestitamo! Otvorio si spojler :)
Da biste lakše uočili informacije na stranici, osobito tamo gdje ih ima puno i trebaju biti prikladno strukturirani, upotrijebite spojler.
Budući da ćemo postaviti spojler izlaz na web mjesto bez dodatka, morat ćete urediti datoteke WordPress teme blog. Uštedjeti sigurnosna kopija datoteke prije uređivanja.
Sekvencijski rad:
Ovdje je dobra usluga usklađivanja boja - poveznica.
Ovo dovršava postavljanje spojlera. Sada u modu "Tekst" u administratorskoj ploči bloga dodajte ovaj kod:
Tekst naslova Tekst skriven pod spojlerom
Kako vam se sviđa ova implementacija prikazivanja spojlera na bilo kojoj stranici bloga? teško? Napišite svoje recenzije u komentarima.
Spoiler (od engleskog spoiler - "prekidač protoka") je tako zgodna stvar za skrivanje velike količine teksta ili drugog sadržaja na web stranici. Na primjer, film može biti objavljen na vašoj web stranici. Možete to učiniti Kratki opis i snimke zaslona, ali neće svi biti zainteresirani za te informacije - bolje ih je sakriti u spojleru. Ili popis objavljenih pjesama glazbeni album može se sakriti u spoileru... Pa, razumiješ. U ovom ću članku dati dio koda za implementaciju spojlera bez dodataka na bilo kojem motoru. A za WP će biti dodatni gadget.
Vašem obiman tekst ili neki drugi materijal (idemo naprijed, nazvat ću ga "skriveni sadržaj") dobro stane u spojler, trebat će ga formatirati ovako:
Vaš članak.. Ovo je skriveni sadržaj Nastavak vašeg članka.
“Skriveni tekst (kliknite za proširenje)” je naslov spojlera; kada se zatvori, samo će ovo biti vidljivo. Naravno, muka je svaki put pisati takav HTML. Osim toga, ovo je samo početak, a ne cijeli kod. Pričekaj malo - bit će zabavnije.
Bilo bi nam mnogo prikladnije koristiti kod poput ovog:
Ovo je skriveni sadržaj
I moguće je. Ako nemate WordPress, nadam se da dobro poznajete svoj motor i osnove programiranja, inače će vam integracija mog koda biti teška.
A sretni korisnici WP-a mogu sigurno dodati sljedeći kod u datoteku s temom function.php (nadam se da ćete to uzeti u obzir prilikom uređivanja WP datoteka):
Funkcija site_spoiler ($atts, $content) ( if (!isset($atts["title"])) $sp_title = "Skriveni tekst (kliknite za proširenje)"; else $sp_title = $atts["title"]; return " ".$sp_title." ".$content." "; } add_shortcode("spoiler", "сайт_spoiler"); !}
Sada možete koristiti kratki kod u svojim postovima. Ako nemate WP, ali želite koristiti kratki kod, ovaj PHP kod će vam pomoći:
$content = str_replace("", "Skriveni tekst (kliknite za proširenje)", $content); $sadržaj = str_replace("", "", $sadržaj);
Ali pogodite sami što je $content i gdje ga ubaciti, jer ne znam kakav motor imate.
I to nije sve. U predložak za prikaz stranica vašeg web mjesta (za WP je, na primjer, prikladan header.php), trebate umetnuti ovaj JS kod:
(function($)( var SBobj = ""; $(".spoiler-body").hide(); $(".spoiler-head").click(function())( $(this).toggleClass( " unfolded"); if ($(SBobj) == "none") $(SBobj); else $(SBobj) .hide(300); )) )(jQuery);
Ovo je motor našeg spojlera. Kao što vidite, za rad je potreban okvir jQuery JS (u WP-u se povezuje automatski). Međutim, ako odmah vidite skriveni sadržaj, ali se ništa ne događa kada kliknete na naslov spojlera, možda nemate omogućen jQuery. Onda pitaj pretraživač“kako spojiti jquery” ili dodajte ovaj kod prije gore opisanog koda:
I posljednji detalj je određivanje stilova spojlera. Korisnici WP-a uređuju datoteku style.css teme, dodajući joj sljedeće retke:
Spoiler-wrap ( background: #eee; border: 1px solid #aaa; border-radius: 5px; margin: 12px 6px; ) .spoiler-head ( padding: 2px 18px; cursor: pointer; background: url("images/spoiler) -icon1.png") no-repeat 3px 9px ) .unfolded ( background: url("images/spoiler-icon2.png") no-repeat 3px 9px ) .spoiler-body ( margin: 5px; display: none; )
Možete se lako organizirati skriveni blokovi sa sadržajem koji se otvara klikom.
Slažem se, ponekad je to bolje učiniti mali blok skriveni tekst s urednim natpisom koji se može kliknuti, sakriti ispod njega, na primjer: pravila komentiranja, html kod gumba ili bannera itd. Kome ovo stvarno treba kliknuti će na istaknuti natpis i vidjeti sve. Nema potrebe da određeni podaci budu stalno vidljivi svima.
Vjerojatno najviše poznati primjer koristeći skriveni tekst, to su dobro poznati “spoileri” na raznim forumima.
Skriveni tekst se može organizirati pomoću koristeći jQuery, i dalje čisti CSS, svaka tehnika ima i prednosti i nedostatke.
Danas želim demonstrirati vrlo mali javascript, uz pomoć kojeg je vrlo lako "sakriti ispod rezova" gotovo sve informacije na vašoj web stranici.
I tako, imamo neki tekst, moramo odabrati ili jednu riječ, pojam ili cijelu frazu i učiniti ih klikabilnim. Da biste to učinili, dovoljno je "priložiti" riječ (frazu) koja nam je potrebna oznakom, kao u primjeru, ili vezom pomoću oznake . Mnogi ljudi češće koriste oznaku , ovdje je i pokazivač registriran i odabir prema zadanim postavkama, ali mislim da je tako, zašto nam trebaju poveznice koje ne vode nikamo, a možete jednostavno "nacrtati" kursor i odabrati bilo koji element pomoću css-a. Dakle, unutar teksta koji sigurno koristimo:
| < span class = "tt" onclick= "view("t1"); return false" >tekst tekst tekst |
tekst tekst tekst
Ovdje je sve vrlo jednostavno, koristimo class="tt" da dizajniramo frazu (riječ) u css-u, gdje lebdimo kursorom, označavamo, podcrtavamo ako je potrebno itd., koristeći onclick="view("t1"); return false" Identifikatorom t1 vezani smo za izvršnu datoteku js i za blok sa sadržajem koji je trenutno skriven.
Ovisno o tome koliko ćete skrivenih blokova koristiti na jednoj stranici, potrebno je promijeniti id broj, tj. t1, t3, t3 i tako dalje...
Za skriveni tekst možete koristiti div spremnik ili, kao u primjeru, istu oznaku, glavna stvar je povezati ga s klasom s css-om i ne zaboravite ispravno navesti identifikator:
Kao što sam već spomenuo, za stvaranje našeg "spojlera", otvaranja i sakrivanja klikom, trebat će vam mali javascript postavljen izravno u tijelo stranice, po mogućnosti prije oznake:
| < script type= "text/javascript" >funkcija pogled(n) ( stil = dokument. getElementById(n) . stil; stil. prikaz = (stil. prikaz == "blok") ? "none" : "blok" ; ) |
funkcija view(n) ( style = document.getElementById(n).style; style.display = (style.display == "block") ? "none" : "block"; )
To je sve, samo trebate odlučiti što sakriti od očiju korisnika. Možete petljati s kodom izravno u mrežnom uređivaču, ali u principu, tamo se nema što petljati))).
Sretna Nova godina svima! Puno zdravlja, ostalo ćemo sami!
Sa svim poštovanjem, Andrew
Tražite običan spojler - jednostavan element HTML stranice koji bi se mogao otvoriti kada kliknete na njega, a zatvoriti kada kliknete na njega. Našao si!
1. Vrlo jednostavan JS+HTML spojler (1 put po stranici)
Ako trebate ugraditi kod u HTML stranicu koja ne koristi nikakve JavaScript datoteke, jednostavno kopirajte ovaj kod bilo gdje na traženoj stranici:
funkcija openSpoiler(elem) (
document.getElementById("spioler").style.display="blok";
document.getElementById("but_spo").style.display="none";
}
funkcija closeSpoiler(elem)
{
document.getElementById("spioler").style.display="none";
document.getElementById("but_spo").style.display="blok";
}
Ako imate pristup *.js datoteci koja je povezana sa traženom stranicom, kopirajte gornji kod u nju, bez oznake na početku i bez oznake na kraju.
123
Unesite podatke koji su vam potrebni umjesto 123.
Umjesto "Dodatne informacije" možete koristiti bilo koji izraz.
PRIMJER:
ona: zar se nećeš bojati voziti sa mnom kad dobijem dozvolu?
on: ne
Ona: Stvarno se ne bojiš?
on: da
ona: vau, barem si me podržao.))) Inače svi kažu da će biti strašno putovati sa mnom.
on: Samo se ne bojim smrti.
Također možete izmijeniti ovaj kod ako želite da se spojler otvara pri lebdenju mišem:
123
PRIMJER:
- Draga, nije mi dobro. - Popij malo otrova, stvorenje! - Što dovraga? Oo - Oh, krivo sam rekao. Pijte biljne čajeve.
2. CSS+HTML spojler (više puta po stranici)
Spojler
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eu sodales tortor, posuere mattis nunc. Integer eget sapien ullamcorper diam mollis laoreet. Praesent dignissim id urna at malesuada. Etiam id nisl vitae ante vestibulum volutpat.
Etiam congue, neque a commodo iaculis, nisl massa varius felis, eget commodo eros mauris vitae felis. Pellentesque sed nisi bibendum, faucibus lectus id, varius metus. Vestibulum lacinia vehicula justo, ut molestie magna tincidunt nec. Suspendisse sit amet sagittis enim.
Spojler
Una forma de esconder cierta información hasta que el usuario hace clic para visualizarla. Una forma de esconder cierta información hasta que el usuario hace clic para visualizarla.
Contenido normal intercalado sin spoiler
Ulazni(
prikaz: nijedan;
}
unos + oznaka (
prikaz: blok;
širina: 200px;
margina: 0 auto;
ispuna: 5px 20px;
pozadina: #e1a;
boja: #fff;
poravnanje teksta: središte;
veličina fonta: 24px;
rubni radijus: 8px;
kursor: pokazivač;
prijelaz: sve .6s;
}
unos:provjereno + oznaka (
boja: #333;
pozadina: #ccc;
}
unos ~ .spojler (
širina: 90%;
visina: 0;
preljev: skriven;
neprozirnost: 0;
margina: 10px auto 0;
ispuna: 10px;
pozadina: #eee;
rub: 1px puni #ccc;
rubni radijus: 8px;
prijelaz: sve .6s;
}
unos:provjereno + oznaka + .spojler(
visina: auto;
neprozirnost: 1;
ispuna: 10px;
}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eu sodales tortor, posuere mattis nunc. Integer eget sapien ullamcorper diam mollis laoreet. Praesent dignissim id urna at malesuada. Etiam id nisl vitae ante vestibulum volutpat.
Etiam congue, neque a commodo iaculis, nisl massa varius felis, eget commodo eros mauris vitae felis. Pellentesque sed nisi bibendum, faucibus lectus id, varius metus. Vestibulum lacinia vehicula justo, ut molestie magna tincidunt nec. Suspendisse sit amet sagittis enim.
Spojler 1
Una forma de esconder cierta información hasta que el usuario hace clic para visualizarla. Una forma de esconder cierta información hasta que el usuario hace clic para visualizarla.
Spojler 2
3. Spoiler JS (jQuery)+HTML (više puta po stranici)
Važno je poštovati broj elemenata zaglavlja i spremnika. Može se koristiti ugniježđeno poštujući HTML hijerarhiju
neka sp_content=$(".sp_content"),sp_title=$(".sp_title");
sp_content.hide();
sp_title.on("klik",funkcija())(
neka inx=$(".sp_title").indeks(ovo);
$(sp_content).slideToggle(100)
})
.sp_title(background:#ff002a;color:#fff;padding:7px 6px;margin-top:4px;-webkit-border-radius:3px;border-radius:3px;cursor:pointer)
.sp_content(background:#fff;color:#000;padding:6px 4px 4px 4px;-webkit-border-radius:3px;border-radius:3px;box-shadow:inset 0 0 0 1px #ccc)
Naslov spojlera
Sadržaj spojlera
Naslov spojlera 1
Sadržaj spojlera 1 
Naslov spojlera 2
Sadržaj spojlera 2 
4. Spoiler JS (jQuery)+HTML v2 (više puta po stranici)
Važno je poštovati broj elemenata zaglavlja i spremnika. Može se koristiti ugniježđeno poštujući HTML hijerarhiju
Knjižnica jQuery također mora biti dodana na stranicu:
Neka je sp_content2=$(".sp_content2"),sp_title2=$(".sp_title2");
sp_sadržaj2.sakrij();
sp_title2.on("klik",funkcija())(
neka inx=$(".sp_title2").indeks(ovo);
if($(sp_content2).css("display")==="none")(
$(sp_content2).slideUp(100);
$(sp_content2).slideDown(100);
)drugo(
$(sp_content2).slideUp(100);
}
})
.sp_title2(background:#0086ff;color:#fff;padding:7px 6px;margin-top:4px;-webkit-border-radius:3px;border-radius:3px;cursor:pointer)
.sp_content2(background:#fff;color:#000;padding:6px 4px 4px 4px;-webkit-border-radius:3px;border-radius:3px;box-shadow:inset 0 0 0 1px #ccc)
Naslov spojlera
Sadržaj spojlera
Naslov spojlera 1
Sadržaj spojlera 1
Naslov spojlera 2
Sadržaj spojlera 2
5. Spoiler JS (jQuery)+HTML. Gumbi (više puta po stranici)
Važno je poštovati broj elemenata zaglavlja i spremnika. Može se koristiti ugniježđeno poštujući HTML hijerarhiju
Knjižnica jQuery također mora biti dodana na stranicu:
Spojler 1 Spojler 2 Spojler 3
Spoiler 1 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci doloremque, exercitationem totam nostrum acceptantium illo quibusdam sunt fugit a consectetur libero ea minima velit eaque iure ut odit eum suscipit!
Spoiler 2 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aut suscipit distinctio debitis ea voluptates alias delectus quia voluptas vitae, nisi atque laudantium repudiandae deleniti, natus fugiat, quo, esse rem.
Spoiler 3 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, aperiam, itaque. Possimus, quas perspiciatis, illum acceptenda odit amet obcaecati corporis, dolores aperiam a illo repellendus sit, commodi repellat quam suscipit?
tijelo (
font: 16px/1.5em "Segoe UI", Arial, sans-serif;
pozadina: #bfb6a0;
boja: #fff;
širina: 60%;
margina: 20px auto;
}
.spoiler-link(
prikaz: inline-block;
tekst-ukras: nema;
boja: #fff;
pozadina: #b63333;
ispuna: 10px 25px;
rubni radijus: 3px;
tekst-sjena: 0 1px 0 #8c1111;
rub-bottom: 1px solid #8c1111;
-webkit-transition: svih 0,6s jednostavnost;
prijelaz: svih 0,6s lakoća;
}
.spoiler-link: lebdi (
pozadina: #8c1111;
}
.spoiler-link + .spoiler-link (
margin-lijevo: 5px;
}
.spojler-link--aktivan (
pozadina: #4f9c3d;
boja obruba: #2d751c;
tekst-sjena: 0 1px 0 #2d751c;
}
.spoiler-link--active:hover (
pozadina: #2d751c;
}
.spojler(
pozadina: #fff;
boja: #907c6b;
ispuna: 25px;
margin-top: 25px;
rubni radijus: 3px;
rub-bottom: 1px solid #999;
}
.spojler__naslov(
margin-top: 0;
težina slova: 200;
boja: #b63333;
}
$(funkcija())(
$(".spojler").sakrij();
$(".spoiler-link").on("klik", funkcija(e) (
var idSpoiler = $(this).attr("href"),
classSelect = "spoiler-link--active";
$(ovo).toggleClass(classSelect);
$(idSpoiler).slideToggle(200);
e.preventDefault();
});
});
