Checkbox html: primeri lepih gumbov na čisti CSS, ustvarjanje "harmonika", pridobivanje podatkov obrazcev s pomočjo PHP in jQuery

01.02.2019 Category: Računalniki Author: admin

Možnosti za uporabo potrditvenega polja za vnos html so zelo velike, vendar se ta element najpogosteje uporablja v oblikah prenosa podatkov. Vendar pa je sposoben opraviti veliko več "trikov" kot pridobivanje vrednosti obrazcev. To je priročno, da ga uporabite za ustvarjanje različnih "harmonike" na čisti CSS.

Enostavna čista harmonika

HTML:

Točka 1 




]


Točka 3

CSS:

oznaka [za ^ = harmonika "]: hover ~ oznaka [za ^ =" harmonika "] {
 motnost: 0,8;
text-shadow: 1px 1px 2px trenutna barva; 
}

V tem primeru, ko se premaknete na oznako na nalepki (»odstavek 1«), se slogi prenesejo na vse druge oznake, ki so spodaj (bratje in sestre, iz angleščine - bratje in sestre) . Za prenos lastnosti na brate in sestre uporabite znak "~" za prenos stilov samo na določene nalepke in ne na vse brate in sestre na strani. Znak "^" označuje "se začne z", v primeru "za vnos id =" harmonika "- (za), ki se začne z besedo" harmonika ":

Posledica tega je, da se pri premikanju kazalca na nalepko spremeni slog spodnjih oznak.

Oznake so zelo koristne, ker je na zaslonih mobilnih telefonov zelo težko klikniti na potrditveno polje html v majhni škatli, razširijo območje, ki je na voljo uporabniku, da izbere želeni odgovor. Poleg tega lahko zahvaljujoč oznaki popolnoma odstranite kvadrate z zaslona:

vhod [id ^ = "harmonika"] {
 položaj: absolutno;
levo: -9999px; 
}

Dodate lahko tudi kazalec: kazalec, da bodo obiskovalci lahko razumeli spletno mesto,da so točke "klikni":

oznaka [za ^ = "harmonika"]: hover {
 kazalec: kazalec; 
}

Posledica tega je, da se pri premikanju kazalke nad besedilom (npr. "Postavka 1"), kazalec "ročno" namesto puščice. Dodatnim stilom CSS lahko dodate še več harmoniko.

CSS "Stunts" se ne konča. Skrito besedilo bomo dodali naši "harmoniki".

Točka 1

Besedilo 1.




Odstavek 2

Besedilo 2.



Točka 3

3.

Slogi za skrito besedilo:

[id ^ = "harmonika-box -"] {
 overflow: hidden;
max-višina: 0; 
}

Da bi dobili besedilo s klikom na oznako, dodajte max-height: 100% v slogu:

input [id ^ = "harmonika" ]: checked + [id ^ = "harmonika-box -"] {
 max-height: 100%; 
}

Postopek se začne, ko uporabnik klikne na oznako, izbrano potrditveno polje html (vhod: označeno), nato preide z znakom "+" (kar pomeni "samo prvi brat, ki je spodaj") lastnost max-height: 100% dne

z besedilom.

Ko izberete ustrezno postavko, se prikaže besedilo.

HTML:

Odstavek 1

Besedilo 1. 

96) 
Točka 2

Besedilo 2.



Točka 3 
)
Besedilo 3.

CSS:

oznaka [za ^ = "harmonika"] {
 velikost pisave: 20px; 
}
oznaka [za ^ = "harmonika"]: hover {
 kazalec: kazalec;
barva: rdeča;
besedilna senca: 1px 1px 2px trenutna barva; 
}
oznaka [za ^ = "harmonika"]: hover ~ oznaka [za ^ = "harmonika"] {
 motnost: 0,8;
text-shadow: 1px 1px 2px trenutna barva; 
}
vhod [id ^ = "harmonika"]: označeno + [id ^ = "harmonika-box -"] {
 max-height: 100%;
rob: 10px; 
}
vnos [id ^ = "harmonika"] {
 položaj: absolutno;
levo: -9999px; 
}
[id ^ = "harmonika-box -"] {
 overflow: hidden; 
max-višina: 0; 
}

Pridobivanje in obdelava vrednosti s pomočjo PHP

Razmislite na primer primere kontrolnega polja html v oblikah, kjer je možno dobiti tudi vrednost (value = "my_value").

Vrednost zapišemo v vrednost operaterja = "".


HTML 


