V kóde nie je nič zvláštne.

Krok 3 - PHP

Formulár teraz prevedieme na kompletný registračný a prihlasovací systém. Na vyriešenie úlohy budete potrebovať niečo iné ako bežný PHP kód. Celý kód je rozdelený na dve časti.

Ak plánujete niečo pridať, najlepšie je rozdeliť všetko na niekoľko jednotlivé súbory a zapnite ich podľa potreby. Tento prístup pomáha rozvíjať veľké projekty a zároveň opätovne používať kód v rôznych častiach stránky.

Tu je návod, ako sa to tu implementuje.

demo.php

define("INCLUDE_CHECK",true);
vyžadovať "connect.php";
vyžadujú "functions.php";
// Tieto dva súbory môžu byť zahrnuté iba vtedy, ak je definované INCLUDE_CHECK
session_name("tzLogin");
// Spustenie relácie
session_set_cookie_params(2*7*24*60*60);
// Nastaví životnosť súboru cookie na dva týždne
session_start();
if($_SESSION["id"] && !isset($_COOKIE["tzRemember"]) && !$_SESSION["rememberMe"])
{
// Ak ste prihlásení, ale nemáte súbor cookie tzRemember (reštartovanie prehliadača)
// a nezaškrtli ste políčko Zapamätať si ma:
$_SESSION = pole ();
session_destroy();
// Odstrániť reláciu
}
if(isset($_GET["odhlásenie"]))
{
$_SESSION = pole ();
session_destroy();
header("Umiestnenie: demo.php");
VÝCHOD;
}
if($_POST["submit"]=="Prihlásenie")
{
// Skontrolujte, či požiadavka prišla z prihlasovacieho formulára
$err = pole ();
// Uložte chybu
if(!$_POST["používateľské meno"] || !$_POST["heslo"])
$err = "Všetky polia musia byť vyplnené!";
if(!count($err))
{

$_POST["heslo"] = mysql_real_escape_string($_POST["heslo"]);
$_POST["rememberMe"] = (int)$_POST["rememberMe"];
// Pripravte všetky údaje
$row = mysql_fetch_assoc(mysql_query("SELECT id,usr FROM tz_members WHERE usr="($_POST["username"])" AND pass="".md5($_POST["heslo"]).""")) ;
if($row["usr"])
{
// Ak je všetko v poriadku, prihláste sa
$_SESSION["usr"]=$row["usr"];
$_SESSION["id"] = $riadok["id"];
$_SESSION["rememberMe"] = $_POST["rememberMe"];
// Uloženie niektorých údajov v relácii
setcookie("tzRemember",$_POST["rememberMe"]);
// Vytvorenie súborov cookie tzRemember
}
else $err="Chybné užívateľské meno a/alebo heslo!";
}
if($err)
$_SESSION["msg"]["login-err"] = implode("
",$err);
// Uloženie chybovej správy do relácie
header("Umiestnenie: demo.php");
VÝCHOD;
}

Súbory cookie tu tzPamätajte slúži ako ovládací prvok na určenie, že je potrebné poskytnúť odhlásenie používateľovi, ktorý nezaškrtol políčko „Zapamätať si ma“. Ak súbor cookie chýba (z dôvodu reštartu prehliadača) a návštevník nezaškrtol možnosť „zapamätať si ma“, reláciu vymažeme.

Samotná relácia zostane aktívna dva týždne (ako je nastavené v session_set_cookie_params).

A tu je druhá časť demo.php.

Else if($_POST["submit"]=="Registrovať")
{
// Ak je žiadosť odoslaná z Registračného formulára
$err = pole ();
if(strlen($_POST["používateľské meno"])<4 || strlen($_POST["username"])>32)
{
$err="Užívateľské meno musí mať 3 až 32 znakov!";
}
if(preg_match("/[^a-z0-9\-\_\.]+/i",$_POST["používateľské meno"]))
{
$err="Používateľské meno obsahuje neplatné znaky!";
}
if(!checkEmail($_POST["e-mail")]))
{
$err="Váš emailová adresa zle!";
}
if(!count($err))
{
// Ak nie sú žiadne chyby
$pass = substr(md5($_SERVER["REMOTE_ADDR"].microtime().rand(1,100000)),0,6);
// Generovanie náhodného hesla
$_POST["e-mail"] = mysql_real_escape_string($_POST["e-mail"]);
$_POST["username"] = mysql_real_escape_string($_POST["username"]);
// pripraviť údaje
mysql_query(" INSERT INTO tz_members(usr,pass,email,regIP,dt)
VALUES(
"".$_POST["používateľské meno"]."",
".md5($pass)."",
"".$_POST["e-mail"]."",
"".$_SERVER["REMOTE_ADDR"]."",
TERAZ()
)");
if(mysql_affected_rows($link)==1)
{
poslať mail(" [e-mail chránený] webová stránka",
$_POST["e-mail"],
"Ukážka registračného systému - generovanie hesla",
"Vaše heslo: ".$pass);
$_SESSION["msg"]["reg-success"]="Poslali sme vám e-mail s vaším novým heslom!";
}
else $err="Toto používateľské meno sa už používa!";
}
if(count($err))
{
$_SESSION["msg"]["reg-err"] = implode("
",$err);
}
header("Umiestnenie: demo.php");
VÝCHOD;
}
$script = "";
if($_SESSION["správa"])
{
// Skript zobrazuje posúvač na stránke načítania
$script = "
";
}

Uložte všetky definované chyby do poľa $err, ktorá sa neskôr priradí k premennej $_SESSION. Týmto spôsobom k nemu budete mať prístup aj po presmerovaní prehliadača.

Niektoré stránky môžu dostať upozornenie pri odoslaní formulára alebo pri ďalšom obnovení stránky, že údaje už boli odoslané. Môže to byť problém, pretože to vedie k duplicitným registráciám a dodatočnému zaťaženiu servera.

Funkciu hlavičky používame na zabránenie chybe presmerovaním prehliadača na rovnakú stránku. Tým sa aktualizuje zobrazenie stránky bez toho, aby to prehliadač rozpoznal ako žiadosť o formulár. V dôsledku toho sa stránka obnoví a nedochádza k prenosu údajov.

Ale keďže používame $_SESSION na uloženie všetkých zistených chýb je veľmi dôležité, aby sme resetovali všetky premenné hneď, ako sa chyba zobrazí používateľovi. V opačnom prípade sa zobrazí pri každom zobrazení stránky.

Tiež používané dodatočný skript, ktorá zobrazuje lištu na stránke sťahovania, aby bola správa viditeľná pre používateľa.

Krok 4 – CSS

Posuvný panel používa svoj vlastný štýl. Potrebujeme teda iba vytvoriť štýl pre našu stránku.

demo.css

telo,h1,h2,h3,p,citát,malý,formulár,vstup,ul,li,ol,štítok(
/* Obnoviť pravidlá */
margin:0px;
padding:0px;
}
telo(
farba:#555555;
font-size:13px;
pozadie: #eeeeee;
rodina písma:Arial, Helvetica, bezpätkové;
šírka: 100%
}
h1(
font-size:28px;
font-weight: bold;
font-family:"Trebuchet MS",Arial, Helvetica, bezpätkové;
medzi písmenami: 1px;
}
h2(
font-family:"Arial Narrow",Arial,Helvetica,sans-serif;
font-size:10px;
font-weight:normal;
medzi písmenami: 1px;
padding-left:2px;
text-transform:veľké písmená;
white-space:wrap;
margin-top:4px;
farba:#888888;
}
#hlavne p(
padding-bottom:8px;
}
.jasný(
jasné:obaja;
}
#hlavné(
šírka: 800px;
/* Stred v strede stránky */
margin:60px auto;
}
.container(
margin-top:20px;
pozadie:#FFFFFF;
border:1px solid #E0E0E0;
padding:15px;
/* Zaoblené rohy */
-moz-border-radius:20px;
-khtml-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius:20px;
}
.err(
farba:červená;
}
.úspech(
farba:#00CC00;
}
a, a: navštívené (
farba:#00BBFF;
text-decoration:none;
obrys:žiadny;
}
a:hover(
text-decoration:podčiarknutie;
}
.tutorial-info(
text-align:center;
padding:10px;
}

