
Űrlap design sliding labelekkel
A héten egy nagyon tetszetÅ‘s megoldásra találtam a CSSKarma oldalán. A JQuery javascript függvénytár és a CSS kombinációjával az űrlapok cÃmeit egyszerűen csúsztathatjuk az input mezÅ‘ben. Lássuk hogy is történik ez.
Majdnem minden weboldalon használunk formokat. Az elérhetÅ‘ségnél üzenetküldéshez, belépéshez a weboldalra, de például egy webáruháznál elengedhetetlen a regisztrációs vagy megrendelési oldalakon. Nézzük ezt a megoldást, amikor a label az input mezÅ‘be van Ãrva, de kattintásra kicsúszik a mezÅ‘n kÃvülre.
1. Első lépésben hozzunk létre egy egyszerű űrlapot néhány input mezővel és elküld gombbal:
<form id="info" method="post"> <h2>Contact Information</h2> <div id="name-wrap"> <label for="name">Name</label> <input id="name" name="name" type="text" /></div> <!--/#name-wrap--> <div id="email-wrap"> <label for="email">E-mail</label> <input id="email" name="email" type="text" /></div> <!--/#email-wrap--> <div id="street-wrap"> <label for="st">Street</label> <input id="st" name="st" type="text" /></div> <!--/#street-wrap--> <div id="city-wrap"> <label for="city">City</label> <input id="city" name="city" type="text" /></div> <!--/#city-wrap--> <div id="zip-wrap"> <label for="zip">Zip code</label> <input id="zip" name="zip" type="text" /></div> <!--/#zip-wrap--> <input id="btn" name="btn" type="submit" value="submit" /> </form>
2. Csináljuk meg a formázást CSS segÃtségével:
body { font:12px/1.3 Arial, Sans-serif; } form { width:380px; padding:0 90px 20px; margin:auto; background:#f7f7f7; border:1px solid #ddd; } div { clear:both; position:relative; margin:0 0 10px; } label { cursor:pointer; display:block; } input[type="text"] { width:300px; border:1px solid #999; padding:5px; -moz-border-radius:4px; } input[type="text"]:focus { border-color:#777; } input[name="zip"] { width:150px; } /* submit button */ input[type="submit"] { cursor:pointer; border:1px solid #999; padding:5px; -moz-border-radius:4px; background:#eee; } input[type="submit"]:hover, input[type="submit"]:focus { border-color:#333; background:#ddd; } input[type="submit"]:active { margin-top:1px; }
3. Végül következzen a JQuery, ami életre kelti az űrlapunkat:
$(function(){ $('form#info .slider label').each(function(){ var labelColor = '#999'; var restingPosition = '5px'; // style the label with JS for progressive enhancement $(this).css({ 'color' : labelColor, 'position' : 'absolute', 'top' : '6px', 'left' : restingPosition, 'display' : 'inline', 'z-index' : '99' }); // grab the input value var inputval = $(this).next('input').val(); // grab the label width, then add 5 pixels to it var labelwidth = $(this).width(); var labelmove = labelwidth + 5; //onload, check if a field is filled out, if so, move the label out of the way if(inputval !== ''){ $(this).stop().animate({ 'left':'-'+labelmove }, 1); } // if the input is empty on focus move the label to the left // if it's empty on blur, move it back $('input').focus(function(){ var label = $(this).prev('label'); var width = $(label).width(); var adjust = width + 5; var value = $(this).val(); if(value == ''){ label.stop().animate({ 'left':'-'+adjust }, 'fast'); } else { label.css({ 'left':'-'+adjust }); } }).blur(function(){ var label = $(this).prev('label'); var value = $(this).val(); if(value == ''){ label.stop().animate({ 'left':restingPosition }, 'fast'); } }); }) });
Az eredeti cikket megtalálhatjátok a CSSKarma honlapján a következÅ‘ cÃmen: Sliding labels, illetve a demot ezen a cÃmen: demo



Köszi a tippet!
Nemrég én is találkoztam vele és örülök, hogy most magyarul is olvashatok róla.