|

Lista de ejemplos para jQuery

ByLuis

Una de las formas que más me gusta para entender alguna librería nueva es mediante ejemplos. Si ayer realizábamos un ejemplo, con jQuery hoy os paso una pequeña lista con ejemplos donde se usa esta librería.

Similar Posts

|

Mostrar iconos en los enlaces mediante Javascript

ByLuis

Hoy he visto en varios sitios cómo poner en los enlaces un icono del tipo de archivo al que se hace referencia. Algo parecido contamos hace ya tiempo, y al igual que en el ejemplo actual, no funciona para IE6, y aunque nos pese, aún hay muchas personas que siguen usando este navegador.

Una solución es realizarlo mediante Javascript, para lo cual tan solo deberemos incluir un pequeño script en nuestras páginas. El script tiene un array con expresiones regulares que detectan determinadas href y la url del icono para incluirlo en el estilo del enlace. Además existe una función que añade al evento onload del window una función que selecciona todos los enlaces, comprueba por cada enlace si cumple alguna de las expresiones regulares y si es así modifica el estilo con el icono correspondiente.

var listaiconos = new Array();
listaiconos[listaiconos.length] = new Array(/youtube\.com\/watch\?/, "icons/icon_film.gif");
listaiconos[listaiconos.length] = new Array(/sevenload\.com\/videos\//, "icons/icon_film.gif");
...
window.onload = function() {
var enlaces = document.getElementsByTagName("A");
for (var i=0; i<enlaces.length; i++) {
var ok = false;
for (var j=0; j<listaiconos.length && !ok; j++) {
if (enlaces[i].href.match(listaiconos[j][0])) {
enlaces[i].style.paddingRight = "20px";
enlaces[i].style.backgroundImage = "url("+listaiconos[j][1]+")";
enlaces[i].style.backgroundColor = "transparent";
enlaces[i].style.backgroundRepeat = "no-repeat";
enlaces[i].style.backgroundPosition = "right center";
ok = true;
}
}
}
}

Código

Vía / Intenta

Laboratorio: eliminar HTML en cajas de texto con jQuery

ByLuis

Trasteando un poco con jQuery me ha dado por hacer una función que elimina las etiquetas HTML de una caja de texto de un formulario. Esto puede ser necesario cuando no se quiere que se introduzca HTML en un campo. Lógicamente, esto es la parte cliente, en el servidor debería haber una función similar que lo hiciera.

La función es sencilla, en cada input:text añadimos el evento change para que cuando se modifique el contenido, se ejecute la función de strip_tag, la cual crea un elemento DIV auxiliar, hago que su contenido sea el valor de la caja de texto, me quedo son con el texto e inserto este valor en el input:

$('document').ready(function() {
$(':text').change(function() {
$(this).attr('value', $('document').add('<div></div>').html($(this).attr('value')).text());
});
});

¿Dudas?, alguna. Si entre el texto pongo un <script>alert(1);</script> me ejecuta el script, algo no muy elegante. ¿Qué pasa con el elemento DIV creado?, ¿se queda en el limbo o se destruye?.

Bueno, para mis primeras pruebas con jQuery no está mal del todo.

|

XMLHttpRequest: agregador de noticias web 2.0

ByLuis

xhr.pngXMLHttpRequest es un agregador de noticias sobre Ajax, web 2.0, css, dhtml y javascript. Recoge las noticias de otros agregadores y nos las muestra.
Entre los agregadores que utiliza, nos encontramos con del.icio.us, Digg, dzone, Ajaxian, furl.net y muchos otros, algunos de los cuales no tengo muy claro si los pondría, o al menos los situaría al final de la lista. Creo que es mejor que muestren los más específicos como dzone o Ajaxian que del.icio.us.
A parte también te muestra ofertas de trabajo relacionadas con la temática web 2.0.
XMLHttpRequest
Vía / PuntoGeek

|

Cosas que no hay que hacer cuando usas AJAX

ByLuis

Siempre es bueno aprender de todo, y una de las mejores formas de aprender es de los fallos, si son los tuyos, mejor, pero si son de otros, tambien bien. En este caso, se trata de un estudio sobre Live.com y algunas cosas que han encontrado que no son buenas a la hora de seguir.

  • Cuidado con las comunicaciones: el que AJAX se conecte al servidor para refrescar la página y no nos demos cuenta, tampoco quita que tengamos que estar conectando todo el tiempo. El número de conexiones repercute en el ancho de banda, lo cual puede ser negativo para el cliente y para el servidor.
  • Tratar con XML es lento: cierto que el XML es muy bueno para transmitir datos, es legible para el programador y para el servidor, pero pasearlo nos puede llevar demasiado tiempo. Posible recomendación: JSON.
  • Ir cargando la página poco a poco: las nuevas aplicaciones web suelen requerir de mucha programación, lo cual puede tardar en cargarse, y cuando si no se va mostrando algo, el usuario pensará que la página es lenta, por eso es preferible ir cargando lo necesario y luego ir cargando el resto, así el usuario no se desesperará.

Vía / ZDNet.com

| |

Laboratorio: control input selector para HTML

ByLuis

Uno de los controles que he visto en alguna aplicación (sobre todo de tipo editor gráfico), es aquella en la que el valor numérico de una caja de texto se puede modificar mediante botones y mediante una barra de progreso.
input-selector.png
La versión que he realizado modifica los input type=”text” que haya en la página que tengan el atributo rel el valor selector[min,max], siendo min y max los valores mínimos y máximos que permite el controlador.

Entre otras cosas, el controlador permite modificar el valor mediante la forma tradicional (usando la caja de texto), usando las flechas, pinchando en la barra de progreso o haciendo drag en la misma barra.

Read More “Laboratorio: control input selector para HTML”