CSS 


javascript 


jQuery 


]


MySQL 


Ajax


)

Pri pošiljanju obrazca bo polje $ _POST vsebovalo polje ime = "" v matriki in vrednost value = "".

Če je bilo normalno polje, je bilo videti takole:

$ post = array ("name" => gt; vrednost);
"$ css_name" = & gt;

ali

$ post = array (
 "HTML_name" = & gt; HTML; CSS,
javascript_name = & gt; javascript,
jQuery_name = & gt; jQuery,
PHP_name = & gt; PHP,
ajax_name = & gt; Ajax, 
);

Pretvorite niz nizov $ _POST z uporabo funkcije implode PHP () in dodelite vrednost $ _POST ["ajax_name"] s spremembo $ ajax. Značilno je, da za vse vrednosti $ _POST ustvarjamo spremenljivke, vendar jih bomo na primer zapisali le tako, da kode ne bomo preobremenili s presežnimi informacijami. Prav tako morate preveriti varnost vhodnih podatkov $ _POST, vendar tega ne bomo naredili tukaj, veliko je napisano v drugih člankih.

Moje spretnosti: ".implode (',', $ _POST);
če (isset ($ _POST [" ajax "])) {
$ ajax = $ _POST [
}
če (isset ($ ajax)) {
echo "

Nastavljena je spremenljivka $ ajax ;;
}
echo"

"
 var_dump ($ _ POST);
echo"

Sprejemanje ključev in vrednosti obrazcev z uporabo jQuery

Za pridobitev vrednosti iz obrazca brez ponovnega nalaganja strani,uporabljajte skripte javascript ali jQuery):

$ (document) .ready (funkcija () {
 $ ("input.my-class"). on ("klik", funkcija (e } {{219}} {{219}} {{219}} {{219}} {{219}} { )
$ ("# log") Html ("izbrano:" + val.join (",") + "
 
"); 
}); 
}) ;

Ustvarimo matriko:

var val = [];

Nato bo vsaka (izbrana) postavka ("input: checked") z uporabo push funkcije zapisala v val () polje:

$ ("input: checked") (funkcija () {
 val.push ($ (this) .val ()); 
});

Vsebina matrike val () bo prikazana na strani, za katero bomo dodali predmet html

jQuery: 240]

$ ("# log") Html ("izbrano:" + val.join (",") + "
 
");

Ugotovite, ali je bil izbran kvadratek html, lahko uporabite .is (": označeno"). Prop ("označeno").

Dobimo vrednost (val) vsake zastave in jo pošljemo preko opozorila ():

če ($ (this) .is (': checked')) alert ($ (to) .val ());

Isto, kar počnemo za id (id) s .prop ("označeno"):

if ($ (this) .prop ("označeno") )) alert ($ (this) .attr ("id"));

Izhod tipk in vrednosti prek opozorila () je samo za primer, niso potrebni za opravilo, zato jih je treba odstraniti iz kode.

Gumb za pošiljanje obrazca bomo onemogočili ("onemogočeno"), če ni izbrano nobeno potrditveno polje:

) ("# submitButton"). prop ("onemogočeno",! $ (this) .prop ("označeno"));

Upoštevajte, da debelo črevo: .is (": checked") deluje pravilno z dvopičjem, in .prop ("označeno") deluje brez dvopičja!

Dodamo priložnost, da takoj označimo vse točke.

Izberi vse

če ($ ("# checkAll") prop ("check") ))$ ('input.my-class'). ne (this) .prop ('checked', this.checked);

Vsa koda.

HTML:

Potrebne spretnosti: 


Izberi vse 
283)



CSS



 

jQuery


PHP









Ajax

jQuery:

$ (document) .ready (funkcija () {
 $ ("input.my-class"). "klik", funkcija (e) {
 lahko val = [];
if ($ (this) .is (': checked')) alert ($ (this) .val ());
() ($ (this) .prop ('checked')) alert ($ (this) .attr ("id"));
$ ('# submitButton'). To (označeno)); (proxy ("označeno"));
if ($ ("# checkAll"). Prop ("označeno")) $ ('input.my-class'). Not (this) .prop ('
$ ("input: checked"). (funkcija () {
 val.push ($ (this) .val ()); 
}) 335) če ($ ("# checkAll") prop ("označeno")) {
 $ ("# log"). Html ("izbrano: ALL

"); 
} else {{340} $ ("# log"). html ("Izbrano:" + val.join (",") + "
 
"); 
} 
}) 
});

