redenLabel jQuery plugin

Version: 1.0

License: jQuery License

Author: Gergő Németh

Size: 2KB

Leírás

Ez a jQuery plugin funkcionalitásban megegyezik a méltán népszerű In-Field Labels jQuery Plugin tudásával, csupán pár javítás lett eszközölve (a plugin bár funkcionálisan ugyan azt tudja, de az alapoktól újra lett írva).

Előnyök az eredeti plugin-nel szemben

• Ha egy mezőbe írunk szöveget, majd kitöröljük, akkor az eredeti pluginban nem jelenik meg újra a label szövege.

• Az eredeti plugin nem állítja helyre a labeleket a reset gomb megnyomásakor.

• Az eredeti plugin nem kezeli a webkit autocomplete funkcióját, és láthatóan hagyja a labelt.

• Az eddigi munkáim során az eredeti plugin használatakor tapasztaltam egyéb hibákat amikor a labelt tartlamazó divet animáltam, ezek a hibák a saját pluginnál nem jöttek elő.

Használat

HTML

<p>
  <label for="valami_id">Label Text</label>
  <input type="text" name="field_id" id="valami_id" value="" />
</p>

CSS

CSS-el csupán a label pozícionálását kell elvégezni, hogy a label pont az input mező vagy textarea mező szövege fölé essen.

label {
  top: 0;
  left: 0;
}

A plugin automatikusan a következő stílusokat alkalmazza:

/* csak azokra a p elemekre, melyekben szerepel olyan label HTML tag, melyre meghívtuk a plugint! */
p {
  position: relative;
}

/* csak azokra a label elemekre, melyekre alkalmazva lett a plugin! */
label {
  /* amennyiben a labelhez tartozó inut mező már tartalmaz default szöveget, abban az esetben az opacity értéke 0 */
  opacity: 1;
  /* amennyiben a labelhez tartozó inut mező már tartalmaz default szöveget, abban az esetben a display értéke none */
  display: block;
  cursor: text;
  position: absolute;
}

Javascript

$(document).ready(function(){
  $('label').redenLabel();
});

Beállítások

Hasonlóan az eredeti pluginhez, itt is 2 beállítási lehetőség van:

$('label').redenLabel({
  fadeOpacity: 0.5, // milyen átetszőségre halványodjon a label
  fadeDuration: 300 // mennyi idő alatt halványodjon a label
});

Az opciók megadása nem kötelező az alapértelmezett értékek a fenti példában található értékek.

Tervezett módosítások a jövőben

• HTML5 tagek támogatása

Changelog

Version 1.0

• Első kiadás