Opcje korzystania z pola wyboru html są bardzo duże, ale najczęściej ten element jest używany w formach transmisji danych. Jednak jest w stanie wykonać znacznie więcej "sztuczek", niż uzyskać wartości formularzy. Wygodne jest użycie go do tworzenia różnych "harmonii" na czystym CSS.
Akordeon Simple Pure CSS
]
CSS:
etykieta [dla ^ = " akordeon "]: hover ~ label [dla ^ =" harmonijka "] {
nieprzezroczystość: 0,8;
text-shadow: 1px 1px 2px currentColor;
}W tym przykładzie, gdy umieścisz kursor nad etykietą na etykiecie ("Paragraf 1"), style zostaną przeniesione na wszystkie inne etykiety poniżej (rodzeństwo, z angielskiego - rodzeństwo) . Aby przenieść właściwości na rodzeństwo, użyj znaku "~", aby przesyłać style tylko do określonych etykiet, a nie do wszystkich rodzeństwa na stronie. Znak "^" oznacza "zaczyna się od", w przykładzie "dla ^ =" akordeon "-" (dla) wejście id, które rozpoczyna się słowem "akordeon":
W rezultacie po najechaniu kursorem na etykietę zmienia się styl niższych etykiet.
Etykiety są bardzo przydatne, ponieważ na ekranach telefonów komórkowych bardzo trudno jest kliknąć pole wyboru w małym polu, rozszerzają strefę dostępną dla użytkownika, aby wybrać pożądaną odpowiedź. Co więcej, dzięki etykiecie możesz całkowicie usunąć kwadraty z ekranu:
wejście [id ^ = "harmonijka"] {
pozycja: absolutna;
Pozostały: -9999px;
}Można również dodać kursor: wskaźnik, aby odwiedzający mogli zrozumieć stronę,że punkty "klikalne":
etykieta [dla ^ = "akordeon"]: hover {
kursor: wskaźnik;
}W rezultacie po najechaniu kursorem na tekst (na przykład "Pozycja 1") kursor będzie "ręcznie" zamiast strzałki. Możesz dodać dodatkowe style CSS, aby uzyskać jeszcze więcej akordeonu.
CSS "Stunts" na tym się nie kończą. Dodamy ukryty tekst do naszego "akordeonu".
tekstu 1.
Tekst 2.
Tekst 3.
Style dla ukrytego tekstu
[id ^ = "harmonijkowo box -"] {
przelewu: ukryte;
maksymalna wysokość: 0;
} ,, aby kiedy pojawiła się napisu, dodać max-wysokość: 100% stylu
wejście [id ^ = "akordeon" ]: checked + [id ^ = "akordeon-box -"] {
maksymalna wysokość: 100%;
} , proces rozpoczyna się po kliknięciu przez użytkownika „na etykiety, pole HTML wybrany (wejście: zaznaczone), a następnie przechodzi przez znak” + „(który oznacza” tylko pierwszy równorzędny poniżej „) Właściwość max-height: 100% w
Po wybraniu odpowiedniego elementu pojawia się tekst.
, HTML,
tekstu 1.
Tekst 2.
(107 )
tekst 3.
, CSS
etykiety [na ^ = "akordeon"] {
rozmiar czcionki: 20 pikseli;
}
etykieta [dla ^ = "akordeon"]: hover {
kursor: wskaźnik;
kolor: czerwony;
text-shadow: 1px 1px 2px currentColor;
}
etykieta [dla ^ = "akordeon"]: hover ~ etykieta [dla ^ = "harmonijka"] {
nieprzezroczystość: 0,8;
text-shadow: 1px 1px 2px currentColor;
}
input [id ^ = "akordeon"]: checked + [id ^ = "akordeon-box -"] {
maksymalna wysokość: 100%;
marża: 10 pikseli;
}
input [id ^ = "accordion"] {
position: absolute;
Pozostało: -9999px;
}
[id ^ = "akordeon-box -"] {
przepełnienie: ukryte;
maksymalna wysokość: 0;
} , odbieranie i przetwarzanie wartości za PHP
rozpatruje, na przykład za pomocą wyboru postaci HTML, który może także odbierać wartość (wartość = "moe_znachenye").
Zapisujemy wartość w wartości operatora = "".
Przy wysłaniu formularza $ _ POST tablica zawiera nazwisko operatora kluczami = "", a wartością value = "".
W przypadku gdyby regularny układ, a następnie, jak wygląda następująco:
$ post = tablica ("Nazwa" = & gt, wartość);
,, i
$ post = tablica (
"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 Tablica przekształcić ciąg przy użyciu PHP implode () i przypisać wartość $ _POST ["ajax_name"] Zmiana $ Ajax. Zazwyczaj wszystkie wartości $ _POST tworzyć zmienne, ale na przykład tylko jeden piszemy nie przeciążać kodu niepotrzebnych informacji. Musisz również sprawdzić bezpieczeństwo danych wejściowych $ _POST, ale nie zrobimy tego tutaj, wiele jest napisane w innych artykułach.
, Kim umiejętności ".implode ('' $ _ POST),
, gdy (isset ($ _ POST [" Ajax „])) {
$ ajax = $ _ POST ["ajax"],
}
, jeżeli (isset ($ ajax)) {
echo "
,
o zmiennej zestaw $ ajax",
}
echo „
"”
var_dump ($ _ pO),
echo"
odbioru kluczy i wartości tworzą jQuery
, aby uzyskać wartość z formy bez konieczności przeładowywania strony powinnoużywać skryptów lub JavaScript jQuery).
$ (document) .ready (function () {
$ ("input.my klasy") w dniu ("click", function (e } {{219}} {{219}} {{219}} {{219}} {{219}} { ) (. 223) $ ("# log") html ("Wybrany" + val.join ("") + "
"),
})
}) ;Stwórzmy tablicę:
var val = [];Następnie każdy (każda) wybrany element ("input: checked") z użyciem impuls jest napisane na tablicy val ():
$ ("input: checked" ) .each (function () {
val.push ($ (this) .val ());
}); , zawiera Val Array () wyświetla się na stronie, które dodaje HTML Zadanie
jQuery [. 240]
$ ("# log") html ("Wybrany" + val.join ("") + "
");
Sprawdź, czy html checkbox wybrany, można użyć .is (": zaznaczone") Prop ("sprawdzone")..
Podaj wartość (Val) każdy z flagą i doprowadzić go przez alert ():
if ($ (this) .is (': sprawdzane')) alert ($ (this) .val ());To samo zrobi dla identyfikatora (ID) za pomocą .prop ("sprawdzone"):
if ($ (this) .prop ('sprawdzone' )) alert ($ (this) .attr ("id")); , i wartości kluczy Wnioski poprzez alarm () to tylko przykład, w postaci, której potrzebują, więc powinny być usunięte z kodu.
Marka (dostępnego przycisku "disabled") przedkłada, jeśli nie flaga nie jest ustawiona
(260 ) $ ('# submitButton'). prop ("wyłączony",! $ (this) .prop ("checked"));
Uwaga: .is dwukropek (": zaznaczone") działa poprawnie z okrężnicy i .prop ("sprawdzone") funkcjonuje bez okrężnicy !!!
Dodajemy możliwość natychmiastowego oznaczania wszystkich punktów.
if ($ ("# checkAll"). Prop ("zaznaczone" ))$ ('input.my-class'). not (this) .prop ("checked", this.checked);
Cały kod.
HTML:
Wymagane umiejętności:
jQuery:
$ (dokument) .ready (function () {
$ ("input.my-class"). "click", function (e) {
can val = [];
if ($ (this) .is (": checked") alert ($ (this) .val ()); (329 ) ($ (this) .prop ('checked')) alert ($ (this) .attr ("id"));
$ ("# submitButton"). prop ("wyłączony",! $ to) .prop ("sprawdzone"));.
if ($ ("# checkAll") prop ("sprawdzone")) $ (nie (this) .prop 'input.my klasy') (”. zaznaczone ", this.checked);
$ (" input: checked "). each (function () {
val.push ($ (this) .val ());
}) 335) if ($ ("# checkAll") prop ("sprawdzone")) {
$ ("# log"). Html ("Selected: ALL
");
} else {{340} $ ("# log"). html ("Selected:" + val.join (",") + "
");
}
})
});
, PHP
, jeżeli (isset ($ _ POST ["ALL"])) {
echo "My umiejętności: Wszystkie te";
} else {
echo "
Moje umiejętności:" .implode (",", $ _POST);
}
if (isset ($ _POST ["ajax"]))) {
$ ajax = $ _POST ["ajax"];
}
if (isset ($ ajax)) {
echo '
Zestaw zmiennych $ ajax ";
}
echo";
var_dump ($ _ POST);
echo "
";Ozdabianie przycisków na czystym CSS
Aby tworzyć przyciski zgodnie z projektem strony, użyjemy tylko CSS. Ukryj oryginalny kwadrat z właściwościami z-index i kryciem, w tym przypadku kwadraty nie przesuwają się z ekranu, ale po prostu stają się przezroczyste (nieprzezroczystość: 0).
CSS:
position: absolute;
indeks z: -1;
nieprzezroczystość: 0;
margin: 10px 0020px;W tym samym miejscu wyświetlamy przyciski z ich własnym projektem.
znacznika wejście może być umieszczony przed Etykieta, następnie za pomocą pierwszego przykładu przycisków do układania włosów
.my klasy {
pozycji: bezwzględne;
indeks z: -1;
nieprzezroczystość: 0;
marża: 10px 0020px;
}
.my-class + label {
position: relative;
wypełnienie: 000 60px;
kursor: wskaźnik;
pozycja: bezwzględna
góra: -4px;
po lewej: 0;
szerokość: 50 pikseli,
, wysokość: 26px,
granicznych promienia 13px,
t: # CDD1DA,
skrzynki cień: wstawka 0 2 piksele 3px rgba (000,2),
przejścia: 1,2 s;
}
.my-class + label: after {
content: ";
stanowisko: bezwzględne;
góra: -2px;
w lewo: 2px;
szerokość: 22 piksele;
wysokość: 22 piksele;
border-radius: 10px;
tło: #FFF;
box-shadow: 2px 0 5px rgba (000.3);
przejście: .2s;
}
.my-class: checked + label: before {
background: # 87CEFA;
-webkit-animation: blackblur 2s 015 s 1 nazwa alternatywna;
}
.my-class: checked + label: after {
left: 26px;
}
.my klasy koncentrująca etykietą: Przed {
skrzynki-cie: wstawka 0 2 piksele 3px RGBA (000.2), 000 3px RGBA (206250135.7);
}
@ -webkit-keyframes blackblur {
z {skrzynkowej ukrytego: 0072px czarne; kolor: przezroczysty;}
do {box-shadow: 0; Kolor czarny;}
} , Jeżeli wejście - znacznik wewnątrz etykiety, a następnie umieścić w pole tekstowe div z klasy "text". Style są przekazywane z wejścia: sprawdzane do div z klasą "text" w drugim przykładzie:
.label input {
position: absolute;
indeks z: -1;
nieprzezroczystość: 0;
marża: 10px 0020px;
}
.text {
position: relative;
wypełnienie: 000 60px;
kursor: wskaźnik;
w lewo: 0;
szerokość: 50 pikseli;
) wysokość: 26px,
granicznych promienia 13px,
t: # CDD1DA,
skrzynki cień: wstawka 0 2 piksele 3px rgba (000,2),
przejścia: .2s,
}
.text: po {
zawartości: ";
stanowisko: absolutny;
top: -2px;
w lewo: 2px;
szerokość: 22 piksele;
wysokość: 22px;
border-radius: 10px;
tło: #FFF;
box-shadow: 2px 0 5px rgba (000.3);
przejście: .2s;
}
.label input: checked + .text: before {
background: # 87CEFA;
-webkit-animation: blackblur 2s 015 s 1 alternate;
}
.label input: checked + .text: after {
left: 26px;
}
.label wejście koncentrująca + .text: zanim {
skrzynki-cie: wstawka 0 2 piksele 3px RGBA (000.2), 000 3px RGBA (206250135.7);
}
@ -webkit-keyframes blackblur {
from {box-shadow: 0072px black; kolor: przezroczysty;}
do {box-shadow: 0;
CSS
