U procesu izrade web stranice ili bloga i daljnjeg popunjavanja sadržajem, iz različitih razloga, ponekad postane potrebno sakriti dio teksta, opsežnije informacije smjestiti u zasad skriveni blok, ali ipak naznačiti korisniku ono što je dostupno nešto drugo i dajte mu priliku da vidi skriveni sadržaj bez prelaska na sljedeći redak ili stranicu.
Prethodno se za implementaciju takvog rješenja koristila hrpa javascripta, ali sada se sve to može učiniti vrlo jednostavno pomoću nevjerojatnih svojstava.

Danas ćemo pogledati najjednostavniji način stvaranja skrivenih blokova sadržaja na stranicama web mjesta iu pojedinačnim porukama koje se otvaraju kada kliknete na određeni element teksta, koristeći isključivo CSS3 svojstva. Prekidač može biti jedna riječ, istaknuti izraz, cijela rečenica ili informativna ikona.
Takvi se blokovi često koriste na stranicama s velikom količinom sadržaja, kako bi ga učinili strukturiranijim i kompaktnijim, sav sadržaj je podijeljen u takozvane grupe, u kojima su samo naslovi prikazani korisniku, sav tekst je prema zadanim postavkama skriven i može se vidjeti klikom na određeni element (vidi gore).

Pokušajmo učiniti bez nepotrebne vode, pogledajte cijeli ovaj jednostavan mehanizam na djelu, s jasnim primjerom, a možete i urediti nešto ako želite:

Primjer br. 1

Neoznačeni i neoznačeni tekst se koristi kao prekidači za padajuće blokove s dodatnim informacijama, s nedvosmislenim pozivom da kliknete na njega, što morate učiniti bez straha ili sumnje vidjeti)))

Kao što vidite, sve radi više nego savršeno, skriveni sadržaj se bez problema pojavljuje i nestaje laganim klikom miša, a pritom smo upotrijebili minimalno izvršnog koda, kako u html frameworku tako iu formaciji css stilova. Bez povezivanja dodatnih javascript biblioteka, uz vječitu brigu hoće li one biti onemogućene na strani korisnika.
Implementacija svih ovih radnji postala je moguća zahvaljujući CSS3 pseudo-klasi :provjereno, primijenjen na elemente sučelja kao što su radio gumbi (). Što smo zapravo napravili u oznaci Atributu tipa dodijelili smo potvrdni okvir vrijednosti, kao i identifikator id="hd-1" koji odgovara jedinstvenom identifikatoru za = "hd-1" trenutni blok prekidač. Potvrdne okvire ćemo temeljito i zauvijek sakriti postavljanjem svojstva display: none u klasi.hide.
Zapravo, ovdje se nema što posebno objašnjavati; cijeli mehanizam za uključivanje i isključivanje skrivenih blokova sastoji se od tri elementa:

• Potvrdni okvir - oznaka sa značenjem potvrdni okvir atribut tip i s određenim identifikatorom povezivanja
• Naslov (zamjena teksta) - oznaka s jedinstvenom vrijednošću identifikatora za atribut za, (identifikator mora biti isti kao identifikator oznake ulazni sa značenjem potvrdni okvir atribut tip).
• Blok sadržaja je div tag, koji će do boljih vremena, dok korisnik ne klikne, sadržavati razne skrivene sadržaje (tekst, slike, itd., itd.)

Nadam se da je iz mog kaotičnog objašnjenja postalo jasno u čemu je stvar. CSS primjenjuje nove stilove (pomoću pseudoklase provjereno) za prikaz bloka sadržaja koji je prethodno bio skriven samo kada korisnik klikne na element koji je jedinstvenim identifikatorom povezan s potvrdnim okvirom.

Iz svega ovoga proizlazi važna nota:

Kada koristite više skrivenih blokova na istoj stranici, svaki radio gumb mora imati jedinstveni ID koji će se razlikovati od ID-ova u drugim blokovima.

Dakle, riječima smo razvrstali što kamo ide i zašto, sada pogledajmo html okvir cijele strukture:

< input class = "hide" id= "hd-1" type= "checkbox" > < label for = "hd-1" >Kliknite ovdje za otvaranje! < div>Skriveni sadržaj..... < input class = "hide" id= "hd-2" type= "checkbox" > < label for = "hd-2" >Kliknite ovdje da biste pročitali više! < div>Skriveni sadržaj...

Kliknite ovdje za otvaranje!

Kliknite ovdje da biste pročitali više!

