Zaškrtávacie políčko html: príklady krásnych tlačidiel na čistom CSS, vytvorenie "akordeónu", získanie údajov formulára pomocou PHP a jQuery

01.02.2019 Category: Počítače Author: admin

Možnosti použitia začiarkavacieho políčka html sú veľmi veľké, ale najčastejšie sa tento prvok používa vo formách prenosu údajov. Je však schopný vykonať oveľa viac "trikov" ako získať hodnoty formulárov. Je vhodné ho použiť na vytvorenie rôznych "akordeónov" na čistom CSS.

Jednoduchý čistý CSS "harmonika"

HTML:

Odsek 1 


odsek 2 [11 ]


Odsek 3

CSS:

označenie [na ^ = " akordeón]: hover ~ štítok [pre ^ = "akordeón"] {
 opacita: 0,8;
textový tieň: 1px 1px 2px currentColor; 
}

V tomto príklade, keď sa kurzor myši na štítku ("bod 1") je prevod štýlov pre všetky ostatné symboly, ktoré sú umiestnené pod (súrodenci, anglicky - súrodenci) , Ak chcete prenášať vlastnosti súrodencom, použite znak "~" na prenos štýlov len na určené štítky a nie na všetkých súrodencov na stránke. Tieto "^" znamená "začína" Príklad "pre ^ =, harmoniky'-" (pre) vstup id, ktorý začína so slovom "akordeón":

Výsledkom je, že keď umiestnite kurzor na štítok, zmení sa štýl nižších štítkov.

Etikety sú použiteľné ako displeje pre mobilné telefóny, je veľmi ťažké, aby kliknite na malý checkbox box html, ktoré rozširujú oblasť, ktorá je pre užívateľov k dispozícii pre výber požadovanej odpovede. Navyše vďaka štítku, ktorý môže úplne odstrániť krabice z obrazovky

vstup [id ^ = "harmonika"] {
 Pozícia: absolútna;
vľavo: -9999px; 
}

Môžete tiež pridať kurzor: ukazovateľ, aby návštevníci pochopili stránky,že body "clickable":

štítok [for ^ = "akordeón"]: hover {
 kurzor: pointer; 
}

V dôsledku toho, vznášať sa nad text (napríklad "bod 1"), kurzor namiesto "šípka" vôle "ručné". Môžete pridať ďalšie štýly CSS na ešte viac akordeónov.

CSS "Stunts" nekončia. K nášmu "akordeónu" pridáme skrytý text.

Položka 1

Text 1.



54] 

Text 2.



Odsek 3

Text 3.

štýly pre skrytý text:

[id ^ = "akordeón-box -"] {
 pretečenie: skrytý;
maximálna výška: 0; 
}

, aby, keď sa objavil na texte štítku, pridajte max-výška: 100% štýl

vstup [id ^ = "akordeón" ]: začiarknuté + [id ^ = "akordeón-box -"] {
 max-výška: 100%; 
}

Postup začne, keď užívateľ klikne "na etikete, políčko html vybraný (vstup: zaškrtnuté), potom prejdú znakom" + "(čo znamená, že" iba prvý súrodenca dole ") max-výška nehnuteľnosti: 100% na

s textom.

Keď vyberiete príslušnú položku, zobrazí sa text.

HTML:

Odsek 1

Text 1. 

96) 
Pozícia 2

Text 2.


)
Znenie 3.

CSS:

štítok [na ^ = "harmonika"] {
 Veľkosť písma: 20px; 
}
štítok [pre ^ = "akordeón"]: vzdialiť {
 kurzor: ukazovateľ;
farba: červená;
textový tieň: 1px 1px 2px currentColor; 
}
štítok [pre ^ = "akordeón"]: hover ~ štítok [pre ^ = "akordeón"] {
 opacita: 0.8;
textový tieň: 1px 1px 2px currentColor; 
}
vstup [id ^ = "akordeón"]: začiarknuté + [id ^ = "akordeón-box -"] {
 max-výška: 100%;
okraj: 10px; 
}
vstup [id ^ = "akordeón"] {
 pozícia: absolútne;
vľavo: -9999px; 
}
[id ^ = "akordeón-box -"] {
 prepad: skrytý; 
maximálna výška: 0; 
}

, získavanie a spracovanie hodnôt pomocou PHP

Predpokladajme, napríklad za použitia políčko HTML formulárov, ktoré môžu tiež prijímať hodnotu (hodnota = "moe_znachenye").

Napíšeme hodnotu do hodnoty operátora = "".


HTML 


CSS 


JavaScript 


jQuery 


PHP [166 ]


MySQL 


Ajax 


(180 )