Krok 5 - jQuery

Posuvný panel má svoj vlastný jQuery.

demo.php

Prvý riadok obsahuje knižnicu jQuery z Google CDN. Nasleduje záplata pre IE6 PNG pre prvky priehľadnosti. Potom je zahrnutý skript panelu

Premenná $script v prípade potreby zobrazí panel na stránke sťahovania.

Online Twitter Môžete sledovať prácu stránky s čistým a nenáročným dizajnom. Pozrite sa do pravej hornej časti stránky, tam uvidíte tlačidlo autorizáciu do systému, kliknutím na ktorý uvidíte formulárov na vyplnenie údajov. Dnes vám povieme, ako urobiť podobný efekt na vlastnej webovej stránke. V skutočnosti je to veľmi jednoduché. Okrem toho vám pomôže ušetriť miesto na stránke a vašim návštevníkom dodá pocit pohodlia. V tomto článku vám krok za krokom prezradíme, ako celý tento systém funguje a táto príručka bude užitočná aj pre tých, ktorí sa chcú naučiť jQuery. Vpred!

HTML kód

Najprv musíte začať s HTML kódom. HTML kód je veľmi jednoduchý – obsahuje značku „a“, ktorá sa spája so značkou „fieldset“, vďaka ktorej sa formulár zobrazuje.

Stačí to skopírovať do kódu nová stránka:

CSS kód

Budete potrebovať Použitie CSS na definovanie autorizačného tlačidla a prihlasovacieho formulára. Nižšie uvedený kód vykonáva presne túto funkciu.

Jednoducho skopírujte tento kód do svojho css súboru alebo ho pridajte do svojho HTML kódu, kde definujete svoj štýl. Tieto kódy definujú autorizačné tlačidlo.

#kontajner (
šírka: 780px;
okraj:0 auto;
poloha: relatívna;
}

