<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Highlight jQuery plugin</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
// definición de la función
$.fn.highlight = function(options){
// puede recibir un array de parámetros nombrados
// invocamos a una función genérica que hace el merge
// entre los recibidos y los de por defecto
var opts = $.extend({}, $.fn.highlight.defaults, options);
// para cada componente que puede contener el objeto jQuery que invoca a esta función
this.each(function(){
// asignamos a la asignación del foco la invocación a una función
$(this).focus(function(){
// que asigna al fondo el color recibido o el asginado por defecto
$(this).css({"background" : opts.background});
});
// asignamos a la perdida del foco la invocación a una función
$(this).blur(function(){
// que asigna al fondo un color blanco
$(this).css({"background" : "white"});
});
});
};
// definimos los parámetros junto con los valores por defecto de la función
$.fn.highlight.defaults = {
// para el fondo un color por defecto
background: '#a6cdec'
};
</script>
<script type="text/javascript">
$(document).ready(function(){
//$("form :input:visible").highlight();
$("form :input:visible").highlight({background: 'red'});
});
</script>
</head>
<body>
<h1>Highlight jQuery plugin</h1>
<form method="post" action="" name="test1">
<table>
<tbody>
<tr>
<td> <label for="name">Name</label> </td>
<td> <input id="name" type="text" /> </td>
</tr>
<tr>
<td> <label for="country">Country</label> </td>
<td> <input id="country" type="text" /> </td>
</tr>
<tr>
<td> <label for="password">Password</label> </td>
<td> <input id="password" type="password" /> </td>
</tr>
</tbody>
</table>
</form>
<br />
<small>Mueve el foco entre los campos del formulario</small>
</body>
</html>
test rck:
http://jsfiddle.net/ric47121/rAbRG/
No hay comentarios:
Publicar un comentario