Archivo categoría jquery

jQuery dentro de entradas y páginas de WordPress

Por Fran - Diseño web, jquery, Tips, Wordpress - 4 junio, 2011

Desde que empecé a trabajar con WordPress eché de menos poder usar jQuery en las entradas y las páginas del blog. A nivel de tema está muy bien, pero hay ciertas operaciones que sólo son necesarias en un determinado lugar del blog, por lo que no es conveniente que el script esté en funcionamiento a nivel de tema, sino a nivel de la entrada o página donde queremos usarlo.

Para poder usar jQuery dentro de los post y páginas de WordPress necesitamos:

  1. Plugin Raw HTML
  2. Enlazar jQuery a nuestro blog (obvio)
  3. Usar jQuery en modo seguro junto con el plugin RAW HTML

1. El plugin RAW HTML nos permitirá ejecutar código directamente en nuestros post y páginas de WordPress saltándodes las restricciones por defecto que impiden cierto código HTML, javascript y CSS. Para utilizarlo tan sólo tendremos que marcar nuestro código entre los comentarios del plugin:

<!--start_raw-->
/* mi codigo */
<!--end_raw-->

2. Usaremos cualquiera de las formas de inserción de la librería jQuery en nuestro blog WordPress

3. Usaremos jQuery en modo seguro para evitar conflictos, dentro de los comentarios de RAW HTML. El modo seguro implica cambiar el símbolo del dólar $() por jQuery()

Podemos ejecutar el script directamente en cualquier punto de la entrada o página:

<!--start_raw-->
<script type="text/javascript">
jQuery('p').click(function(){slideUp('fast');});
</script>
<!--end_raw-->

O enlazar hacia un script (donde también tendremos que usar jQuery en modo seguro):

<!--start_raw-->
<script type="text/javascript" src="url_hacia_script.js"></script>
<!--end_raw-->

Si queremos usar el dólar $(), podemos hacerlo así, de forma segura:

jQuery(function($){
       /* nuestro código usando $() */
});

Bibliografía

, ,

No hay Comentarios

Plugin AlphaNumeric de jQuery. Controlar caracteres en campos de formulario

Por Fran - jquery, Recursos, Tips - 13 enero, 2011

Con este plugin podremos controlar fácilmente los caracteres que un usuario puede introducir en inputs y textareas de formularios. Descargar plugin AlphaNumeric

Aquí vemos unos ejemplos de uso:

1. Sólo caracteres alfanuméricos:

$('.campo1').alphanumeric();

2. Sólo caracteres alfanuméricos, coma (,) punto (.) y espacio ( ):

$('.campo2').alphanumeric({allow:"., "});

3. Sólo aceptará letras minúsculas:

$('.campo3').alpha({nocaps:true});

4. Sólo números:

$('.campo4').numeric();

5. Sólo números y punto (.):

$('.campo5').numeric({allow:"."});

6. Regla personalizada que evita caractreres como punto (.), uno (1) y a (a)

$('.campo6').alphanumeric({ichars:'.1a'});

Funciones API

  • alphanumeric() – permite caracteres de tipo letra y numéricos
  • alpha() – permite sólo caracteres de tipo letra.
  • numeric() – permite sólo caracteres numéricos

Propiedades API

  • allow – añade caracteres excluidos de la regla de prohibición
  • ichars – define una serie de caracteres no permitidos
  • allcaps – permite sólo letras mayúsculas
  • nocaps – permite sólo letras minúsculas

Descargar plugin AlphaNumeric

, , , ,

No hay Comentarios

Tip jQuery: obtener valor de checkbox sólo si ha sido seleccionado

Por Fran - Diseño web, jquery - 17 octubre, 2010

jquery write less do more. Framework javascript
Cuando trabajamos con formularios y jQuery nos resulta muy útil el método .val(). Con él podemos recuperar el valor de cualquier campo de nuestro formulario.

Por ejemplo, si tenemos este input:

< input type="text" name="nombre" id="nombre" />

Podremos obtener su valor así:
$(‘#nombre’).val();

Pero, ¿cómo podemos obtener el valor de un checkbox SÓLO cuando haya sido seleccionado? Si tenemos este checkbox:

< input type="checkbox" name="condiciones" id="condiciones" value="acepto" />

$('#condiciones').val();//SIEMPRE devolverá 'acepto', haya sido o no seleccionado

Si vamos a enviar el formulario a través de jQuery, debemos tener cuidado al aplicar .val() a nuestro checkbox, ya que siempre enviaríamos su value, independientemente de que haya sido seleccionado o no. Para evitar este problema debemos usar el filtro :checked. Con este filtro sólo recogeremos el valor del checkbox si ha sido seleccionado:

$('#condiciones:checked').val();

, ,

6 Comentarios