#content(
šírka: 520px;
min-height:500px;
}
a:link, a:navštívené (
farba:#27b;
text-decoration:none;
}
a: vznášať sa (
text-decoration:podčiarknutie;
}
obrázok (
šírka-okraja:0;
}
#topnav(
padding:10px 0px 12px;
font-size:11px;
line-height:23px;
text-align:right;
}
#topnav a.signin (
pozadie:#88bbd4;
padding:4px 6px 6px;
text-decoration:none;
font-weight: bold;
farba:#fff;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
*background:transparent url("images/signin-nav-bg-ie.png") no-repeat 0 0;
*padding:4px 12px 6px;
}
#topnav a.signin:hover (
pozadie:#59B;
*background:transparent url("images/signin-nav-bg-hover-ie.png") no-repeat 0 0;
*padding:4px 12px 6px;
}
#topnav a.signin, #topnav a.signin:hover (
*background-position:0 3px!important;
}

a.signin(
poloha:relatívna;
margin-left:3px;
}
a.signin span(
background-image:url("images/toggle_down_light.png");
background-repeat:no-repeat;
pozícia pozadia:100% 50%;
padding:4px 16px 6px 0;
}
#topnav a.menu-open(
pozadie:#ddeef6!dôležité;
farba:#666!dôležité;
obrys:žiadny;
}
#small_signup(
display:inline;
float:none;
line-height:23px;
margin:25px 0 0;
šírka: 170px;
}
a.signin.menu-open span(
background-image:url("images/toggle_up_dark.png");
farba:#789;
}

A potom nasleduje definícia prihlasovacieho formulára:

#signin_menu(
-moz-border-radius-topleft:5px;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-webkit-border-top-left-radius:5px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:5px;
displej:žiadny;
background-color:#ddeef6;
poloha:absolútna;
šírka: 210px;
z-index:100;
border:1px transparentný;
text-align:left;
padding:12px;
hore: 24,5px;
vpravo: 0px;
margin-top:5px;
pravý okraj: 0px;
*pravý okraj: -1px;
farba:#789;
font-size:11px;
}

#signin_menu input, #signin_menu input (
displej:blok;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border:1px solid #ACE;
font-size:13px;
margin:0 0 5px;
padding:5px;
šírka: 203px;
}
#signin_menu p(
okraj:0;
}
#signin_menu a (
farba:#6AC;
}
#signin_menu label (
font-weight:normal;
}
#signin_menu p.remember(
padding:10px 0;
}
#signin_menu p.forgot, #signin_menu p.complete (
jasné:obaja;
margin:5px 0;
}
#signin_menu p a (
farba:#27B!dôležité;
}
#signin_submit(
-moz-border-radius:4px;
-webkit-border-radius:4px;
background:#39d url("images/bg-btn-blue.png") repeat-x scroll 0 0;
border:1px solid #39D;
farba:#fff;
text-shadow:0 -1px 0 #39d;
padding:4px 10px 5px;
font-size:11px;
margin:0 5px 0 0;
font-weight: bold;
}
#signin_submit::-moz-focus-inner (
výplň:0;
ohraničenie:0;
}
#signin_submit:hover, #signin_submit:focus (
background-position:0 -5px;
kurzor:ukazatel;
}

Je čas pracovať s javascriptom

Zdalo by sa, HTML kódy a CSS sú pomerne zložité a mätúce, ale v javascripte je všetko veľmi jednoduché. Stačí skopírovať tento javascriptový kód, ktorý po kliknutí na tlačidlo prihlásenia zobrazí a skryje formulár, aj keď je kliknutie mimo prihlasovacieho formulára.

Podľa vyššie uvedeného kódu, keď návštevník klikne na prihlasovacie tlačidlo, Nová funkcia. Najprv sa zobrazí prihlasovací formulár (zabalený do tagu „filedset“), následne odkaz zabalený do triedy „.signin“ pridá ďalšiu triedu „menu-open“, ktorá zmení obrázok na pozadí.

Ďalšou udalosťou v tomto kóde je, že keď návštevníci nekliknú na prihlasovací formulár, ale niekde na stránke, formulár sa sám zatvorí. Inými slovami, trieda „menu-open“ sa odstráni z prepojenia s triedou „.signin“ a vráti sa do nej pôvodný obrázok na pozadí.

Čo sa týka tipov?

Zvyčajne odporúčame použiť plugin pre jQuery – tipy. Obsah popisku je to, čo je napísané v atribúte „title“ priradenému k odkazu. Môžete zmeniť polohu popisu vzhľadom na východ, západ, juh alebo sever. Toto je implementované prostredníctvom parametra "gravity" špecifikovaného v kóde vyššie. Poskytujeme vám odkaz na stránku venovanú tomuto doplnku, kde môžete podrobnejšie preskúmať jeho možnosti a stiahnuť si doplnok. …

Konečne

Ak ste skopírovali celý kód z tohto článku, nemeňte štruktúru priečinkov. Ak ho zmeníte, kód nebude fungovať. Daný kód je len príkladom stvorenia rozbaľovací prihlasovací formulár s jQuery. Veľa šťastia v praxi!

Responzívny s funkciami prihlasovacích a registračných formulárov, s možnosťou dynamického prepínania, bez opätovného načítania stránky. Po zobrazení okna môže používateľ jednoducho prepínať z jedného do druhého a v prípade potreby vybrať možnosť zmeny hesla.
Dnes sa pozrieme na to, ako sa to všetko dá urobiť pomocou kombinácie malého, ale veľmi výkonného doplnku jQuery a nových štandardov CSS3.

Táto metóda bude užitočná, ak chcete sprístupniť prihlasovacie a registračné formuláre používateľom na každej stránke vašej lokality. Pri vstupe na stránku alebo registrácii nebudú používatelia presmerovaní na inú stránku a budú môcť vykonať všetko potrebné opatrenia„bez opustenia pokladne“, všetko na jednej stránke.

