TheDavis Blog » Archivo para la etiqueta `jquery´

Validación de comentarios en WordPress con jQuery

thedavis — Wed, 29 Jun 2011 13:02:27 +0000

¡Ya era hora de aplicarlo al blog! :)

Con un poco de jQuery y algo de CSS se consigue una fácil validación por parte de cliente de los datos del formulario.

Cinco técnicas CSS/jQuery muy útiles

thedavis — Wed, 29 Jun 2011 06:34:22 +0000

Hace unos días publicaron en Smashing Magazine cinco técnicas muy útiles basadas en CSS y jQuery.

Efectos de texto animados,
Animar imágenes sin GIFs,
Menús drop-down,
Navegación Slideshow,
Iconos animados en botones sobre el evento hover.

Personalmente el mejor tip de todo el post es el número 2, el animar un fondo sin usar un gifs, es impressive.

Que disfrutéis ;)

Vía: Smashing Magazine

jquery.scrollable y ¡haz scroll!

thedavis — Thu, 16 Apr 2009 19:07:31 +0000

Con Scrollable podemos dar un buen toque de dinamismo a nuestros proyectos web. Este plugin de jQuery Es muy sencillo de utilizar y el resultado, realmente da mucha usabilidad para mostrar contenidos que de forma tradicional generarían mucho “scroll” o no podría mostrarse por cuestiones de espacio disponible.

Se puede configurar tanto para scroll vertical como para scroll horizontal. [+DEMOS]

Lanzamiento de jQuery 1.3

thedavis — Wed, 14 Jan 2009 18:53:47 +0000

Hoy, día 14 de Enero de 2009, jQuery 1.3 ha sido lanzado. Incluye muchas mejoras que implican una mejor velocidad en todos los aspectos. Realmente este framework de javascript se está convirtiendo en una herramienta imprescindible.

Sizzle

La incorporación de Sizzle hace que la velocidad en búsqueda de selectores se vea incrementada y ofrezca unos resultados muy interesantes.

Inyección HTML reescrita

Los métodos jQuery.html(), .append(),.. encargados de generar HTML dinámicamente han sido reescritos obteniendo una mejora de un 6x en algunos casos sobre jQuery 1.2.6.

Descargar

jQuery Minified / jQuery Regular

Usar con Google Ajax Libraries

Los que usan Google Ajax Libraries para no tener que alojar jQuery en sus servidores lo pueden usar mediante esta URL: http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js

Easy Slider, jQuery Plugin

thedavis — Thu, 08 Jan 2009 06:30:49 +0000

Un nuevo plugin para nuestro querido jQuery que cada día me sorprende más, por lo menos a mi. En este caso Easy Slider nos permite hacer slides de tantas imágenes como queramos verticalmente y horizontalmente. Es fácil configurarlo por CSS y es muy vistoso.

Demos

[Descarga]

Fuente: Xyberneticos

jQuery Alert Dialogs, reemplazo para alert(), prompt() y confirm()

thedavis — Fri, 02 Jan 2009 09:28:19 +0000

jQuery Alert Dialogs, es un reemplazo muy elegante para las funciones alert(), prompt() y confirm() de javascript.

Uso

Simplemente hay que añadir estas líneas al :

<script src="/path/to/jquery.js" type="text/javascript"></script>
<script src="/path/to/jquery.ui.draggable.js" type="text/javascript"></script>
 
<script src="/path/to/jquery.alerts.js" type="text/javascript"></script>
<link href="/path/to/jquery.alerts.css" rel="stylesheet" type="text/css" media="screen" />

Una vez cargados los ficheros necesarios podremos llamar a las funciones personalizadas:

Alert()

jAlert es el sustituto de alert() y nos muestra alerta básica con un botón de aceptar para que el usuario acepte que ha visto el aviso.

jAlert('This is a custom alert box', 'Alert Dialog');

jPrompt()

Sustituto de prompt() que nos da la opción de introducir un valor desde la ventana.

jPrompt('Type something:', 'Prefilled value', 'Prompt Dialog', function(r) {
    if( r ) alert('You entered ' + r);
});

jConfirm()

Alternativa a confirm() en la que ofrecemos al usuario la opción de aceptar o cancelar una acción.

jConfirm('Can you confirm this?', 'Confirmation Dialog', function(r) {
    jAlert('Confirmed: ' + r, 'Confirmation Results');
});

Demo

Los chicos de jQuery Alert Dialogs han publicado una demo para que podamos ver que tal funciona este sistema.

Consejo de Uso

anieto2k ha propuesto utilizar estas modificaciones de las funciones clásicas de javascript utilizando un sistema que convierta esta opción en una alternativa y que en caso de fallar nos muestre su funcionalidad original, pienso que es muy buena idea:

//alert()
var oAlert = alert;
function alert(txt, title) {
    try {
        jAlert(txt, title);
    } catch (e) {
        oAlert(txt);
    }
}
alert("Hola", "Prueba");
 
//confirm()
var oConfirm = confirm;
function confirm(txt, title, func) {
    try {
        jConfirm(txt, title, func);
    } catch (e) {
        if (oConfirm (txt, title)) func();
    }
}
confirm("Hola", "Prueba", function(){
	alert("Prueba", "Superada");
});
 
//prompt()
var oPrompt = prompt;
function prompt(txt, input, title, func){
    try {
        jPrompt(txt, input, title, func);
    } catch(e) {
        func(prompt(txt, input, title));
    }
}
prompt("Hola", "Valor", "Prueba", function(r) {
	if (r) alert(r);
});

Fuente: anieto2k

Leopard online con jQuery

thedavis — Wed, 01 Oct 2008 11:30:23 +0000

Simular Leopard en una aplicación online mediante el uso de jQuery.

[Demo]

Fuente: anieto2k

Parallax, imagenes 3D con jQuery

thedavis — Tue, 30 Sep 2008 20:02:47 +0000

Desde anieto2k rescato este plugin para jQuery llamado Parallax.

Instalación

Para instalar parallax, deberemos tener informar, mediante tags

Funcionamiento

jQuery('#parallax').jparallax(options);

Como casi todos los plugins de jQuery, podemos indicar que elemento será sobrecargado con la nueva funcionalidad, para ello lo indicaremos mediante el selecto jQuery() y encadenamos el método jparallax() al que le podemos pasar una serie de parámetros.

Descargar

Actualmente es una versión BETA, la 0.3, por lo que puede dar algún problema en algún navegador. Lo podemos descargar directamente de la página del proyecto.

Fuente: anieto2k

jQuery AlphaNumeric

thedavis — Fri, 12 Sep 2008 18:52:07 +0000

jQuery AlphaNumeric es un plugin que te permite restringir los caracteres que se pueden escribir en un input o textarea. La idea es evitar complicadas validaciones, si un campo solo puede ser númerico ¿para qué dejar escribir letras? o viceversa, si sólo se deben introducir letras…¿para qué dejar entrar todos los caracteres del teclado?

Funciones

alphanumeric – permite letras y números
alpha – sólo permite letras
numeric – sólo permite números

Propiedades

allow – añade caracteres permitidos
ichars – define caracteres personalizados a prevenir
allcaps – sólo permite mayúsculas
nocaps – sólo permite minúsculas

Ejemplos

Sólo permitir letras: $(‘.sample1′).alphanumeric();
Sólo permitir números: $(‘.sample4′).numeric();
No permitir “.” “1″ “a”: $(‘.sample6′).alphanumeric({ichars:’.1a’});

[Demo] [Descargar]

Existe también un plugin llamado Numeric, pero que solo previene la entrada de números, no puedes optar entre uno u otro. Es interesante disponer de las dos opciones en un mismo plugin. Por otra parte también os recuerdo que existe el plugin llamado Masked Input que te permite generar máscaras de entrada personalizadas. Funciona perfecto para introducir números IP, teléfonos, cuentas bancarias…

Todo sobre jQuery

thedavis — Fri, 15 Aug 2008 09:58:18 +0000

Interesante recopilación sobre jQuery con todo lo que necesitas saber sobre este framework. Tutoriales, ejemplos y sitios dónde encontrar más ayuda.

Fuente: anieto2k