prihlasenyprihlasit | registrovat

Animované prepínanie formulára

V tomto tutoriáli si vytvoríme jednoduchý animovaný formulár s tromi najčastejšími formulármi. Myšlienkou je neopúšťať stránku, keď užívateľ prejde na iný formulár, ale namiesto toho sa objaví v rovnakom kontajnery, rozšírením alebo zmenšením rozmerov podľa nového formulára.

Zaistíme, aby bol formulár použiteľný aj keď je JavaScript vypnutý, v tomto prípade skočíme na druhú formulárovú stránku.

Takže začneme tým, že vytvoríme štruktúru troch formulárov.

HTML

Vytvoríme tri rôzne formuláre, prihlasovací formulár, registračný formulár a formulár pre zabudnuté heslo s jedným input poľom. Všetky budú mať rozdielne veľkosti a počet input polí.

Najskôr, si vytvoríme wrapper pre všetky tri formuláre.

Potom pridáme jednotlivé formulárové elementy do wrappera a vložíme potrebné input polia. Každý formulár bude mať nadpis a submit tlačidlo. Registračný formulár, ktorý bude naším prvým formulárom, bude mať dva stĺpce, ktoré budú zarovnané vedľa seba.

Registrácia

Teraz pridáme prihlasovací formulár. Tento formulár bude zobrazený, keď užívateľ navštívi stránku. To je dôvod, prečo sme pridali ďalšiu špeciálnu triedu active.


A nakoniec pridáme formulár pre zabudnuté heslo:

Zabudnuté heslo

Odkazy, ktoré odkazujú na iný formulár, budú zdieľať triedu linkform a tiež aby sme vedeli, ktorý formulár zobraziť keď užívateľ klikne na link, pridáme referenciu do rel atribútu. Napríklad odkaz "Nemáte ešte účet? Zaregistrujte sa" bude mať rel atribút hodnotu "register", pretože, keď klikneme na odkaz chceme zobraziť registračný formulár.

Ako ste si možno všimli, href atribút bude smerovať na statickú HTML stránku s príslušným formulárom. Odkaz z predchádzajúcej ukážky bude odkazovať na index.html, ktorý obsahuje náš prihlasovací formulár. Tento odkaz využijeme, keď je JavaScript vypnutý.

Teraz okoreníme tieto formuláre použitím niektorých CSS3 vlastností.

CSS

Začnime s form wrapperom. Dáme mu bielu farbu pozadia, ktorú uvidíme keď prepíname formulár:

.form_wrapper{
        background:#fff;
        border:1px solid #ddd;
        margin:0 auto;
        width:350px;
        font-size:16px;
        -moz-box-shadow:1px 1px 7px #ccc;
        -webkit-box-shadow:1px 1px 7px #ccc;
        box-shadow:1px 1px 7px #ccc;
}

V záhlavie každého formulára bude mať nasledujúci dizajn:

.form_wrapper h3{
        padding:20px 30px 20px 30px;
        background-color:#444;
        color:#fff;
        font-size:25px;
        border-bottom:1px solid #ddd;
}

Chceme, aby formuláre neboli hneď viditeľné, preto im pridáme triedu, ktorá nám povie, kedy je formulár aktívny a mal by byť viditeľný:

.form_wrapper form{
        display:none;
        background:#fff;
}
form.active{
        display:block;
}

Teraz si definujeme šírku každého formulára. V našej JavaScript funkcii budeme animovať wrapper na správnu veľkosť:

form.login{
        width:350px;
}
form.register{
        width:550px;
}
form.forgot_password{
        width:300px;
}

Stĺpce v registračnom formulári budú zarovnané vedľa seba:

.form_wrapper .column{
        width:47%;
        float:left;
}

Odkazy na všetky naše formuláre budú mať nasledujúci dizajn:

.form_wrapper a{
        text-decoration:none;
        color:#777;
        font-size:12px;
}
.form_wrapper a:hover{
        color:#000;
}

Label elementy sú predvolene inline. Chceme ale, aby naše labely boli block elementy:

.form_wrapper label{
        display:block;
        padding:10px 30px 0px 30px;
        margin:10px 0px 0px 0px;
}

Použijeme na naše input polia nejaké super CSS3 vlastnosti a pridáme gradient ako pozadie a tiež zaujímavý box-shadow:

.form_wrapper input[type="text"],
.form_wrapper input[type="password"]{
        border: solid 1px #E5E5E5;
        margin: 5px 30px 0px 30px;
        padding: 9px;
        display:block;
        font-size:16px;
        width:76%;
        background: #FFFFFF;
        background:
                -webkit-gradient(
                        linear,
                        left top,
                        left 25,
                        from(#FFFFFF),
                        color-stop(4%, #EEEEEE),
                        to(#FFFFFF)
                );
        background:
                -moz-linear-gradient(
                        top,
                        #FFFFFF,
                        #EEEEEE 1px,
                        #FFFFFF 25px
                        );
        -moz-box-shadow: 0px 0px 8px #f0f0f0;
        -webkit-box-shadow: 0px 0px 8px #f0f0f0;
        box-shadow: 0px 0px 8px #f0f0f0;
}
.form_wrapper input[type="text"]:focus,
.form_wrapper input[type="password"]:focus{
        background:#feffef;
}

Spodná časť každého formulára bude podobná ako pozadie hlavičky:

.form_wrapper .bottom{
        background-color:#444;
        border-top:1px solid #ddd;
        margin-top:20px;
        clear:both;
        color:#fff;
        text-shadow:1px 1px 1px #000;
}

Odkazy budú mať nasledujúci dizajn:

.form_wrapper .bottom a{
        display:block;
        clear:both;
        padding:10px 30px;
        text-align:right;
        color:#ffa800;
        text-shadow:1px 1px 1px #000;
}
.form_wrapper a.forgot{
        float:right;
        font-style:italic;
        line-height:24px;
        color:#ffa800;
        text-shadow:1px 1px 1px #fff;
}
.form_wrapper a.forgot:hover{
        color:#000;
}

Pridáme wrapperu float pre checkbox "trvalé prihlásenie":

.form_wrapper div.remember{
        float:left;
        width:140px;
        margin:20px 0px 20px 30px;
        font-size:11px;
}
.form_wrapper div.remember input{
        float:left;
        margin:2px 5px 0px 0px;
}

Tlačidlo submit bude mať veľmi jemný inset tieň, nič špeciálne:

.form_wrapper input[type="submit"] {
        background: #e3e3e3;
        border: 1px solid #ccc;
        color: #333;
        font-family: "Trebuchet MS", "Myriad Pro", sans-serif;
        font-size: 14px;
        font-weight: bold;
        padding: 8px 0 9px;
        text-align: center;
        width: 150px;
        cursor:pointer;
        float:right;
        margin:15px 20px 10px 10px;
        text-shadow: 0 1px 0px #fff;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        border-radius: 3px;
        -moz-box-shadow: 0px 0px 2px #fff inset;
        -webkit-box-shadow: 0px 0px 2px #fff inset;
        box-shadow: 0px 0px 2px #fff inset;
}
.form_wrapper input[type="submit"]:hover {
        background: #d9d9d9;
        -moz-box-shadow: 0px 0px 2px #eaeaea inset;
        -webkit-box-shadow: 0px 0px 2px #eaeaea inset;
        box-shadow: 0px 0px 2px #eaeaea inset;
        color: #222;
}

A to je všetko z designu! Poďme pridať trochu Rock'n'Rollu pomocou jQuery!

JavaScript

Cieľom je animovať na veľkosť nového formulára a prepnúť naň. Takže, najprv nacachujeme niektoré elementy:

//formular wrapper (obsahuje vsetky formulare)
var $form_wrapper       = $('#form_wrapper'),

//aktualny formular je ten s triedou "active"
$currentForm    = $form_wrapper.children('form.active'),

//prepne formularove odkazy
$linkform               = $form_wrapper.find('.linkform');

Získame šírku a výšku všetkých formulárov a uložíme ich na neskôr, keď budeme chcieť animovať:

$form_wrapper.children('form').each(function(i){
        var $theForm    = $(this);
        //riesi inline display none problem ked sa pouziva fadeIn/fadeOut
        if(!$theForm.hasClass('active'))
                $theForm.hide();
        $theForm.data({
                width   : $theForm.width(),
                height  : $theForm.height()
        });
});

Teraz budeme volať funkciu, ktorá nastaví rozmery wrappera pre jeden z týchto formulárov:

setWrapperWidth();

Keď klikneme "prepínací odkaz", budeme chcieť skryť aktuálny formulár, pretože vieme, že prepneme na iný. Budeme animovať šírku a výšku wrapper formulára na šírku a výšku nového formulára. Akonáhle animácia skončí, zobrazíme nový formulár:

$linkform.bind('click',function(e){
        var $link       = $(this);
        var target      = $link.attr('rel');
        $currentForm.fadeOut(400,function(){
                //odstrani triedu "active" z aktualneho formulara
                $currentForm.removeClass('active');
                //novy aktualny formular
                $currentForm= $form_wrapper.children('form.'+target);
                //animuje wrapper
                $form_wrapper.stop()
                                         .animate({
                                                width   : $currentForm.data('width') + 'px',
                                                height  : $currentForm.data('height') + 'px'
                                         },500,function(){
                                                //novy formular ziska "active"
                                                $currentForm.addClass('active');
                                                //zobrazi novy formular
                                                $currentForm.fadeIn(400);
                                         });
        });
        e.preventDefault();
});

Funkcia, ktorá nastavuje šírku wrappera, jednoducho nastaví jeho CSS vlastnosť. Chceme zabezpečiť, aby mal wrapper nastavenú správnu šírku a výšku, keď načítame stránku.

function setWrapperWidth(){
        $form_wrapper.css({
                width   : $currentForm.data('width') + 'px',
                height  : $currentForm.data('height') + 'px'
        });
}

V ukážke sme vypli submit tlačidlo. Ak ju použijete, budete musieť kontrolovať, ktorý formulár je odosielaný a dať triedu active formuláru, na ktorý chcete prepnúť, napríklad:

$form_wrapper.find('input[type="submit"]')
                         .click(function(e){
                                e.preventDefault();
                         });

A je to! Dúfame, že ste si užili tutoriál a niečo ste sa aj naučili.

http://tympanus.net/codrops/2011/01/06/animated-form-switching/

celkom 0

Komentáre

Zatiaľ žiadne komentáre

© 2009 Shaddow admin hosting od VIPHosting