Zatim prelazimo izravno na formiranje CSS stilova, bez kojih ovaj cijeli dizajn neće funkcionirati. Sasvim minimum koda, bez ikakvih ukrasa, samo je blago istaknutu pozadinu za padajući blok koji možete definirati i prikazati okvir skrivenog teksta. Možete dizajnirati blokove kako želite, dodati obrube, zaobljene kutove, istaknuti tekst ili .

1.CSS

. sakriti, . sakrij + oznaka ~ div ( prikaz: ništa; ) /* vrsta teksta oznake */. sakriti + oznaka, . sakrij: označeno + oznaka ( padding: 0; boja: zelena; pokazivač: pokazivač; obrub-dolje: 1px isprekidana zelena;) . hide: checked + label + div ( display: block; background: #efefef; - moz- box- shadow: inset 3px 3px 10px #7d8e8f; - webkit- box- shadow: inset 3px 3px 10px #7d8e8f; box- shadow: inset 3px 3px 10px #7d8e8f; ispuna: 10px; )

/* sakrij potvrdne okvire i blokove sadržaja */ .hide, .hide + label ~ div ( display: none; ) /* izgled teksta oznake */ .hide + label, .hide:checked + label ( padding: 0; boja: zelena ; pokazivač: pokazivač; border-bottom: 1px isprekidano zeleno; ) /* izgled teksta oznake kada je prekidač aktivan */ .hide: označeno + oznaka (boja: crvena; border-bottom: 0; ) /* kada je potvrdni okvir je aktivan, prikaži blokove sa sadržajem */ .hide:checked + label + div ( display: block; background: #efefef; -moz-box-shadow: inset 3px 3px 10px #7d8e8f; -webkit-box-shadow: inset 3px 3px 10px #7d8e8f; okvir-sjena: umetnuti 3px 3px 10px #7d8e8f; ispuna: 10px; )

Sve je to, za asketski primjer, sasvim dovoljan minimum. Ali mi uopće nećemo biti mi ako ne dodamo barem neke dobrote, a bolje je vizualno reći korisniku gdje kliknuti.
U drugom primjeru dodao sam jednostavan simbol u obliku plusa koji jasno pokazuje da se ovdje krije još nešto, pritiskom istog trena prelazi u minus, a skrivenim blokovima sa sadržajem sam dodao malu animaciju kada pojavljuju se, a sve to isključivo uz pomoć magije CSS3.

2.CSS

/* sakrij potvrdne okvire i blokove sadržaja */. sakriti, . sakrij + oznaka ~ div ( prikaz: ništa; ) /* vrsta teksta oznake */. sakrij + oznaka ( margina: 0; padding: 0; boja: zelena; pokazivač: pokazivač; prikaz: inline- block; ) /* izgled teksta oznake kada je prekidač aktivan */. sakrij: označeno + oznaka ( boja: crvena; obrub- dno: 0 ; ) /* kada je potvrdni okvir aktivan, prikaži blokove sa sadržajem */. hide: checked + label + div ( display: block; background: #efefef; - moz- box- shadow: inset 3px 3px 10px #7d8e8f; - webkit- box- shadow: inset 3px 3px 10px #7d8e8f; box- shadow: inset 3px 3px 10px #7d8e8f;margin-left: 20px;padding: 10px; /* mala animacija prilikom pojavljivanja */- webkit- animacija: lakoća blijeđenja - za 0,5 s; - moz- animacija: fade ease- za 0,5s; animacija: lagano blijeđenje - za 0,5 s; ) /* animacija kada se pojave skriveni blokovi */@- moz- ključni okviri blijede (od ( neprozirnost: 0 ; ) do ( neprozirnost: 1 ) ) @- webkit- ključni okviri blijede ( od ( neprozirnost: 0 ; ) do ( neprozirnost: 1 ) ) @ ključni okviri blijede ( od ( neprozirnost: 0 ; ) do ( neprozirnost: 1 ) ). sakrij + oznaka: prije ( boja pozadine: #1e90ff; boja: #fff; sadržaj: " \002 B"; prikaz: blok; plovak: lijevo; veličina fonta: 14px; font-weight: bold; visina: 16px; line-height: 16px; margina: 3px 5px; poravnanje teksta: sredina; širina: 16px; - webkit- granica- radijus: 50%; - moz- granica- radijus: 50%; rubni radijus: 50%; ) . sakrij: označeno + oznaka: prije ( sadržaj: " \221 2" ; }

/* sakrij potvrdne okvire i blokove sadržaja */ .hide, .hide + label ~ div ( display: none; ) /* izgled teksta oznake */ .hide + label ( margina: 0; padding: 0; boja: zelena; kursor: pointer; display: inline-block; ) /* izgled teksta oznake kada je prekidač aktivan */ .hide:checked + label (boja: crvena; border-bottom: 0; ) /* kada je potvrdni okvir aktivan, prikaži blokovi sa sadržajem */ . hide:checked + label + div ( display: block; background: #efefef; -moz-box-shadow: inset 3px 3px 10px #7d8e8f; -webkit-box-shadow: inset 3px 3px 10px #7d8e8f ; box-shadow: inset 3px 3px 10px #7d8e8f; margin-left: 20px; padding: 10px; /* mala animacija kada se pojavi */ -webkit-animation:fade ease-in 0,5s; -moz-animation:fade ease -in 0.5s; animacija: fade ease-in 0.5s; ) /* animacija kada se pojave skriveni blokovi */ @-moz-keyframes blijede ( od ( neprozirnost: 0; ) do ( neprozirnost: 1 ) ) @-webkit-keyframes fade ( from ( neprozirnost: 0 ; ) to ( neprozirnost: 1 ) ) @keyframes fade ( from ( neprozirnost: 0; ) to ( neprozirnost: 1 ) ) .hide + label:before ( background-color: #1e90ff; boja: #fff; sadržaj: "\002B"; prikaz: blok; plovak: lijevo; veličina fonta: 14px; font-weight: bold; visina: 16px; line-height: 16px; margina: 3px 5px; poravnanje teksta: središte; širina: 16px; -webkit-border-radius: 50%; -moz-border-radius: 50%; rubni radijus: 50%; ) .hide:checked + label:before ( sadržaj: "\2212"; )

Po svemu sudeći, metoda je nedvojbeno dobra, ali kao i uvijek, i nimalo iznenađujuće, problemi nastaju s vječnom kočnicom napretka, IE preglednikom, pseudoklasom provjereno podržava samo verzije 9 i novije ovog preglednika. Za starije verzije IE-a sve ostaje isto, morat ćete koristiti javascript.

Koristeći skrivene potvrdne okvire, možete jednostavno implementirati stilizirane blokove, klizače, galerije i još mnogo toga.

Sa svim poštovanjem, Andrew

Opis

HTML oznaka koristi se za izradu padajućeg (padajućeg) popisa koji se pojavljuje kada se klikne na element obrasca i omogućuje posjetitelju stranice odabir jedne od unaprijed definiranih opcija.

Element

može sadržavati dvije ili više oznaka , definirajući dostupne odabire na padajućem popisu. Tekst prvog podređenog elementa početno će se prikazati na padajućem popisu, odnosno to će biti zadana vrijednost za popis. Promijenite ili postavite zadanu vrijednost za Odabrani atribut možete dodati željenoj opciji:

Volvo Saab VW Audi

Širina padajućeg izbornika bit će određena najdužim tekstom navedenim u oznaci .

Atributi

autofokus: Određuje da element treba automatski dobiti fokus kada se web stranica učita. Moguće vrijednosti za Boolean atribut autofokusa: Primjer "

Napomena: atribut autofokusa nije podržan u IE9 i ranijim verzijama te Firefoxu.

Onemogućeno: označava da je element neaktivan, što znači da korisnik neće moći komunicirati s elementom. Moguće vrijednosti za onemogućen Boolean atribut:

Primjer » obrazac: Definira obrazac s kojim je element povezan. Vrijednost atributa je identifikator elementa

. Ovaj atribut omogućuje postavljanje elementa na bilo kojem mjestu u dokumentu, a ne samo kao potomak elementa .

Napomena: atribut obrasca nije podržan u Firefoxu.

Više: Označava da se više opcija može odabrati odjednom. Nekoliko opcija razlikuje se ovisno o operativnom sustavu:

• Windows: Držite pritisnutu tipku CTRL za odabir više opcija.
• Mac: Držite pritisnutu tipku CMD za odabir više opcija.

Moguće vrijednosti za višestruki logički atribut: Primjer "

Napomena: Zbog različitih načina na koje se može odabrati više stavki i dodatne obavijesti korisnicima da je višestruki odabir dostupan, preporučuje se korištenje potvrdnih okvira umjesto padajućeg popisa.

Naziv: Definira naziv za padajući popis. Može se koristiti za pristup podacima obrasca nakon što su poslani ili za referenciranje elementa u JavaScriptu. veličina: Određuje broj vidljivih opcija na padajućem popisu. Ako je vrijednost atributa veličine veća od 1, ali manja od ukupnog broja opcija na popisu, preglednik će automatski dodati traku za pomicanje koja označava da postoji više opcija za pregled.

HTML oznake koje definiraju HTML forme na stranici

Izrađujemo web stranice i pojedinačne stranice na internetu za komunikaciju s posjetiteljima.

HTML obrasci koriste se za registraciju posjetitelja na stranici, za interaktivne ankete i glasovanje, omogućuju vam slanje poruka, kupnju i tako dalje. HTML Obrazac je kreiran s jednom svrhom: prikupljanje i naknadni prijenos informacija za obradu softverskom skriptom ili putem e-pošte.

Primjer HTML obrasca | Unesite stranicu

Oznake, atributi i vrijednosti

- odrediti oblik.
• name="" - definira naziv forme.
• method="" - definira način slanja podataka iz forme. Vrijednosti: "get" (zadano) i "post" . Metoda "post" često se koristi jer omogućuje prijenos velikih količina podataka.
• action="" - definira url na koji se podaci šalju na obradu. U našem slučaju - enter_data.php ..
• - definirati elemente obrasca kao što su gumbi, prekidači, tekstualna polja za unos podataka.
• type="text" - definira tekstualno polje za unos podataka.
• type="password" - definira polje za unos lozinke, pri čemu se tekst prikazuje u obliku zvjezdica ili kružića.
• type="checkbox" - definira radio gumb.
• type="hidden" - definira skriveni element obrasca - koristi se za prijenos dodatnih informacija na poslužitelj.
• size="25" - duljina tekstualnog polja u znakovima.
• maxlength="30" - najveći dopušteni broj unesenih znakova.
• value="" - definira vrijednost koja će se poslati na obradu ako se odnosi na radio gumbe ili prekidače. Vrijednost ovog atributa kao dijela tekstualnog polja ili gumba bit će prikazana kao, na primjer, Vasya ili Login u gornjem primjeru.

Primjer HTML obrasca | Komentari na stranici

Ime pošta

Oznake, atributi i vrijednosti

• action="http://site/comments.php" - definira url na koji će se slati podaci iz forme.
• id="" - definira naziv i identifikator elementa forme.
• name="" - definira naziv elementa forme.
• - definirati tekstualno polje kao dio obrasca.
• cols="" - određuje broj stupaca tekstualnog polja obrasca.
• rows="" - definira broj redaka tekstualnog polja forme.

Ako između mjesto teksta, on će biti prikazan unutar polja kao primjer koji se može lako ukloniti.

Primjer HTML obrasca | Padajući popis

Prva pozicija Druga pozicija Treća pozicija Četvrta pozicija

Oznake, atributi i vrijednosti

• - definirajte popis s pozicijama za odabir.
• size="" - određuje broj vidljivih pozicija na listi. Ako je vrijednost 1, imamo posla s padajućim popisom.
• - odrediti pozicije (stavke) liste.
• value="" - sadrži vrijednost koju će formular poslati na navedeni url na obradu.
• selected="selected" - ističe stavku popisa kao primjer.

Primjer HTML obrasca | Popis s trakom za pomicanje

Povećanjem vrijednosti atributa size="" dobivamo popis s trakom za pomicanje:

Prva pozicija Druga pozicija Treća pozicija Četvrta pozicija

Prva pozicija Druga pozicija Treća pozicija Četvrta pozicija

Za ovu opciju koristite oznaku multiple="multiple", koja omogućuje odabir više pozicija. Njegov nedostatak omogućuje odabir samo jedne stavke.

type="submit" - definira gumb.

type="reset" - definira gumb za resetiranje.

value="" - definira oznaku na gumbu.

Pogledajte dodatno:

Opis

Označiti omogućuje vam stvaranje elementa sučelja u obliku padajućeg popisa, kao i popisa s jednim ili višestrukim odabirom, kao što je prikazano u nastavku. Konačni izgled ovisi o korištenju atributa veličine oznake koji postavlja visinu liste. Širina popisa određena je najširim tekstom navedenim u oznaci , a može se mijenjati i pomoću stilova. Svaka stavka kreirana je pomoću oznake , koji bi trebao biti ugniježđen u spremnik . Ako planirate poslati podatke popisa na poslužitelj, tada morate postaviti element unutar forme. Ovo je također potrebno kada se podacima popisa pristupa putem skripti.

Sintaksa

Stavak 1 Točka 2

Atributi

Omogućuje vam da skočite na popis pomoću neke tipkovničke prečice. Postavlja fokus na popis nakon učitavanja stranice. Blokira pristup i izmjenu elementa. Povezuje popis s obrascem. Omogućuje odabir više stavki popisa odjednom. Naziv elementa koji će se poslati poslužitelju ili kojem će se pristupiti putem skripti. Popis je potrebno odabrati prije slanja obrasca. Broj redaka popisa za prikaz. Definira redoslijed prijelaza između elemenata kada se pritisne tipka Tab

Završna oznaka

Potreban.

HTML5 IE Cr Op Sa Fx

Odaberite heroja Čeburaška Krokodil Gena Shapoklyak Štakor Larisa

Oznaka HTML opcija koristi se za stvaranje padajućeg popisa koji korisniku omogućuje odabir jedne opcije iz unaprijed definiranog skupa vrijednosti.

Tekst vidljiv korisniku može se razlikovati od teksta navedenog u atributu vrijednosti. Evo kako izraditi padajući popis:

zelena Žuta boja Crno

• Padajući popis kreira se pomoću oznake ;
  Unutar oznake
  opcije za odabir definirane su pomoću oznake ;
• U oznaci možete koristiti atribut vrijednosti za pristup odabranoj opciji koristeći PHP, JS, Jquery itd.

Također je moguće navesti CSS klasu umjesto upotrebe ID-a za stiliziranje padajućeg popisa.

U sljedećem odjeljku pokazat ću primjere korištenja HTML padajućeg popisa u JavaScript/JQueryju. Primjeri će također pokazati kako postaviti stilove koristeći CSS/CSS3 i Bootstrap okvir.

Primjer stvaranja jednostavnog padajućeg popisa

Ovaj primjer koristi opciju odabira HTML-a za stvaranje padajućeg popisa s tri opcije za odabir:

Gornji primjer koristi sljedeće oznake za izradu padajućeg popisa:

5 10 15 20 25

Korištenje atributa value

Kao što je ranije spomenuto, vrijednost atributa vrijednosti može se razlikovati od teksta prikazanog na stranici. Na primjer, možete prikazati nazive zemalja ili boje za korisnike i koristiti kratke kodove u atributu vrijednosti.

U sljedećem primjeru stvorit ćemo padajući popis s atributom vrijednosti:

Pogledajte online demo i kod

Za oznaku Koristi se sljedeći kod:

Kesten zelena Žuta boja Plava Crvena

Primjer pristupa odabranoj opciji u JavaScriptu

Kreirajmo sada primjer pristupa vrijednosti odabrane opcije i izvođenja nekih radnji. Stvaramo isti popis kao u gornjem primjeru s opcijama boja. Nakon što odaberete, kliknite gumb da biste primijenili tu boju na dokument:

Pogledajte online demo i kod

Za vrijednost opcije HTML koristi se sljedeći kod:

Kesten zelena Žuta boja Plava Crvena ostalo

Sljedeći redak koda koristi se u JavaScriptu za pristup vrijednosti atributa vrijednosti opcije :

var seltheme = document.getElementById(“selcolor”).value;

Kada se klikne na gumb, poziva se JS funkcija koja varijabli dodjeljuje vrijednost odabranu na padajućem popisu. Ova se vrijednost koristi za primjenu boje na trenutni dokument.

Pristup vidljivom tekstu u JQueryju

Ovaj put ću koristiti JQuery za pristup vrijednosti odabrane opcije: i tekstu i vrijednosti. U ovoj demonstraciji pristupit ću vidljivom tekstu u oznaci opcije u HTML-u:

Pogledajte online demo i kod

U kodu za svaku opciju u oznaci

značenje je drugačije od teksta. Nakon što odaberete boju, jQuery prikazuje vidljivi tekst u upozorenju. Šifra oznake Sljedeći:

Kesten zelena Žuta boja Plava Crvena

Evo kako pristupiti ovoj vrijednosti HTML odabir opcije odabran JavaScript:

var selectedcolor = $("#jqueryselect option:selected").text();

Također možete pristupiti vrijednosti koristeći JQuery $.val() metodu:

var selectedcolor = $("#jqueryselect").val();

Zamijenite ovaj redak u gornjem primjeru i kod će prikazati vrijednost kratkog koda/boje u atributu vrijednosti umjesto vidljivog teksta.

Primjer dobivanja vrijednosti u PHP skripti

U ovom primjeru dobivanja vrijednosti opcije odabrane s padajućeg popisa, obrazac se stvara pomoću oznake u odjeljku označavanja. Nakon odabira boje s padajućeg popisa kliknite na gumb "Pošalji". Podaci obrasca bit će proslijeđeni u istu PHP datoteku, nakon čega će se prikazati odabrana boja:

Pogledajte online demo i kod

Metoda obrasca korištena u primjeru je POST, tako da možete dobiti vrijednosti obrasca koristeći PHP $_POST[“”] polje. Ovo je kod obrasca korišten u primjeru:

Odaberite boju:

Kesten zelena Žuta boja Plava Crvena