Dekor vzhľad pop-up formuláre sú implementované pomocou CSS3, celková hmotnosť pluginu nie je nijako veľká, odozva a načítanie modálneho okna prebieha takmer bez oneskorenia.
100% responzívne rozloženie, výška a šírka modálneho okna s formulármi sa automaticky nastavuje podľa veľkosti obrazoviek používateľských zariadení.

Pozreli sme sa na príklad, teraz sa pozrime bližšie na všetky hlavné komponenty modálneho okna a formulárov, aby sme sa naučili, ako ich používať na vašom webe.
Fungovanie vyskakovacieho okna s prihlasovacím a registračným formulárom je postavené na populárnej javascriptovej knižnici, spustiteľnom plugine jQuey a vygenerovaných CSS štýloch. Všetky tieto nástroje musia byť pripojené k vašej stránke. posledný aktuálna verzia Knižnice jQuey je možné pripojiť priamo z Google, samotný súbor pluginu main.js a hotovú sadu štýlov style.css nájdete v archíve.
Javascript pred zatvorením značky , css štýly možno skopírovať a pridať do súboru štýlov .css vašej lokality.

Štruktúra HTML:

Základný kontajner modálnych okien na stmavenom pozadí a inline formuláre s ovládacími prvkami sú umiestnené v tele stránky. Pre lepšie pochopenie som sektory ohraničil a doplnil komentármi. Všetky prvky dizajnu sú pevne spojené s CSS prostredníctvom určitých tried, takže zmena dizajnu formulárov tak, aby zodpovedala celkovému dizajnu vašich stránok, nie je náročná.

< div class = "cd-user-modal" > < div class = "cd-user-modal-container" > < ul class = "cd-switcher" > < li>< a href= "#0" >Vchod < li>< a href= "#0" >Registrácia < div id= "cd-login" > < form class = "cd-form" > < p class = "fieldset" > < label class = "image-replace cd-email" for = "signin-email" >Email < input class = id= "signin-email" type= "email" placeholder= "Email" > < span class = "cd-error-message" >Tu je chybové hlásenie! < p class = "fieldset" > < label class = "image-replace cd-password" for = "signin-password" >heslo < input class = "plná šírka má-výplň má-okraj" id= "signin-password" type= "text" placeholder= "(!LANG:Password" > !}< a href= "#0" class = "hide-password" >Skryť < span class = "cd-error-message" >Tu je chybové hlásenie! < p class = "fieldset" > < input type= "checkbox" id= "remember-me" checked> < label for = "remember-me" >Aby si ma pamätal < p class = "fieldset" > < input class = "full-width" type= "submit" value= "Vstúpiť" > < p class = "cd-form-bottom-message" >< a href= "#0" >zabudol si heslo? < div id= "cd-signup" > < form class = "cd-form" > < p class = "fieldset" > < label class = "image-replace cd-username" for = "signup-username" >Používateľské meno < input class = "plná šírka má-výplň má-okraj" id= "signup-username" type= "text" zástupný symbol= "používateľské meno"> < span class = "cd-error-message" >Tu je chybové hlásenie! < p class = "fieldset" > < label class = "image-replace cd-email" for = "signup-email" >Email < input class = "plná šírka má-výplň má-okraj" id= "signup-email" type= "e-mail" placeholder= "(!LANG:E-mail" > !}< span class = "cd-error-message" >Tu je chybové hlásenie! < p class = "fieldset" > < label class = "image-replace cd-password" for = "signup-password" >heslo < input class = "plná šírka má-výplň má-okraj" id= "signup-password" type= "text" placeholder= "(!LANG:Password" > !}< a href= "#0" class = "hide-password" >Skryť < span class = "cd-error-message" >Tu je chybové hlásenie! < p class = "fieldset" > < input type= "checkbox" id= "accept-terms" > < label for = "accept-terms" >Súhlasím s< a href= "#0" >podmienky < p class = "fieldset" > < input class = "full-width has-padding" type= "submit" value= "Vytvoriť účet"> < div id= "cd-reset-password" > < p class = "cd-form-message" >zabudol si heslo? Zadajte svoju adresu Email. Dostanete odkaz na vytvorenie nového hesla. < form class = "cd-form" > < p class = "fieldset" > < label class = "image-replace cd-email" for = "reset-email" >Email < input class = "plná šírka má-výplň má-okraj" id= "reset-email" type= "e-mail" placeholder= "(!LANG:E-mail" > !}< span class = "cd-error-message" >Tu je chybové hlásenie! < p class = "fieldset" > < input class = "full-width has-padding" type= "submit" value= "Obnoviť heslo"> < p class = "cd-form-bottom-message" >< a href= "#0" >Späť ku vchodu < a href= "#0" class = "cd-close-form" >Zavrieť

CSS štýly:

Základné ovládacie prvky šablón a formulárov, ktoré autor vykonal v populárnom, plochý štýl(Ploché), s jasným dôrazom na minimalizmus. Nič nadbytočné, stredne priehľadné stmavujúce pozadie, dobre čitateľné farby, dobre zvolený font a ikony pre vstupné polia. Používaním CSS vlastnosti, môžete jednoducho upraviť ľubovoľný prvok formulára.

