Archivo de la categoría: JavaScript/AJAX

15 recursos útiles relacionados con jQuery

En esta página podeis encontrar enlaces a 15 recursos de ayuda relacionados con jQuery ideales para empezar una primera toma de contacto, enlaces, artículos realmente útiles, plugins, etc. Algunos enlaces que proponen fueron no hace demasiado mi primera toma de contacto con este espectacular framework.

15 Resources To Get You Started With jQuery From Scratch

jQuery – plugin imgPreview

imgPreview es un plugin para jQuery con el que podremos realizar previsualizaciones de imágenes a modo de tooltip. La forma de uso es sencilla, usamos el tag <a> donde queramos aplicar el tooltip indicando qué imagen aparecerá en el mismo al pasar el ratón por el enlace tooltip:


<a href="https://websenior.wordpress.comg/img/mi-imagen.jpg">tooltip</a>

Disponemos de varias opciones de configuración, como establecer el ancho del tooltip:


$('a').imgPreview({
    imgCSS: {
        width: '200px'
    }
});

En la página oficial podemos documentarnos sobre otras opciones que proporciona el plugin.

Página oficial jQuery imgPreview

jQuery – Efecto esquina doblada

Curioso plugin para jQuery con el que podemos lograr un efecto similar a la esquina de un folio en nuestro website. Incorporamos la imagen sobre la que queremos aplicar el efecto y añadimos el código:

$(document).ready(function(){  
$( '#target' ).fold();  
)};

})

Debemos asegurarnos de disponer de jQuery y de jQuery UI.

The Sexy Curls jQuery Plugin.

Lo vi en Sentido Web.

jQuery 1.3

Tenemos disponible la versión 1.3 de jQuery, popular framework de JavaScript para interactuar con nuestros documentos HTML.

Dentro de las mejoras de esta nueva versión destacaría la delegación de eventos y la mejora en la búsqueda de selectores (punto clave para cualquier framework de JavaScript que se precie) gracias al uso de Sizzle como motor.

jQuery 1.3

jQuery 1.3

jQuery 1.3

jQuery PageSlide

jQuery PageSlide es un plugin para jQuery que permite realizar desplazamientos horizontales de nuestra página (sin crear scrollbar) creando una segunda zona de visualización, la ventaja es que esta zona puede mostrarse/ocultarse por el usuario con un código realmente sencillo y a diferencia de otros plugins como LightBox, el contenido principal no deja de perder su importancia al oscurecerse.


$('a.pageslide').pageSlide({
            width: "300px"
        });

Web de jQuery PageSlide

Repositorio de código Javascript / AJAX

Ajaxrain es un importante repositorio de código JavaScript, en la mayoría de los casos haciendo uso de AJAX.

Podemos colaborar con nuestros scripts propios si lo deseamos.

Ajaxrain.

Mostrar código fuente en HTML / XHTML

Habremos visto en muchas webs y blogs de wordpress (en este mismo también) que algunas veces se muestran en webs código fuente con un estilo elegante y práctico, puesto que muestra barras de scroll y funcionalidades como copiar al portapapeles, abrir en otra ventana, numeración de líneas, y visualizar mejor o imprimir.

Syntaxhighlighter

Syntaxhighlighter

Hay un código que podremos incluir en nuestros proyectos. Este código se llama Syntaxhighlighter, ha sido creado por Alex Gorbatchev, y es 100% JavaScript.

Desde el siguiente enlace podremos descargarlo y obtener más información:

Syntaxhighlighter.

Referencia online jQuery 1.2

Una página que nos puede servir de gran ayuda en nuestros desarrollo jQuery. Nos presenta de manera visual una referencia completa de las funcionalidades de este framework. A día de hoy lo encontramos actualizado a la versión 1.2.6.

Referencia online jQuery 1.2.

Abrir enlaces en ventanas nuevas (target=”_blank”) en XHTML

Más de uno se habrá llevado una sorpresa, una amarga sorpresa, al hacer su primer proyecto en XHTML Strict e intentar usar el atributo target en la etiqueta de enlace (target=”_blank”)

