Esta vez escribiré acerca de domsearch.js un plugin de jQuery desarrollado por @julio_ody.
Este plugin nos da la posibilidad de realizar busquedas ya sea en tablas, amplios listados, etc. en tiemo real y sin la necesidad de tener que recargar la página.
A continuación os dejó un ejemplo. Se trata de una tabla con todos los pilotos de formula 1 y sus respectivas escuderías, mediante el buscador podemos localizar rapidamente al piloto, ya sea por su nombre, escudería o ambos.
| Pilotos |
Escudería |
| Sebastian Vettel |
Red Bull |
| Mark Webber |
Red Bull |
| Lewis Hamilton |
McLaren |
| Jenson Button |
McLaren |
| Fernando Alonso |
Ferrari |
| Michael Schumacher |
Mercedes GP |
| Nico Rosberg |
Mercedes GP |
| Nick Heidfeld |
Renault |
| Vitaly Petrov |
Renault |
| Rubens Barrichello |
Williams |
| Pastor Maldonado |
Williams |
| Adrian Sutil |
Force India |
| Paul di Resta |
Force India |
| Kamui Kobayashi |
Sauber |
| Sergio Pérez |
Sauber |
| Sébastien Buemi |
Toro Rosso |
| Jaime Alguersuari |
Toro Rosso |
| Jarno Trulli |
Lotus |
| Heikki Kovalainen |
Lotus |
| Narain Karthikeyan |
Hispania RT |
| Vitantonio Liuzzi |
Hispania RT |
| Timo Glock |
Virgin |
| Jerome d’Ambrosio |
Virgin |
Leer el resto de esta entrada »
Si lo que queremos es escalar imágenes según las dimensiones del navegador de nuestros usuarios una buena opción es utilizar el plugin de jquery Maximage desarrollado por Aaron Vanderzwan.
Maximage escala las imágenes deseadas a su máxima anchura acorde con el tamaño del navegador, el ratio de la imagen y otras opciones.
Podéis ver un ejemplo pinchando aquí. Redimensionar vuestro navegador y fijaros en como la imagen irá escalándose automáticamente.
Para empezar a utilizar este útil plugin tan sólo tendréis que descargarlo y hacer la llamada en el <head> de nuestro documento html. No os olvidéis de hacer antes la llamada a jquery
<script src="jquery.pack.js" type="text/javascript"></script>
<script src="jquery.maximage.js" type="text/javascript"></script>
A continuación insertar el siguiente script:
<script>
$(document).ready(function(){
$('img.className').maxImage({
isBackground: true
});
});
</script>
Mediante la opción isBackground: true ajustamos la imagen al navegador. Por último insertaremos la clase utilizada en el script (en nuestro caso className) en la imagen que deseamos maximizar
<img class="className" src="foto.jpg" alt="descripción de la foto" />
Alguna de las opciones configurables del plugin son las siguientes:
Leer el resto de esta entrada »
Fxcanvas es una implementación del elemento canvas de HTML5 para Internet Explorer. El proyecto esta desarrollado por Google y la librería tiene los siguientes requisitos:
Requisitos
- Flash Player 9+ en Internet Explorer (Algunas versiones a partir de la 10.1 puede que no funcionen correctamente)
- IE 5.5 +. (IE9 no lo soporta por ahora)
Fxcanvas nos permite trabajar solo con gráficos en dos dimensiones.
Uso
Descargar el comprimido en el directorio publico del servidor y pegar las siguientes llamadas js en la sección head de nuestro documento.
<head>
<script type="text/javascript" src="/public/path/jooscript.js"></script>
<script type="text/javascript" src="/public/path/fxcanvas.js"></script>
<!--[if IE]><script type="text/javascript" src="/public/path/flash_backend.js"></script><![endif]-->
<comment><script type="text/javascript" src="/public/path/canvas_backend.js"></script></comment>
</head>
Manuales de canvas
Si todavía no habéis trasteado demasiado con canvas podéis echar un vistazo a estos tutoriales
Ejemplo
A continuación realizaré un ejemplo muy básico en el que usaremos tanto imagenes como textos. Pongamos por ejemplo que nos piden realizar una gráfica con los resultados de las votaciones del balón de oro.
ver ejemplo
descargar ejemplo (86 Kb)
Leer el resto de esta entrada »
Después de 120 días sin escribir :X, por fin me he dignado a escribir un post que espero que le pueda servir a alguien de ayuda, por lo menos a un eulalio que yo me se XD. Voy a escribir un post sobre como hacer validaciones en tiempo real, es decir, no esperaremos a que el usuario envíe el formulario sino que iremos validando cada uno de los campos según se vaya introduciendo la información. Para ver esto hare una demo apoyándome en la librería jQuery, que no solo nos da la posibilidad de realizar fáciles validaciones al momento sino que además nos permite jugar con una gran variedad de atractivos efectos.
Ejemplo de validaciones con jQuery
Como ya he dicho en la introducción queremos conseguir una validación de formulario en tiempo real, es decir cada vez que un campo del formulario pierda el foco, automáticamente comprobaremos que el campo modificado es correcto, además comprobaremos que todos los campos que preceden a este no se encuentran vacios y que la información es correcta. Con esto mejoraremos la experiencia de usuario ya que avisamos en el mismo momento de cada uno de los errores que está cometiendo al introducir los datos en los campos del formulario y estaremos evitando el tener que realizar varios envíos del form ya que se produjeron fallos en la validación de campos obligatorios.
Dentro de un formulario podemos fijar una serie de campos que sean de tipo obligatorio y sin los cuales el envío del formulario no es posible, pues bien en el ejemplo además de definir campos de tipo obligatorios y mostrar los errores producidos por los mismos, mantendremos informado al usuario con avisos de que la información introducida en un campo no obligatorio no es del todo correcta. En el ejemplo el usuario podrá enviar el formulario en caso de tener avisos pero no en el caso de que el formulario cuente con errores en campos de tipo obligatorio. En todo momento tendremos visible un listado de errores que mostrará al usuario el estado en el que se encuentra cada uno de los campos del formulario.
Este es un ejemplo de referencia y no aplicable a cualquier tipo de formulario ya que según vaya variando el código HTML del formulario habrá que realizar adaptaciones en el código JavaScript, de todas formas podréis ver que gracias a la sencillez de jQuery la adaptación de código según el formulario no es tan complicada.
A continuación os muestro como quedaría el formulario con las validaciones:
Descargar ejemplo: demo_validaciones.js (39,52kb)
Leer el resto de esta entrada »