Tag Archive for 'jquery'

JQuery Plugin: inserire delle informazioni sui campi input

Di seguito vi allego il mio primo plugin in JQuery.
Questo plugin riempie determinati campi input di tipo “text”, con delle informazioni.
Quando l’utente clicca sul campo, il contenuto scompare.
Se l’utente lascia vuoto il campo, in automatico viene riempito con l’informazione di default.

Ecco come usare il plugin.

Step 1: richiamo script e foglio di stile associati al plugin

<link rel="stylesheet" href="preset.jquery.css" type="text/css" media="all" />
<script type="text/javascript" src="preset.jquery.js"></script>

Step 2: richiamo la funzione del plugin sui campi che voglio

<script>
$(function () {  
	$('#txtName').preset({"preset":"Nome","myclass":"red"});
	$('#txtSurname').preset({"preset":"Cognome"});
	$('#txtCity').preset({"preset":"Città"});
}); 
</script>

La pagina si presenterà così:

<!DOCTYPE>
<html>
<head>
 
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css" type="text/css" media="all" />
 
<link rel="stylesheet" href="preset.jquery.css" type="text/css" media="all" />
<script type="text/javascript" src="preset.jquery.js"></script>
 
<script>
$(function () {  
	$('#txtName').preset({"preset":"Nome","myclass":"red"});
	$('#txtSurname').preset({"preset":"Cognome"});
	$('#txtCity').preset({"preset":"Città"});
}); 
</script>
</head>
<body>
 
<h1>JQuery Plugin: Preset</h1>
 
<input type='text' id='txtName'  /><br >
<input type='text' id='txtSurname'  /><br >
<input type='text' id='txtCity'  /><br ><br >
 
</body>
</html>

Come si usa il Plugin

$('#objId').preset({
	"preset":"Nome", // il testo che si vuole far apparire nel campo input, quando questo è vuoto
	"myclass":"red"  // la classe da usare, per la scritta di preset (dipende dal file css)
});

Demo
Download Plugin
Download Css