Pri odoslaní formulára, bude $ _POST pole obsahovať názov operátora kľúča poľa = "", a hodnota value = "".

Pokiaľ sa jednalo o bežné pole, potom sa pozrel takto:

$ post = array ("meno" = & gt; hodnota);

, alebo

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

$ _POST array transformovať reťazca pomocou PHP zrúti () a priradiť hodnotu $ _POST ["ajax_name"] zmenu $ Ajax. Zvyčajne všetky hodnoty $ _POST vytvoriť premenné, ale napríklad píšeme len jeden nedošlo k preťaženiu kód zbytočné informácie. Je tiež nutné skontrolovať bezpečnostné vstupné $ _POST, ale budeme tu robiť nebude, veľa bolo napísané o tom v iných článkoch.

svoje schopnosti: ".implode ('', $ _POST),
, ak (isset ($ _POST [" Ajax "])) {
$ Ajax = $ _POST ["Ajax"]
}
, ak (isset ($ Ajax)) {
echo "

premenná nastavovaná $ Ajax"
}
echo "

 "
 var_dump ($ _ POST),
echo"

dostanú kľúče a hodnoty tvoria pomocou jQuery

Ak chcete získať hodnotu z formy bez prekládky stránky by maliPomocou skriptov alebo javascript jQuery).

$ (dokument) .ready (function () {
 $ ("input.my-class") na ("cvaknutie", funkciu (e } {{219}} {{219}} {{219}} {{219}} {{219}} { ) (. 223), $ ("# log") html ("Zvolený:" + val.join ("") + "
 
"), 
}) 
}) ;

Vytvorme pole:

var val = [];

, potom každý (každý) vybranú položku ("vstup: kontrolovaná") používať tlak sa zapíše do poľa val ():

, $ ("vstup: kontrolovaná" ). akcia (funkcia () {
 val.push ($ (toto) .val ()); 
});

Obsah Val poľa () sa zobrazí na strane, ktorá sa pridá html objekt

jQuery: [. 240]