.cd-user-modal ( poloha : pevná ; hore : 0 ; vľavo : 0 ; šírka : 100 % ; výška : 100 % ; pozadie : rgba (52 , 54 , 66 , 0,9 ) ; z-index : 3 ; pretečenie- y : auto ; kurzor : ukazovateľ ; viditeľnosť : skrytý ; nepriehľadnosť : 0 ; -prechod webkitu: nepriehľadnosť 0,3 s 0 , viditeľnosť 0 0,3 s ; -moz-prechod: nepriehľadnosť 0,3 s 0 , viditeľnosť 0 0,3 s ; prechod : nepriehľadnosť 0,3 s 0 , viditeľnosť 0 0,3 s ; ) .cd-user-modal .is-visible ( viditeľnosť : viditeľné ; nepriehľadnosť : 1 ; -webkit-transition: nepriehľadnosť 0,3 s 0 , viditeľnosť 0 0 ; -moz-prechod: nepriehľadnosť 0,3 s 0 , viditeľnosť 0 0 ; prechod : nepriehľadnosť 0,3 s 0 , viditeľnosť 0 0 ; ) .cd-user-modal .is-visible .cd-user-modal-container ( -webkit-transform: translateY(0) ; -moz- transform: translateY(0) ; -ms-transform: translateY(0) ; -o-transform: translateY(0) ; transform : translateY(0) ; ) .cd-user-modal-container ( poloha : relatívna ; šírka : 90 %; max-wi dth: 600px; pozadie : #FFF ; okraj : 3em auto 4em ; kurzor: auto; border-radius : 0,25em ; -webkit-transform: translateY(-30px ) ; -moz-transform: translateY(-30px ) ; -ms-transform: translateY(-30px ) ; -o-transform: translateY(-30px ) ; transform : translateY(-30px ) ; -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; prechodová vlastnosť : transformácia; -trvanie-prechodu webkitu: 0,3 s ; -moz-transition-duration: 0,3s ; trvanie prechodu: 0,3 s; ) .cd-user-modal-container .cd-switcher : after ( content : "" ; display : table ; clear : both; ) .cd-user-modal-container .cd-switcher li ( šírka : 50 % ; float : left ; text-align : center ; ) .cd-user-modal-container .cd-switcher li: first-child a ( border-radius : .25em 0 0 0 ; ) .cd-user-modal-container .cd -switcher li: last-child a ( border-radius : 0 .25em 0 0 ; ) .cd-user-modal-container .cd-switcher a ( display : block ; width : 100 % ; height : 50px ; line-height : 50px ; background : #d2d8d8 ; color : #809191 ; ) .cd-user-modal-container .cd-switcher a.selected ( background : #FFF ; color : #505260 ; ) @media only screen and (min-width : 600px ) ( .cd-user-modal-container ( margin : 4em auto ; ) .cd-user-modal-container .cd-switcher a ( height : 70px ; line-height : 70px ; ) ) .cd-form ( výplň: 1. 4em; ) .cd-form .fieldset ( position : relativní ; margin : 1.4em 0 ; ) .cd-form .fieldset : first-child ( margin-top : 0 ; ) .cd-form .fieldset : last-child ( margin- bottom : 0 ; ) .cd-form label ( font-size : 14px ; font-size : 0.875rem ; ) .cd-form label.image-replace ( /* nahradiť text ikonou */ displej : inline-block ; poloha : absolútna ; vľavo: 15px horná časť: 50 %; dole : auto ; -webkit-transform: translateY(-50% ) ; -moz-transform: translateY(-50% ) ; -ms-transform: translateY(-50%) ; -o-transform: translateY(-50%) ; transform : translateY(-50%) ; výška: 20px šírka: 20px pretečeniu: skryté; zarážka textu: 100% ; Biely vesmír: nowrap; farba: transparentný; textový tieň: žiadny; pozadie-opakovať: bez opakovania; pozícia na pozadí: 50% 0 ; } /* Ikony vstupných polí */ .cd-formaštítok .cd-username { obrázok na pozadí: url("../img/cd-icon-username.svg") ; } .cd-formaštítok .cd email { obrázok na pozadí: url("../img/cd-icon-email.svg") ; } .cd-formaštítok .cd-heslo { obrázok na pozadí: url("../img/cd-icon-password.svg") ; } .cd-forma vstup { marža: 0 ; vypchávka: 0 ; hraničný polomer: 0,25 em; } .cd-forma vstup .plná šírka { šírka: 100% ; } .cd-forma vstup .má vypchávky { vypchávka: 12 pixelov 20 pixelov 12 pixelov 50 pixelov; } .cd-forma vstup .má-hranicu { hranica: 1px pevný #d2d8d8; -vzhľad webovej súpravy : žiadny; -moz-vzhľad : žiadny; -ms-vzhľad : žiadny; -o-vzhľad : žiadny; vzhľad : žiadny; } .cd-forma vstup .má-hranicu: zameranie { farba okraja: #343642 ; krabicový tieň: 0 0 5 pixelov rgba(52 , 54 , 66 , 0.1 ) ; obrys: žiadny; } .cd-forma vstup .má-chybu { hranica: 1px pevný #d76666; } .cd-forma vstup [ typu = heslo ] { /* priestor pre tlačidlo skryť */ čalúnenie vpravo: 65 pixelov; } .cd-forma vstup [ typu = Predložiť ] { vypchávka: 16 pixelov 0 ; kurzor: ukazovateľ; pozadie: #2f889a; farba: #FFF; font-weight: tučný; hranica: žiadny; -vzhľad webovej súpravy : žiadny; -moz-vzhľad : žiadny; -ms-vzhľad : žiadny; -o-vzhľad : žiadny; vzhľad : žiadny; } .nechytať .cd-forma vstup [ typu = Predložiť ] : vznášať sa, .nechytať .cd-forma vstup [ typu = Predložiť ] : zameranie { pozadie: #3599ae; obrys: žiadny; } .cd-forma .skryť-heslo { displej: inline blok; pozíciu: absolútne; správny: 0 ; top: 0 ; vypchávka: 6px 15 pixelov; hranica-vľavo: 1px pevný #d2d8d8; top: 50% ; dno: auto; -webkit-transform : preložiťY (-50% ) ; -moz-transformovať : preložiťY (-50% ) ; -ms-transform : preložiťY (-50% ) ; -o-premeniť : preložiťY (-50% ) ; transformovať: preložiťY (-50% ) ; veľkosť písma: 14 pixelov; veľkosť písma: 0,875 rem; farba: #343642 ; } .cd-forma .cd-chybová-správa { displej: inline blok; pozíciu: absolútne; vľavo: -5 pixelov; dno: -35 pixelov; pozadie: rgba(215 , 102 , 102 , 0.9 ) ; vypchávka: .8em; z-index: 2 ; farba: #FFF; veľkosť písma: 13 pixelov; veľkosť písma: 0,8125 rem; hraničný polomer: 0,25 em; /* zabrániť kliknutiam a dotykom */ ukazovateľ-udalosti: žiadny; viditeľnosť: skryté; nepriehľadnosť: 0 ; -webkit-prechod : nepriehľadnosť 0,2 s 0 , viditeľnosť 0 0,2 s; -moz-prechod : nepriehľadnosť 0,2 s 0 , viditeľnosť 0 0,2 s; prechod: nepriehľadnosť 0,2 s 0 , viditeľnosť 0 0,2 s; } .cd-forma .cd-chybová-správa:: po { /* roh chybového hlásenia */ obsahu: "" ; pozíciu: absolútne; vľavo: 22 pixelov; dno: 100% ; výška: 0 ; šírka: 0 ; hranica-vľavo: 8px pevný transparentný; hranica-pravá: 8px pevný transparentný; okraj-dole: 8px pevný rgba(215 , 102 , 102 , 0.9 ) ; } .cd-forma .cd-chybová-správa.je-viditeľné { nepriehľadnosť: 1 ; viditeľnosť: viditeľné; -webkit-prechod : nepriehľadnosť 0,2 s 0 , viditeľnosť 0 0 ; -moz-prechod : nepriehľadnosť 0,2 s 0 , viditeľnosť 0 0 ; prechod: nepriehľadnosť 0,2 s 0 , viditeľnosť 0 0 ; } @media iba obrazovka a (min-šírka: 600 pixelov) { .cd-forma { vypchávka: 2 em; } .cd-forma .fieldset { marža: 2 em 0 ; } .cd-forma .fieldset: prvorodené dieťa { margin-top: 0 ; } .cd-forma .fieldset: posledné dieťa { okraj-dole: 0 ; } .cd-forma vstup .má vypchávky { vypchávka: 16 pixelov 20 pixelov 16 pixelov 50 pixelov; } .cd-forma vstup [ typu = Predložiť ] { vypchávka: 16 pixelov 0 ; } } .cd-form-správa { vypchávka: 1,4 em 1,4 em 0 ; veľkosť písma: 14 pixelov; veľkosť písma: 0,875 rem; line-height: 1.4 ; zarovnanie textu: stred; } @media iba obrazovka a (min-šírka: 600 pixelov) { .cd-form-správa { vypchávka: 2 em 2 em 0 ; } } .cd-forma-spodna-sprava { pozíciu: absolútne; šírka: 100% ; vľavo: 0 ; dno: -30 pixelov; zarovnanie textu: stred; veľkosť písma: 14 pixelov; veľkosť písma: 0,875 rem; } .cd-forma-spodna-sprava a { farba: #FFF; text-dekorácia: zdôrazniť; } .cd-close-form { /* tlačidlo štýlu X vpravo hore */ displej: blokovať; pozíciu: absolútne; šírka: 40 pixelov; výška: 40 pixelov; správny: 0 ; top: -40 pixelov; pozadie: url("../img/cd-icon-close.svg") bez opakovania stred stred; zarážka textu: 100% ; Biely vesmír: nowrap; pretečeniu: skryté; } @media iba obrazovka a (min-šírka: 1170 pixelov) { .cd-close-form { displej: žiadny; } } #cd prihlásenie, #registrácia na cd, #cd-reset-password { displej: žiadny; } #cd prihlásenie.je-vybrané, #registrácia na cd.je-vybrané, #cd-reset-password.je-vybrané { displej: blokovať; }

cd-user-modal ( pozícia: pevná; horná: 0; ľavá: 0; šírka: 100 %; výška: 100 %; pozadie: rgba(52, 54, 66, 0,9); z-index: 3; pretečenie-y : auto; kurzor: ukazovateľ; viditeľnosť: skrytý; nepriehľadnosť: 0; -prechod webkitu: nepriehľadnosť 0,3 s 0, viditeľnosť 0 0,3 s; -moz-prechod: nepriehľadnosť 0,3 s 0, viditeľnosť 0 0,3 s; prechod: nepriehľadnosť 0,3 s 0, viditeľnosť 0 0,3 s; ), viditeľnosť 0 0; prechod: nepriehľadnosť 0,3 s 0, viditeľnosť 0 0; ): translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0) ; transform: translateY(0); ) .cd-user-modal-container ( pozícia: relatívna; šírka: 90 %; max-width: 600px; pozadie: #FFF; margin: 3em auto 4em; kurzor: auto; border- polomer: 0,25 em; -webkit-transform: translateY(-30px); -moz-transform: preložiťY(-30px); -ms-transform: translateY(-30px); -o-transform: translateY(-30px); transform: translateY(-30px); -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; prechodová vlastnosť: transformácia; -trvanie-prechodu webkitu: 0,3 s; -moz-transition-duration: 0,3s; trvanie prechodu: 0,3 s; ) .cd-user-modal-container .cd-switcher:after ( content: ""; display: table; clear: both; ) .cd-user-modal-container .cd-switcher li ( šírka: 50 %; float : left; text-align: center; ) .cd-user-modal-container .cd-switcher li:first-child a ( border-radius: .25em 0 0 0; ) .cd-user-modal-container .cd -switcher li:last-child a ( border-radius: 0 .25em 0 0; ) .cd-user-modal-container .cd-switcher a ( display: block; width: 100%; height: 50px; line-height : 50px; pozadie: #d2d8d8; farba: #809191; ) .cd-user-modal-container .cd-switcher a.selected ( background: #FFF; color: #505260; ) @media only screen a (min-width : 600px) ( .cd-user-modal-container ( margin: 4em auto; ) .cd-user-modal-container .cd-switcher a ( výška: 70px; line-height: 70px; ) ) .cd-form ( výplň: 1,4em; ) .cd-form .fieldset ( poloha: relatívna; okraj: 1,4em 0; ) .cd-form .fieldset:first-child ( margin-top: 0; ) .cd-form .fieldset:last -child ( margin-bottom: 0; ) .cd-form label ( font-siz e: 14px; veľkosť písma: 0,875rem ) .cd-form label.image-replace ( /* nahradenie textu ikonou */ display: inline-block; position: absolute; left: 15px; top: 50%; bottom: auto; -webkit-transform: translateY(- 50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); výška : 20px; šírka: 20px; pretečenie: skryté; odsadenie textu: 100 %; medzera: nowrap; farba: priehľadná; tieň textu: žiadny; opakovanie na pozadí: bez opakovania; pozícia na pozadí: 50 % 0; ) /* Ikony vstupných polí */ .cd-form label. cd-username ( background-image: url(". ./img/cd-icon-username.svg"); ) .cd-form label.cd-email ( background-image: url(../img/cd-icon-email.svg"); ) .cd -form label.cd-password ( background-image: url("../img/cd-icon-password.svg"); ) .cd-form input ( margin: 0; padding: 0; border-radius: 0,25 em; ) .cd-form input.full-width (šírka: 100 %; ) .cd-form input.has-padding ( padding: 12px 20px 12px 50px; ) .cd-form input.has-border ( border: 1px pevné #d2d8d8; -webkit-vzhľad: žiadny; -moz-vzhľad: žiadny; -ms-vzhľad: žiadny; -o-vzhľad: žiadny; vzhľad: žiadny; ) .cd-form input.has-border:focus ( border -color: #343642; box-shadow: 0 0 5px rgba(52, 54, 66, 0,1); obrys: žiadny; ) .cd-form input.has-error ( border: 1px solid #d76666; ) .cd- vstup formulára ( /* priestor pre tlačidlo Skryť */ padding-right: 65px; ) .cd-form input ( padding: 16px 0; kurzor: ukazovateľ; pozadie: #2f889a; farba: #FFF; váha písma: tučné; okraj : žiadny; -vzhľad-webkitu: žiadny; -vzhľad-moz: žiadny; -vzhľad-ms: žiadny; -o-vzhľad: žiadny; vzhľad: žiadny; ) .no-touch .cd-form input:hover, .no-touch .cd-form input:focus ( background: #3599ae; obrys: žiadny; ) .cd-form .hide-password ( display: inline-block; pozícia: absolútna; pravá: 0; horná: 0; výplň: 6 pixelov 15 pixelov; ľavý okraj: 1 pixel plná #d2d8d8; horná časť: 50 %; spodná časť: auto; -webkit-transform: translateY(-50%); -moz- transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); font-size: 14px; font- veľkosť: 0,875rem; farba: #343642; ) .cd-form .cd-error-message ( display: inline-block; position: absolute; left: -5px; bottom: -35px; background: rgba(215, 102, 102, 0,9); padding: 0,8 em; z-index: 2; farba: #FFF; font-size: 13px; font-size: 0,8125rem; border-radius: 0,25 em; /* zabránenie kliknutiam a dotykom */ ukazovateľ -udalosti: žiadne; viditeľnosť: skryté; nepriehľadnosť: 0; -prechod webkitu: nepriehľadnosť 0,2 s 0, viditeľnosť 0 0,2 s; -moz-prechod: nepriehľadnosť 0,2 s 0, viditeľnosť 0 0,2 s; prechod: nepriehľadnosť 0,2 s 0, visi schopnosť 0 0,2s; - vľavo: 8px plné priehľadné; border-right: 8px plné priehľadné; border-bottom: 8px plné rgba(215, 102, 102, 0,9); ) .cd-form .cd-error-message.is-visible ( nepriehľadnosť: 1 ; viditeľnosť: viditeľné; -prechod-webkitu: nepriehľadnosť 0,2 s 0, viditeľnosť 0 0; -moz-prechod: nepriehľadnosť 0. 2s 0, viditeľnosť 0 0; prechod: nepriehľadnosť 0,2s 0, viditeľnosť 0 0; ) @media only screen a (min-width: 600px) ( .cd-form ( padding: 2em; ) .cd-form .fieldset ( margin: 2em 0; ) .cd-form .fieldset:first-child ( margin- top: 0; ) .cd-form .fieldset:last-child ( margin-bottom: 0; ) .cd-form input. has-padding ( padding: 16px 20px 16px 50px; ) .cd-form input ( padding: 16px 0; ) ) .cd-form-message ( padding: 1,4em 1,4em 0; font-size: 14px; font-size: 0,875rem; line-height: 1,4; text-align: center; ) @media only screen and (min-width: 600px) ( .cd-form-message ( padding: 2em 2em 0; ) ) .cd-form-bottom-message ( position: absolute; width: 100%; left: 0; bottom: -30px; text-align: center; font-size: 14px; font-size: 0,875rem; ) .cd-form-bottom-message a ( color: #FFF; text-decoration: underline; ) .cd-close-form ( / * pravé horné tlačidlo X štýl */ zobrazenie: blok; pozícia: absolútna; šírka: 40px; výška: 40px; vpravo: 0; hore: -40px; pozadie: url("../img/cd-icon-close.svg ") stred bez opakovania; odsadenie textu: 100 %; white-space: nowrap; prepad: skrytý; ) Obrazovka @média a (minimálna šírka: 1170px) ( .cd-close-form (zobrazenie: žiadne; ) ) #cd-login, #cd-signup, #cd-reset-password (zobrazenie: žiadne; ) # cd-login.is-selected, #cd-signup.is-selected, #cd-reset-password.is-selected ( display: block; )

V efekte prechodu vzhľadu bolo pridané oneskorenie, aby modálne okno po zatvorení vybledlo.

Poznámka:. Veľkosť písma všetkých vstupných polí je štandardne nastavená na 16 pixelov. Zabráni sa tak automatickej úprave mierky, ku ktorej dochádza pri prezeraní na mobilných zariadeniach.

Nachádza sa autorská, buržoázna verzia pluginu. Na tom istom mieste si môžete stiahnuť originál.
Ruská verzia, môžete si ju vziať z môjho disku Yandex.Disk, všetko potrebné súbory, starostlivo zabalené v jednom archíve, predtým si nezabudnite pozrieť plne prispôsobený živý príklad tohto úžasného doplnku jQuery v akcii:

So všetkou úctou, Andrew

1. Plugin na vytváranie online formulárov "jFormer"

Tvorba kontaktných formulárov: spätná väzba, komentovanie, prihlasovací formulár, registračný formulár s kontrolou správnosti zadaných údajov.

2. Registračný formulár krok za krokom pomocou jQuery

Úhľadný tvar s plnenie krok za krokom. Nižšie je uvedený indikátor dokončenia formulára.

3. Formulár krok za krokom

Vyplnenie formulára v niekoľkých krokoch s kontrolou správnosti vyplnenia.

4. Kontaktný formulár pre stránku

Kontrola správnosti vstupných informácií sa vykonáva „za behu“ pred odoslaním správy pomocou javascriptu.

5. Animované prepínanie medzi formulármi na jQuery

Animované prepínanie pomocou jQuery medzi prihlasovacím formulárom, registračným formulárom a poľom na obnovenie hesla. Na ukážkovej stránke kliknite na žltý odkaz, aby ste videli efekt.

6. Pop-up PHP kontaktný formulár

Takéto riešenie možno použiť na to, aby návštevník mohol rýchlo kontaktovať vlastníka stránky z ktorejkoľvek stránky. Na ukážkovej stránke kliknutím na šípku nižšie otvoríte formulár.

7. PHP registračný formulár pomocou jQuery a CSS3

Formulár s overením zadaných informácií.

8. Registračný formulár PHP v štýle Facebooku

Pekný registračný formulár implementovaný pomocou CSS, PHP a jQuery.

9. Kontaktný formulár jQuery "SheepIt".

Implementovaná možnosť pridania nových polí pred odoslaním správy.

10. Efektný kontaktný formulár AJAX

Pekný prehľadný formulár spätnej väzby PHP s overením zadávaných informácií. Technológie: CSS, PHP, jQuery.

11. Autorizačný/registračný systém na stránke

12. Formulár na odoslanie

S overením správnosti plnenia.

13. Plugin jQuery "Contactable".

Implementovať formulár odchádzajúcej spätnej väzby na rýchle odoslanie správy.