jQuery plugins - Fancy Sliding Form
aug 27

Fancy Sliding Form

Látványos és helytakarékos űrlap plugin

Verzió: nincs adat
Kiadás dátuma: 2010/06/07
Fejlesztő: Codrops
Liszensz: nincs adat

Bevezető

Nagyobb, összetettebb űrlapok kivitelezésénél lehet hasznos, ahol esetleg a bekérendő adatok mennyisége, esetleg témája miatt kénytelenek lennénk azt több oldalon megvalósítani. A plugin az űrlapot a slider technikával kombinálja, így nem csak helyet spórolhatunk meg, de az űrlap is igen látványos lesz.

A plugin része még egy kifejezetten puritán validáció is, ami abban merül ki, hogy nem lehet kitöltetlen mező (minimum egy karakter kötelező). Maga az elv, illetve a hibás/helyes kitöltés megjelenítése ötletes, így ha esetleg a plugin-t egy kifejezetten validációra gyártott plugin-nal ötvözzük, elég látványos és jól használható eredményt kapunk.

Implementálás

CSS

            <link type="text/css" rel="stylesheet" href="style.css" media="screen" />
          

JavaScript

            <script type="text/javascript" src="js/jquery.js"></script>
            <script type="text/javascript" src="js/sliding.form.js"></script>
          

Használat

Az űrlap elkészítésénél az egész form-ot egy #wrapper konténerbe kell ágyaznunk. Mivel a form-on belül több "lapunk" van, ezeket el kell különíteni egymástól, így ezek külön .step blokkokba kerülnek, amelyeket egy #steps blokk fog össze:

            <div id="wrapper">
              <div id="steps">
                <form action="#" post="method">
                  <fieldset class="step">
                    ...
                  </fieldset>
                  <fieldset class="step">
                    ...
                  </fieldset>
                  <fieldset class="step">
                    ...
                  </fieldset>
                </form>
              </div>
            </div>
          

Szükség van egy submit gombra is, amely a #registerButton azonosítót kapja:

            <button id="registerButton" type="submit">elküld</button>
          

Vissza van még a lapok közti váltáshoz a navigációra (#navigation), amely szintén a #wrapper blokkba kerül, a #steps blokk alá:

            <div id="navigation" style="display:none;">
              <ul>
                <li class="selected"><a href="#">Első lap</a></li>
                <li><a href="#">Második lap</a></li>
                <li><a href="#">Harmadik lap</a></li>
                <li><a href="#">Negyedik lap</a></li>
              </ul>
            </div>