Tag Archive for: jquery

19Aug 2010 0 Comments

Jquery: Plugin para validar al estilo HTML5

Categories: javascript - Tags: ,

Anteriormente había hablado de un plugin de Bassistance para validar, pero esta opción me parece muy interesante ya que usa las propiedades nativas de HTML5, aunque hay algunas caracteristicas que se hacen extrañar de las que hablaré más adelante.

¿Cómo usarlo?

Lo primero es incluir el script y luego indicar que formulario debe afectar, personalmente creo que mejor es colocar un id.

1
2
3
4
5
<script>
        $(document).ready(function(){
            $('#miformulario').html5form(); // recibe un id, una clase o la etiqueta form    
        });
</script>

La forma de realizar la validación es usando las propiedades HTML5, es decir algo similar a:

1
   <input type="email" name="email" id="email"/>

¿Por qué usarlo?

Hay varios motivos:

  • Nos vamos acostumbrando a la sintaxis de HTML5
  • Incluye ciertas validaciones que no tiene el plugin de bassistance además de funciones tipo texto por defecto
  • El envío asíncrono de datos viene incluido

Puntos por pulir

  • Cuando se pega del portapapeles un texto a un textarea con un número máximo de caracteres este no se corta para validarlo
  • Los mensajes de error no son personalizables, aunque incluye por defecto mensajes en español e inglés modificables directamente sobre el código del script

Puedes ver más sobre este plugin AQUI, yo tuve problemas para acceder a dicha dirección, si no funciona en tu país usa un proxy anónimo como por ejemplo www.hidemyass.com

03May 2010 0 Comments

Firequery: Depurando jquery con firebug

Categories: javascript, Otros - Tags: , , ,

Firebug tiene excelentes herramientas para depurar código javascript sin embargo se queda corto en algunas cosas sobre todo cuando se trata de averiguar si los selectores funcionan correctamente y si nuestros eventos en realidad son considerados por jquery, es ahí donde viene otro excelente plugin del plugin llamado Firequery.

¿Cómo lo instalo?

Lo podemos descargar de la página de Addons para Firefox AQUI, si deseamos ver más detalles y darle una ojeada a su documentación en su web oficial

¿Cómo funciona?

Luego de instalarlo a simple vista no hay cambios en nuestro firebug salvo una pestaña adicional llamada jquerify en la consola, esta pestaña nos permite añadir nuestro script jquery a cualquier página web, en caso que ya exista no hará la indicación correspondiente.

Los detalles interesantes se ven la pestaña inspeccionar HTML que ahora adiciona las funciones que se viene ejecutando y los elementos afectados
En esta imagen por ejemplo estoy usando el jquery cycle para hacer un slider como vemos se ha añadido un pequeño texto adicional donde muestra la función que viene ejecutándose si le doy click me va a dar más detalles como los valores que le estoy enviando.
Firequery consola

En este segundo caso estoy usando tooltips, firequery me da información adicional, además de la función que es invocada y los parámetros que se le dan, me indica además el evento que se está utilizando (mousehover en este caso).
Firequery consola

Tiene algunas otras funciones adicionales que podemos probar en su página de ejemplo

01Feb 2010 7 Comments

Agregar Borrar campos usando ajax parte 2

Categories: AJAX - Tags: , ,

En un post anterior expliqué como se podían agregar campos usando jquery, varias personas me preguntaron como hacer para borrar un campo específico, pues es muy simple en realidad, veamos:

Agregando campos

Necesitamos hacer que se agreguen campos pero además que estos aparezcan con un link que nos permita borrarlos, además para poder identificarlos vamos a ponerle un contador.

1
2
3
4
5
emails=0;
function agregar() {
    emails=emails+1;
    $("#campos").append('<li class="email'+emails+'"><input type="text" name="email[]" size="25" />&nbsp;&nbsp;<a href="#" onclick="javascript:borrar('+emails+');">Borrar</a></li>');
}

De esta forma se creará un li con una clase email1, email2, email3, etc. y un link con un javascript que invoca a la función borrar(1), borrar(2), etc.

Borrando los campos

La función que borra los campos que ya no requerimos es muy simple, únicamente un selector jquery que busca la clase email1, email2… o la que corresponda y con remove se elimina, ese return false evita que “salte” la página cuando le damos click al link borrar.

1
2
3
4
function borrar(cual) {
    $("li.email"+cual).remove();
    return false;
}

Como ven con sólo un par de líneas ya esta funcionando, espero les sea util este post.

Demo

26Dec 2009 9 Comments

AJAX ocultar mostrar secciones de nuestro sitio

Categories: Otros - Tags: , ,

En este tutorial explicaré como hacer aparecer secciones de un formulario o cualquier otro elemento de nuestro sitio usando jquery, yo lo suelo usar cuando tengo un formulario de búsqueda y deseo mostrar opciones de búsqueda avanzada por ejemplo o también es posible usarlo a modo de acordeón

Ocultar un elemento

Si bien es cierto que podemos ocultar un elemento cualquiera lo mejor es colocar un div que agrupe el elemento o elementos que deseamos ocultar si es un formulario y estas basado en una estructura de OL/UL y LI le asignamos u ID a es LI que deseamos ocultar, nuestro código sería algo así:

1
2
3
4
5
<div id="paraocultar">
<p>Aqui el texto o elementos del formulario que se ocultarán</p>
</div>
<p>Para ocultar podemos usar link o un boton</p>
<a id="oculta">Click para ocultarlo</a>

Nuestro código jquery para detectar que se ha hecho click sería:

1
2
3
4
5
6
7
8
9
10
11
12
$(document).ready(function(){
    estado=0;                          
    $("#oculta").click(function () {
       if(estado==0) {
         $('#paraocultar').slideUp('fast');
         estado=1;
      } else {
         $('#paraocultar').slideDown('fast');
         estado=0;
      }
    });
});

//////// Actualización ///////
He modificado el script para funcionar con múltiples elementos, pueden ver el ejemplo aqui

Download - Jquery ocultar mostrar secciones
Demo

21Dec 2009 2 Comments

Jquery music player

Categories: AJAX, javascript - Tags: ,