<!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/
