Archivo de la etiqueta: jQuery

JavaScript,Programación,Web

Comprobar si existe un elemento en un Array con jQuery

Deja un comentario

Si queremos comprobar si existe un elemento en un array de Javascript podemos usar el método .inArray() de jQuery. Este método es muy parecido a la función indexOf().

Este metodo devuelve -1 cuando no encuentra el elemento y el numero de indice si lo encuentra. Hay que tener en cuenta que este método devuelve 0 si detecta el primer elemento del array, por eso a la hora de realizar la función es conveniente no hacer la comparación con verdadero o falso, y hay que hacerla con -1. Podemos usar un ultimo parámetro si queremos comprobar la existencia de ese valor en ese indice, si existe devuelve 1, si no existe devuelve 0.

Uso: $.inArray(valor, array [,indice])

var colores = ['Azul', 'Rojo', 'Verde', 'Amarillo'];
$.inArray('Verde', colores); //devuelve 2
$.inArray('Azul', colores); // devuelve 0
$.inArray('Rojo', colores, 1); // devuelve 1
$.inArray('Rojo', colores, 2); // devuelve -1
$.inArray('Morado', colores);// devuleve -1

Mas Info: https://api.jquery.com/jQuery.inArray/

Anuncio publicitario
JavaScript,Programación

Animaciones de Hide y Show con jQuery

Deja un comentario

Uno de los efectos a la hora de distribuir el contenido dentro de una pagina web es el de ocultar y mostrar, el .show() y el .hide() de jQuery. Este efecto, a mi modo de entender, queda mas visual si le aplicamos un efecto con jQuery UI. Una manera simple de aplicar estos métodos con efecto es el uso de .slideUp() y .fadeOut() para ocultar y .slideDown() y .fadeIn() para mostrar.

El slideUp() lo que hace es ocultar el contenido con un efecto que hace subir el texto hacia el párrafo superior ocultándose, y slideDown() hace aparecer el texto por debajo del párrafo superior.

El .fadeIn() lo que hace es desvanecer el contenido y el fadeOut() lo contrario.

A estos 4 métodos le podemos pasar como parámetro el tiempo en milisegundos que queremos que dure este, o bien slow, normal, fast, o no pasarle ningún parámetro para que lo haga a velocidad normal. Os dejo un ejemplo con estos 4 efectos

https://jsfiddle.net/rubenlacasa/fw5x54qo/

Mas Info: http://api.jquery.com/category/effects/

JavaScript,Programación

ScrollMagic – Plugin de jQuery de efectos para el scroll

Deja un comentario

Estoy deseando poder empezar un proyecto en el cual pueda encajar este plugin, el cual, nos permite realizar efectos de animación según avanzamos en nuestra pagina web. No os perdáis la pagina de demostración del plugin.

http://janpaepke.github.io/ScrollMagic/

JavaScript,Programación

20 Plugins Tipograficos jQuery

Deja un comentario

Os dejo aquí un enlace de la web de speckyboy en la cual hay un recopilatorio con 20 plugins de jQuery para aplicar efectos, controlar como van a mostrarse las fuentes en otros dispositivos y como se van a alinear estas.

http://speckyboy.com/2014/02/10/jquery-typography-plugins

 

JavaScript,Programación

jQuery Geocoding y Places Autocomplete Plugin

1 comentario

Gracias a este plugin vamos a poder usar el api de google places de una manera mas sencilla de lo habitual. Tiene opciones de solo autocompletar, para poder tener las direcciones bien formateadas, y tiene la opción de poder visualizar en el mapa la dirección que le pasemos. Una autentica maravilla.

http://ubilabs.github.io/geocomplete/

JavaScript,Programación

jQuery-lifestream – El listado de tu vida en internet

Deja un comentario

Con este plugin de jQuery podemos generar un listado de toda nuestra vida en internet en un montón de redes sociales. Si queréis probarlo y ver todas vuestras menciones y entradas en las redes sociales ir a http://christianv.github.io/jquery-lifestream/me/ y poner vuestro usuario en las distintas redes y darle a generar.

jQuery Lifestreamhttps://github.com/christianv/jquery-lifestream

 

JavaScript,Programación

Fotorama: Galeria de imágenes con jQuery

Deja un comentario

He encontrado esta galeria fotografica basada en jQuery muy buena, muy personalizable y fácil de configurar

http://fotorama.io

JavaScript,PHP,Programación

Acceder a datos JSON con jQuery – jQuery Tips

5 comentarios

Una de las maneras para rellenar un formulario dinámicamente en base a una petición AJAX es por medio de JSON.

Supongamos el siguiente escenario. Tenemos un formulario que se tiene que autorellenar en base a una petición AJAX, por ejemplo, le pasamos el código de una persona y nos tiene que mostrar los datos.


// Fichero datos.php