$ ("# log") html ("Zvolený:" + val.join ("") + "
 
");

Zistite si, či políčko html vybraný, môžete použiť .je (": zaškrtnuté") Prop ("kontrolovať") ..

Získať hodnotu (Val) každý vlajky a priviesť ju cez výstrahy ():

if ($ (this) .je (': kontroluje')), upozornenie ($ (toto) .val ());

To isté urobí pre identifikátor (ID) použitia .prop ("kontrolovať"):

if ($ (this) .prop ('kontrolovať' )) upozornenie ($ (to) .attr ("id"));

Záver kľúče a hodnoty prostredníctvom záznamu () je len príklad, pre formu, ktoré potrebujú, takže by mali byť odstránené z kódu.

Urob tlačidlo k dispozícii ("zakázané") predložiť, pokiaľ nie je príznak nie je nastavený

(260 ) $ ('# submitButton') .pro ("zakázané",! $ (to) .prop ("začiarknuté"));

Poznámka: hrubé črevo: .je (": kontroluje") pracuje správne s hrubého čreva a .prop ("kontrolovaná") prevádzkuje bez hrubého čreva !!!

Pridáme možnosť okamžite označiť všetky body.

určiť všetky

, ak ($ ("# checkAll"). Prop ("kontrolovaná" ))$ ('input.my-class'), nie (to) .prop ('checked', this.checked);

Celý kód.

HTML:

Požadované zručnosti: 


Určenie všetko 


HTML 


CSS 


javascript 


jQuery 


PHP









Ajax

jQuery:

, $ (dokument) .ready (funkcia () {
, $ ("input.my trieda") na (. "() () () () () () () ()
) ($ (to) .prop ('checked')) upozornenie ($ (toto) .attr ("id")); Toto (zaškrtnuté)), (proxy ("začiarknuté")),
ak ($ "checkAll") prop ("checked")) $ (' ()
$ ("vstup: začiarknuté") každý (funkcia () {
 val.push . 335), ak ($ ("# checkAll") prop ("kontrolovaná")) {
, $ ("# log") html ("Zvolený: Všetky (337 
.)"), 
} iný {{340} $ ("# log"). html ("Vybraný:" + val.join (",") "

345)});

PHP:

if (isset ($ _ POST ["ALL"])) {
 echo "Moje schopnosti: všetky tieto"; 
} else {
 echo "

Moje schopnosti" .implode ('', $ _POST); 
} 
, ak (isset ($ _POST ["Ajax"])) {
 $ Ajax = $ _POST ["Ajax"]; 
} 
, ak (isset ($ Ajax)) {
 echo "

Variabilná $ Ajax set"; 
}
echo";
var_dump ($ _ POST);
echo "
";

Registrácia tlačidlá na čisto CSS

pre usporiadanie tlačidiel v súlade s projektom lokality budú používať iba CSS. Skrytie pôvodné krabici pomocou vlastnosti z-index a nepriehľadnosť, v tomto prípade, štvorce nie sú posunuté z obrazovky, tak sa na priehľadné (zákal: 0).

CSS:

pozícia: absolútna;
z-index: -1;
opacita: 0;
okraj: 10px 0020px;

Na tom istom mieste zobrazujeme tlačidlá s vlastným dizajnom.

vstupné značka môže byť umiestnená pred štítku značky, potom použitie prvý príklad styling tlačidiel:

.my triedy {
 pozícia: absolútna;
z-index: -1;
opacita: 0;
okraj: 10px 0020px; 
} 
. Moja trieda + štítok {
 pozícia: relatívna;
polstrovanie: 000 60px;
kurzor: ukazovateľ;
vpravo: -4px;
vľavo: 0;
šírka: 50 pixelov 
, výška: 26px;
border-radius: 13px;
pozadia: # CDD1DA
krabice-shadow: vložka 0 2px 3PX RGBA (000,2),
prevodné: 1,2 s; 
}
.my-class + label: po {
 obsahu: ";
poloha: absolútna;
hore: -2px;
vľavo: 2px;
šírka: 22px;
výška: 22px;
polomer okrajov: 10px;
pozadie: #FFF;
box-tieň: 2px 0 5px rgba (000.3);
prechod: .2s; 
} 
. Moja trieda: začiarknuté + štítok: pred {
 pozadie: # 87CEFA;
-webkit-animácia: blackblur 2s 015 s 1 náhradník;

}
.my-class: začiarknuté + štítok: za {
 vľavo: 26px;

}
.my triedy: zameranie + label: pred {
 krabice-tieňa: vložka 0 2px 3PX RGBA (000.2), 000 3PX RGBA (206250135.7); 
} 


, '-webkit-kľúčové snímky blackblur {
, z {box-tieňa: 0072px čierna; farba: priehľadná;}
do {box-shadow: 0; farba: čierna;} 
}

Ak je vstup - značka vnútri štítku, potom dal políčka text v div s triedou "text". Štýly podiel vstupu: kontrolované div s triedou "text" v druhom príklade:

.label vstup {
 pozícia: absolútna;
z-index: -1;
opacita: 0;
okraj: 10px 0020px; 
}
.text {
 pozícia: relatívna;
polstrovanie: 000 60px;
kurzor: ukazovateľ;
vľavo: 0;
šírka: 50px;

 ) výška: 26px;
border-radius: 13px;
pozadia: # CDD1DA
krabice-shadow: vložka 0 2px 3PX RGBA (000,2),
prechodové: .2s 
}
.text: po {
 obsahu: ";
poloha: absolútna;
hore: -2px;
vľavo: 2px;
šírka: 22px;
výška: 22px;
okraj-polomer: 10px;
pozadie: #FFF;
box-tieň: 2px 0 5px rgba (000.3);
prechod: .2s; 
}
.label vstup: začiarknuté + .text: pred {
 pozadie: # 87CEFA;
-webkit-animácia: blackblur 2s 015 s 1 náhradník; 
}
 .Výber označenia: začiarknuté + .text: po {
 vľavo: 26px; 
}
.label vstup: zameranie + .Texty: pred {
 krabice-tieňa: vložka 0 2px 3PX RGBA (000.2), 000 3PX RGBA (206250135.7); 
}
@ -webkit-keyframes blackblur {
 z {box-shadow: 0072px čierna; farba: transparentná;}
do {box-shadow: 0;

 


Vybrať všetko 


 




 HTML 


 



, CSS 






JavaScript 





jQuery 






PHP 


 



, MySQL 






Ajax

Takže v závislosti od situácie môžete vždy zvoliť vhodnú možnosť vstupu a označenia. Ak z nejakého dôvodu táto možnosť nie je vhodná, keď je vstup umiestnený pred štítkom, môžete vložiť vstup do značky štítku. Môžete tiež skontrolovať html pomocou skriptov (javascript, jQuery), moderné prehliadače dokážu dokonalo spracovať. Ak však používateľ vstúpi na stránku zo starého prehliadača, potom je výhodou, aby ste získali CSS. Musíte tiež vziať do úvahy, že v rôznych operačných systémoch, zaškrtávacie políčka bude vyzerať odlišne rôznymi spôsobmi. Ak sa prehliadač Google Chrome pokúsi vyriešiť tieto rozdiely, v iných prehliadačoch sa dizajn tlačidiel môže značne líšiť.