
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:
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
Köszi a tippet!
Nemrég én is találkoztam vele és örülök, hogy most magyarul is olvashatok róla.