<a href="http://www.websenior.es" target="_blank">WebSenior</a>

habrá podido observar como dicho código hace lo que tiene que hacer, abrir el enlace en una nueva ventana, pero si ha intentado validar su web como XHTML Strict el validador le habrá dicho que el atributo target no es válido.

Que no cunda el pánico, usando un poco de Javascript (o muy poco Javascript si usamos un Framework) tendremos solucionado nuestro problema.

Lo primero, evidentemente, es eliminar el target=”_blank” de todo nuestro proyecto, y sustituirlo por rel=”external”.

Lo siguiente es programar en Javascript que queremos el comportamiento de target=”_blank” en las etiquetas a que sean rel=”external”, esto se consigue con el siguiente código, que luego comento.

function linkExternos() {
	if (!document.getElementsByTagName) return;
	var elemsA = document.getElementsByTagName("a");
	for (var i=0; i < elemsA.length; i++) {
		var elemA = elemsA&#91;i&#93;;
		if (elemA.getAttribute("href") && elemA.getAttribute("rel") == "external")
			elemA.target = "_blank";
	}
}
window.onload = linkExternos;
&#91;/sourcecode&#93;

La función <strong>linkExternos </strong>recoge todos los elementos a de nuestro documento XHTML, para cada uno de ellos, se recorre todos sus atributos, en caso de que ese elemento <strong>a</strong> tenga un atributo <strong>href</strong> y otro <strong>rel </strong>con valor <strong>external</strong>, se especifica que su <strong>target</strong> (destino) sea <strong>_blank</strong>. Por último se asigna la función al evento <strong>onload</strong> para que se ejecute cuando el documento sea cargado por el navegador.

Si usamos un framework de Javascript podremos ahorrarnos bastante código. En caso de <strong>jQuery </strong>quedaría así:


$(document).ready(function(){
	$("a[@rel='external']").attr("target", "_blank");
});

Pasar array PHP a JavaScript (JSON)

JSON (JavaScript Object Notation) es un formato de datos con notación JavaScript que últimamente está de moda gracias al auge de las tecnologías AJAX. Digamos que es una alternativa al uso de XML, que libera de peso la respuesta AJAX en algunos casos (no requiere el cierre de etiqueta), hace una mejor representación de estructura de datos y requiere menor coste de procesamiento.

Un caso típico en el que deberíamos usar JSON es la petición de un listado de datos mediante AJAX. Imaginemos que la petición se hace a un archivo PHP (a partir de la versión 5.2  tenemos funcionalidades relacionadas con JSON disponible y activadas por defecto) que genera una estructura datos del listado en la variable $l_a_data con el siguiente formato:

[
Array
(
    [0] => Array
           (
             [nombre] => "Francisco"
             [apellidos] => "Torres"
           )

    [1] => Array
           (
             [nombre] => "Juanma"
             [apellidos] => "Torres"

           )
)

Podríamos fácilmente entonces convertir esta estructura array a una cadena con el formato JSON con la sentencia:


$l_str_json = json_encode($l_a_data);

y enviar esta cadena JSON como response del proceso AJAX. En este caso lo que enviamos es:

[
   {
      "nombre":"Francisco","apellidos":"Torres",
      "nombre":"Juanma","apellidos":"Torres"
   }
]

Para analizar  esta cadena recibida en el código JavaScript simplemente haremos:

var l_a_json = eval('(' + responseJSON + ')');

Con lo que ya tenemos un array en JavaScript con los datos provenientes del response del AJAX invocado que generó los datos de nuestro listado.

Un inconveniente de este método es el uso de eval() en una estructura de datos. Esto nos puede presentar problemas de seguridad, así que sólo deberíamos usarlo en entornos de confianza. Como alternativa y con el objetivo de evitar problemas de seguridad, debemos utilizar algún parseador de JSON de JavaScript, se pueden encontrar en json.org (parte inferior de la página, apartado JavaScript)