PHP:

če (isset ($ _ POST ["ALL"])) {
 echo "Moje znanje: vse našteto"; 
} else {
 echo "

Moje spretnosti:" .implode (',', $ _POST); 
}
if (isset ($ _POST ["ajax"]))) {
 $ ajax = $ _POST ["ajax"]; 
}
if (isset ($ ajax)) {
 echo '

Spremenljivka $ ajax set "; 
}
echo";
var_dump ($ _ POST);
odmev "
";

Dekoriranje gumbov na čisti CSS

Za izdelavo gumbov v skladu z zasnovo spletne strani bomo uporabljali samo CSS. Skrij prvotni kvadrat z lastnostmi z-indeksa in motnosti, v tem primeru se kvadrati ne premaknejo od zaslona, ampak preprosto postanejo pregledni (motnost: 0).

CSS:

položaj: absolutno;
z-indeks: -1;
motnost: 0;
rob: 10px 0020px;

Na istem mestu prikazujemo gumbe z lastno zasnovo.

Vhodna oznaka je lahko pred nalepko z oznako, nato pa uporabite prvi primer oblikovanja gumbov:

.my-class {
 položaj: absolutno;
z-indeks: -1;
motnost: 0;
rob: 10px 0020px; 
}
.my-razred + oznaka {
 položaj: relativna;
oblazinjenje: 000 60px;
kazalec: kazalec;
položaj: absolutno;
zgoraj: -4px;
levo: 0;
širina:
višina: 26px;
obrobni polmer: 13px;
ozadje: # CDD1DA;
box-shadow: vstavek 0 2px 3px rgba (000.2);
prehod: 1.2 s; 
}
oznaka .my-razred + po vsebini {
: ";
položaj: absolutno;
vrh: -2px;
levo: 2px;
širina: 22px;
višina: 22px;
meji: 10 px;
ozadje: #FFF;
senca: 2px 0 5px rgba (000.3);
prehod: .2s; 
}
.my-class: označeno + oznaka: pred {
 ozadjem: # 87CEFA;
-webkit-animacija: blackblur 2s 015 s 1 nadomestni;

}
.my-razred: preverjeno + oznaka: po {
 levo: 26px;

}
.my-class: focus + label: pred {
 box-shadow: inset 0 2px 3px rgba (000.2), 000 3px rgba (206250135.7); 
}


@ -webkit-keyframes blackblur {
 od {box-shadow: 0072px black; barva: transparentna;}
do {box-shadow: 0; barva: črna;} 
}

Če je vnos znotraj oznake etikete, potem vnesite besedilo potrditvenega polja v div z razredom "besedilo". Slogi se prenašajo iz vhoda: preveri se na div z razredom "besedilo" v drugem primeru:

.label input {
 položaj: absolutno;
z-indeks: -1;
motnost: 0;
rob: 10px 0020px; 
}
.text {
 položaj: relativni;
oblazinjenje: 000 60px;
kazalec: kazalec;
levo: 0;
širina: 50px;


obrobni polmer: 13px;
ozadje: # CDD1DA;
box-shadow: inset 0 2px 3px rgba (000.2);
prehod: .2s; 
}
.tekst: po vsebini {
: ";
položaj: absolutno;
vrh: -2px;
levo: 2px;
širina: 22px;
višina: 22px;
meji: 10 px;
ozadje: #FFF;
polje-senca: 2px 0 5px rgba (000.3);
prehod: .2s; 
}
.label input: checked + .text: pred {
 ozadjem: # 87CEFA;
-webkit-animacija: blackblur 2s 015 s 1 nadomestni; 
}
 .label input: checked + .text: po {
 levo: 26px; 
}
.label input: focus + .text: pred {
 box-shadow: inset 0 2px 3px rgba (000.2), 000 3px rgba (206250135.7); 
}
@ -webkit-keyframes blackblur {
 iz {box-shadow: 0072px black; barva: transparentna;}
do {box-shadow: 0;

 


Izberite vse 






HTML

CSS

Checkbox html: primeri lepih gumbov na čisti CSS, ustvarjanje "harmonika", pridobivanje podatkov obrazcev s pomočjo PHP in jQuery

Enostavna čista harmonika

Pridobivanje in obdelava vrednosti s pomočjo PHP

Sprejemanje ključev in vrednosti obrazcev z uporabo jQuery

Dekoriranje gumbov na čisti CSS

Materiali na temo:

Sorodne publikacije