jQuery.sheet es un script de jQuery que permite añadir hojas de cálculo en tu web. Permite bastantes funcionalidades, tal y como cualquier hoja de cálculo: Excel, OpenOffice o Google Docs:
Vía / WebAppers
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;
}
}
}
}VÃa / Intenta
Empezamos a mostrar contenido, hasta ahora solo mostraba un error 404 cuando se accedía a la URL del servidor.
Ahora vamos a añadir una route simple que muestre un objeto JSON cuando se acceda a la home. Recordad que la parte del servidor solo va a devolver respuestas JSON que tratará el frontend.
Usaremos plugins para tratar todas las rutas que incluiremos en glue. En este ejemplo tan solo añadiremos un route al server que devuelva un mensaje:
const Config = require( '../config' );
const websiteName = Config.get( '/website/name' );
const register = function( server, serverOptions ) { // eslint-disable-line
server.route( {
method: 'GET',
path: '/',
options: {
tags: [ 'api', 'home' ],
description: 'Server home',
notes: 'Server home',
auth: false,
},
handler: function( request, h ) { // eslint-disable-line
return {
message: `Welcome to ${ websiteName }`,
};
},
} );
};
module.exports = {
name: 'api-home',
dependencies: [],
register,
};Ahora solo falta añadir el plugin en el manifest.js
const manifest = {
server: {
port: Config.get( '/server/port' ),
},
register: {
plugins: [
{
plugin: './api/home',
},
],
},
};Puedes bajarte el código aquí
DateSlider es un javascript realizado con Prototype/Scriptaculous que te permite seleccionar fechas con un simple slider.
Su uso es sencillo, a parte de añadir los scripts y estilos, tan solo es necesario incluir este texto:
<div id = "slider-container">
<div id = "sliderbar"></div>
</div><br />
<form>
<label for = "datestart">Start:</label> <input type = "text" id = "datestart">
<label for = "dateend">End:</label> <input typde = "text" id = "dateend">
</form>Y este script:
p_oDateSlider = new DateSlider('sliderbar', '2007-10-01', '2008-10-01', 2001, 2009);
p_oDateSlider.attachFields($('datestart'), $('dateend'));Introducing: The sliding date-picker
Gracias Carlos por el aviso
qTip es un plugin jQuery que nos permite crear y personalizar tooltips en nuestra página web. Se trata de un plugin muy completo que tiene las siguientes características:
Vía / crishnakh
CSSUtilities es una librería que permite entre otras cosas:
Algo muy parecido a lo que nos ofrece Firebug
Vía / DZone
En muchos sitios web de almacenamiento de imágenes se nos permite retocar las imágenes. Hoy vamos a explicar como recortar una imagen directamente desde una página web.
Para ello tenemos que crearnos una página web que nos permita seleccionar la zona de la imagen que queremos recortar y de un script PHP que usando la librería GD recortará la imagen y la devolverá en formato PNG.
Read More “Laboratorio: Recorta imágenes dinámicamente con PHP y HTML”
Comments are closed.
Cada vez me sorprende más lo que se hace con Javascript (y JQuery)
¡Y lo que nos queda por ver! 🙂
Francamente cada dia salen tantas cosas que uno no puede imaginar yo no voy a dejar pasar este script y ya estoy pensando donde colocarlo