$datos = array(

1 => array('nombre' => 'Yo', 'apellidos' => 'mismo'),

2 => array('nombre' => 'Tu', 'apellidos' => 'aquel'),

);

$codigo = filter_input(INPUT_POST, 'codigo', FILTER_SANITIZE_NUMBER_INT);

foreach ($datos as &$dato) {
 $dato = utf8_encode($dato);
 }
 echo json_encode($datos[$codigo]);



<!-- Fichero formulario.html -->

<form id='formulario'>
 <input type='text' id='codigo'>
 <button type='button' id='buscar'>Buscar Registro</button>
 <input type='text' id='nombre'>
 <input type='text' id='apellidos'>
</form>
<script>
$('#buscar').click(function(){
 $.post('datos.php', {codigo:$('#codigo').val()}, function(data){
 data = JSON.parse(data);
 $('#nombre').val(data.nombre);
 $('#apellidos').val(data.apellidos);
 });
 return false;
});
</script>

En este ejemplo los datos están almacenados dentro de un array, lo normal es que fueran resultado de una consulta SQL.

En el formulario pongo, por ejemplo, el 1 para obtener los datos, estos se mandan vía post al fichero de datos, antes de devolverlos los codifico con utf8_encode para que no de ningún error, luego les damos formato con json_encode, y una vez que lo recibimos los tenemos que tratar con JSON.parse para poder acceder a ellos como si fueran un objeto.

Diseño,HTML,JavaScript,Programación,Web

Obtener el valor seleccionado en un Select con jQuery – jQuery Tips

1 comentario

JQueryUIImaginemos que queremos conocer que valor hay seleccionado en un campo select, para comprobar su valor o lo que necesitemos. Para hacer esto utilizaremos val().


<select id='ciudades' name='ciudades'>

<option value='BAR'>Barcelona</option>

<option value='MAD'>Madrid</option>

<option value='ZGZ'>Zaragoza</option>

</select>

<script>

$('#ciudades').change(function(){

var ciudad = $(this).val()

alert('Has seleccionado ' + ciudad);

});
</script>

En este ejemplo nos aparece un select en el cual nos da la opción de seleccionar entre tres ciudades, cuando cambiemos el valor nos mostrara un mensaje en pantalla en el cual nos mostrara el valor del value de la ciudad seleccionada.

Enhanced by Zemanta
Diseño,HTML,JavaScript,Programación,Web

¿Por que el botón reset no vacia los campos hidden? – HTML Tips

Deja un comentario

Hoy mientras desarrollaba un formulario y comprobaba los datos que enviaba me he dado cuenta de algo que en todos los años que llevo programando no me había dado cuenta, o quizá no me había visto en esa situación. Explico el escenario, tengo un formulario en el cual pongo un rango de fechas y luego en otro campo tengo un autocompletar el cual cuando marco la selección, se queda el nombre en el campo visible y el id en un campo hidden. Al darle a buscar pues me busca los datos relacionados de ese id en ese rango de fechas. Pues bien, a la vez del botón enviar, he puesto un botón reset para limpiar el formulario, y me he dado cuenta que si por ejemplo buscaba solo entre rangos de fechas, sin buscar nada en el autocompletar, me buscaba filtrando por los datos anteriores.

Depurando he visto que si no ponía nada en el campo autocompletar ( el cual al cambiar establecía el valor en el campo hidden) este se mantenía con el valor establecido en la búsqueda anterior.

A esto uno se pregunta ¿el reset no lo borraba todos los datos de un formulario?, pues la respuesta es si y no.

Vamos en la documentación de la w3.org que nos dice acerca del estado hidden en los inputs

«El estado hidden representa un valor el cual no esta permitido que el usuario lo examine o lo manipule».

Y la definición de reset dice «El estado reset de un button representa un button que cuando se activa restablece el formulario».

Con estas definiciones, de primeras pensaríamos que no tiene sentido que al pulsar el reset  no se restablezcan los valores de un hidden, pero reflexionemos un momento y hagamosnos una pregunta ¿quien establece el valor del campo hidden? ¿el usuario? ¿o nosotros con una programación? La respuesta es la segunda, el usuario no establece el valor del campo hidden ni lo puede modificar, y la acción del reset la efectúa el usuario, por lo tanto, no puede modificar el valor del hidden.

Para solucionar esto, si estamos usando jQuery podemos hacerlo de una manera muy sencilla

$('button[type=reset]').click(function(){
    $('#idCampoHidden').val('');
});

En este ejemplo estoy usando button, y serviria igual poniendo input[type=reset] y luego en el nombre del campo, donde pone #idCampoHidden, lo sustituiremos por #nuestrocampohidden.
El estado hidden http://www.w3.org/community/webed/wiki/HTML/Elements/input/hidden

El estado reset http://www.w3.org/community/webed/wiki/HTML/Elements/input/reset