Pluginuri jQuery pentru aspectul formularelor


Există o serie de pluginuri jQuery care dau aspect (styling) formularelor. Teoretic ele ar trebui să ne scutească de o muncă de cosmetizare via CSS. În practică însă – ca să fiu mai exact în practica mea – lucrurile nu stau chiar aşa. Am încercat câteva pluginuri (la unele nici nu le mai ştiu numele şi linkurile) şi mai ales dacă ai deja CSS propriu inevitabil dai de conflicte şi e ceva de muncă până le împaci. Mai jos am ales două pluginuri şi am construit un formular simplu. Chiar şi aşa, formular gol şi fără CSS, au apărut unele probleme de alinieri. Nu probleme insurmontabile, dar oricum finisări se mai cer.

imagine

[HTML]<html>
<head>
</head>
<body>
<form method="post">
<table width=600><tr><td>
<label>Camp:</label> <input type="text" size="20"><br><br>
<label>Camp:</label> <input type="text" size="20"><br><br>
<label>Optiuni:</label> <input type="checkbox"><label>prima</label>
<input type="checkbox"><label>a doua</label>
<input type="checkbox"><label>a treia</label><br><br>
<label>Optiuni:</label> <input type="radio"><label>prima</label>
<input type="radio"><label>a doua</label>
<input type="radio"><label>a treia</label><br><br>
<label>Lista:</label> <select size=1><option>Valoare 1</option>
<option>Valoare 2</option>
<option>Valoare 3</option>
<option>Valoare 4</option></select>
</td><td>
<label>Informatii:</label><br><br>
<textarea cols=30 rows=8></textarea><br>
<input type="submit" value="Trimite datele">
</td></tr></table>
</form>
</body>
</html>[/HTML]

jqTransform schimbă formularul ca mai jos. Destul de elegant, nu? Şi tot ce a trebuit de făcut (veţi vedea mai jos codul) a fost să indic spre un CSS şi două JavaScripturi şi să definesc comportamentul pentru o anumită clasă. I-am spus, hehe, „dichisit”.

imagine

<html>
<head>
<link rel="stylesheet" type="text/css" href="jqtransform.css"> 
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.jqtransform.js"></script>
<script type="text/javascript">
$(function() {
    $("form.dichisit").jqTransform();
});
</script>
</head>
<body>
<form method="post" class="dichisit">
<table width=600><tr><td>
<label>Camp:</label> <input type="text" size="20"><br><br>
<label>Camp:</label> <input type="text" size="20"><br><br>
<label>Optiuni:</label> <input type="checkbox"><label>prima</label>
<input type="checkbox"><label>a doua</label>
<input type="checkbox"><label>a treia</label><br><br>
<label>Optiuni:</label> <input type="radio"><label>prima</label>
<input type="radio"><label>a doua</label>
<input type="radio"><label>a treia</label><br><br>
<label>Lista:</label> <select size=1><option>Valoare 1</option>
<option>Valoare 2</option>
<option>Valoare 3</option>
<option>Valoare 4</option></select>
</td><td>
<label>Informatii:</label><br><br>
<textarea cols=30 rows=8></textarea><br>
<input type="submit" value="Trimite datele">
</td></tr></table>
</form>
</body>
</html>

O alternativă este NiceForms, un plugin jQuery scris de un român. Vedeţi mai jos cum arată formularul după ce am folosit pluginul. Tot un CSS şi două JavaScripturi de inserat, doar că fără vreun alt cod, căci implicit efectul se aplică pe formularele cu clasa „niceform”.

imagine

[HTML]<html>
<head>
<link rel="stylesheet" type="text/css" href="niceforms-default.css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="niceforms.js"></script>
</head>
<body>
<form method="post" class="niceform">
<fieldset>
<legend>Personal info</legend>
<table width=600><tr><td>
<label>Camp:</label><br><input type="text" size="20"><br><br>
<label>Camp:</label><br><input type="text" size="20"><br><br>
<label>Optiuni:</label> <input type="checkbox"><label>prima</label>
<input type="checkbox"><label>a doua</label>
<input type="checkbox"><label>a treia</label><br><br>
<label>Optiuni:</label> <input type="radio"><label>prima</label>
<input type="radio"><label>a doua</label>
<input type="radio"><label>a treia</label><br><br>
<label>Lista:</label> <select size=1><option>Valoare 1</option>
<option>Valoare 2</option>
<option>Valoare 3</option>
<option>Valoare 4</option></select>
</td><td>
<label>Informatii:</label><br><br>
<textarea cols=30 rows=8></textarea><br>
<input type="submit" value="Trimite datele">
</td></tr></table>
</fieldset>
</form>
</body>
</html>[/HTML]

Folosiţi/recomandaţi anumite pluginuri jQuery pentru styling? Dacă da, vă rog să îmi spuneţi. Dacă nu, şi doriţi şi alte alternative, consultaţi articole precum 25+ jQuery Plugins that enhance and beautify HTML form elements, Form Elements: 40+ CSS/JS Styling and Functionality Techniques sau 20 jQuery Plugins and Tutorials to Enhance Forms.


Apreciază articolul:

1 stea2 stea3 stea4 stea5 stea (1 evaluări, media: 5.00 din 5)
Loading...Loading...

0 comentarii


Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile necesare sunt marcate *

Poți folosi aceste etichete HTML și atribute: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>