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
Buen script que nos permite mover nuestras capas mediante drag&drop y cambiarlas de tamaño.
Funciona con posicionamiento relativo y absoluto de los elementos en la página. Además permite personalizar los estilos mediante CSS. No es obtrusivo. Es posible indicar tamaños máximos y mínimos para las cajas y es compatible con la mayoría de los navegadores.
DragResize
Vía / Ajaxline
Una colección interesante de código Javascript, sin tener que usar frameworks de Javascript, teniendo en cuenta, que a mi parecer es conveniente antes saber Javascript y luego aprender un framework.
De los scrips que nos muestran, me gustarÃa destacar:
function addLoadListener(fn){
if(typeof window.addEventListener !='undefined') {
window.addEventListener('load',fn,false);
} else if(typeof document.addEventListener !='undefined') {
document.addEventListener('load',fn,false);
} else if(typeof window.attachEvent !='undefined') {
window.attachEvent('onload',fn);
} else {
var oldfn=window.onload
if(typeof window.onload !='function') {
window.onload=fn;
} else {
window.onload=function(){oldfn();fn();}
}
}
}function addEvent(obj,type,fn){
if(obj.addEventListener) {
obj.addEventListener(type,fn,false);
} else if(obj.attachEvent){
obj["e"+type+fn]=fn;
obj[type+fn]=function(){obj["e"+type+fn](window.event);}
obj.attachEvent("on"+type,obj[type+fn]);
}
}
function removeEvent(obj,type,fn) {
if(obj.removeEventListener) {
obj.removeEventListener(type,fn,false);
else if(obj.detachEvent){
obj.detachEvent("on"+type,obj[type+fn]);
obj[type+fn]=null;
obj["e"+type+fn]=null;
}
}function giT(evt){
var elem;
if (evt.target) {
elem = (evt.target.nodeType == 3) ?
evt.target.parentNode :
evt.target;
} else {
elem = evt.srcElement;
}
return elem;
}Albert Lanchas nos ofrece un script que me ha gustado bastante en el que se muestran ‘bocadillos’ con imágenes dentro. El bocadillo se adapta al tamaño de la imagen y su aspecto se puede cambiar mediante CSS.
Es necesario tener instalado prototype para su funcionamiento, y su uso es bastante sencillo, incluir el script, la librerÃa prototype, la css e incluir la siguiente lÃnea para que funcione:
<a href="imagen.jpg" rel="bubble"><img src="images/bubble.png"/></a>Yo como unica pega, intentarÃa hacer la sombra con una imagen png, para poder usar la transparencia que nos ofrece, aunque en IE6 no funcione.
VÃa / Fresqui
El primer paso va a ser crear el entorno del servidor, para ello creamos un directorio e inicializamos el proyecto ejecutando:
npm initRellenamos todos los datos que nos van pidiendo para configurar el proyecto.
Ya tenemos el proyecto creado, ahora iremos instalando las librerías que necesitamos, en este caso hapi y glue.
npm i @hapi/hapinpm i @hapi/glue¿Qué es glue? Glue es un plugin que permite configurar el servidor de forma fácil.
Ahora creamos el fichero index.js e insertamos el siguiente código:
const Glue = require( '@hapi/glue' );
const manifest = {
server: {
port: 3001,
},
};
const options = {
relativeTo: __dirname,
};
const startServer = async function() {
try {
const server = await Glue.compose( manifest, options );
await server.start();
console.log( 'hapi days!' ); // eslint-disable-line
} catch ( err ) {
console.error( err ); // eslint-disable-line
process.exit( 1 );
}
};
startServer();Fácil de entender, ¿no? Creamos el servidor usando Glue con el manifest y las opciones, y arrancamos el servidor.
Listo, accedemos a http://localhost:3001 para comprobar que funciona. Nos devolverá error 404 porque por ahora no hay definidas routes.
¿Cómo se arranca el servidor? podríamos usar directamente node, pero mejor usaremos nodemon. Primero lo instalamos:
npm i --save-dev nodemonY ejecutaremos lo siguiente para arrancar el servidor:
npm run startPuedes obtener el código en GitHub hapi-vue-demo 0.1.0
Curioso ejemplo para jQuery que permite personalizar mensajes en nuestra página según la página de origen (referrer). Es una buena opción si tienes tráfico originado por alguna página en particular y quieres agradecerles el que visiten tu página con un mensaje personalizado.
// URLs usando expresiones regulares que quieres que detecte
var msgs = [
// null url : tráfico directo
{'url':null, 'msg':'I am glad you remember my site URL, enjoy your stay'}
// Mi url!
,{'url':/^http:\/\/(\w+\.)?midominio\.com/, 'msg':null}
// Otras
,{'url':/^http:\/\/(\w+\.)?google\.com/, 'msg':'Welcome googler, Hope you will find what you looking for'}
,{'url':/^http:\/\/(\w+\.)?dzone\.com/, 'msg':'Welcome fellow dzone reader, if you like it please vote it up'}
,{'url':/^http:\/\/(\w+\.)?digg\.com/, 'msg':'Welcome digger, if you like it please digg it'}
,{'url':/^http:\/\/(\w+\.)?propeller\.com/, 'msg':'Welcome propeller user, hope you will like it here'}
//generic pattern: to show generic message for referrers that you did not specify one for
// URL genéricas
,{'url':/^http:\/\//, 'msg':'Hello their.. Hope you will find what you looking for'}
];
function DetectReferrer(){
var div = $('#WelcomePlaceHolder');
// Si no existe la capa no se muestra el mensaje
if (!div.length) return;
var ref = document.referrer.toLowerCase();
var msg = findMatch(ref);
// Si existe mensaje
if(msg) {
// Añade un botón para cerrar
div.html( '<a href="javascript:void(0)" class="CloseButton">X</a>' + msg).show('slow',function(){
$('.CloseButton',div).click(function(){ div.hide() })
});
}
}
function findMatch(ref) {
for(var i=0; i<msgs.length; i++)
if( ( ref=='' && msgs[i].url==null) || (ref>'' && ref.match(msgs[i].url) ) )
return msgs[i].msg;
return null;
}
// Llama al detector de referrers cuando se carga en DOM
$(DetectReferrer);Se podría hacer algo parecido para el navegador del usuario, por si usa IE recomendarle que cambie a Firefox, Opera, Safari o Chrome.
jQuery Fun: Greeting Your Site Referrals
Vía / dzone
Está claro que el HTML5 nos ofrece muchas posibilidades, pero una de las opciones que más me ha gustado es la de tener bases de datos locales.
Para abrir una conexión deberíamos ejecutar lo siguiente:
db = openDatabase("ToDo", "0.1", "A list of to do items.", 200000);Y para la ejecución de sentencias hay que echar mano de transacciones:
db.transaction(
function(tx) {
tx.executeSql("SELECT * FROM ToDo", [],
function(tx, result) {
for(var i = 0; i < result.rows.length; i++) {
document.write('' + result.rows.item(i)['label'] + '
');
}
}, null);
}
);Bastante sencillo y ofrece muchas posibilidades en nuestras aplicaciones
Vía / DZone
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