Select Box Factory: combos con diseño y funcionalidades

ByLuis

Select Box Factory es un script que nos permite añadir combos en nuestra página web con un estilo propio y que además añade funcionalidades:

slectboxfactory.png

  • Usa divs en vez de options
  • Añade funcionalidades al desplegable
  • Los contenedores pueden contener lo que necesitemos
  • Las opciones pueden estar activas o inactivas
  • Los estilos se pueden modificar con facilidad
  • Distintos tipos de combos
  • Filtros

Select Box Factory

Similar Posts

Plupload: sube varios ficheros fácilmente

ByLuis

Plupload es un script creado por los autores de TinyMCE. Permite subir ficheros usandoHTML5 Gears, Silverlight, Flash, Yahoo! BrowserPlus o formularios normales, además permite subida progresiva, redimensionado de imágenes y chunked uploads.

Está dividido en dos partes: Core API y una cola de subida jQuery, lo cual permite que creamos nuestra propia implementación. Además en Firefox 3.5+ se puede usar drag&drop y el redimensionado de images también es exclusivo de FF.

Plupload

Vía / WebAppers

Simpletip: tooltips mediante jQuery

ByLuis

Simpletip es un plugin para jQuery que nos permite añadir tooltips a elementos HTML de forma sencilla y cómoda.

Posee muchas opciones para configurar el tooltip, además de ser modificable mediante estilos.

$("JQUERY SELECTOR").simpletip({
content: 'My Simpletip',
fixed: false
});

Funciona en Firefox 1.5+, IE6+, Safari 2.0+ y Opera 9.0+.

Simpletip

Coverflow: visualización de imágenes estilo iPhone

ByLuis

Muy buena librería javascript que nos permite visualizar imágenes como la galería de carátulas que ofrece el iPhone. La transición entre imágenes será mediante una rotación en 3D (un lado es más alto que otro mientras se va colocando en la posición correcta).

coverflow.png

Muestra etiquetas y efecto de reflejo, y su uso es muy sencillo: tan solo habría que ejecutar un script similar a este:

code lang="javascript">Coverflow.init(
[
{src: 'img/img-0-lo.jpg', label: {album: 'All That I Am', artist: 'Santana'}},
{src: 'img/img-1-lo.jpg', label: {album: 'August & Everything After', artist: 'Counting Crows'}},
/* ... */
{src: 'img/img-10-lo.jpg', label: {album: 'Viva la Vida', artist: 'Coldplay'}},
{src: 'img/img-11-lo.jpg', label: {album: 'We Were Here', artist: 'Joshua Radin'}}
],
{
createLabel: function(item)
{
return item.label.album +'
'+ item.label.artist;
},
onSelectCenter: function(item, id)
{
var img = new Image();
img.onload = function()
{
Lightbox.show(this.src, id);
};
img.src = item.src.replace('-lo.jpg', '-hi.jpg');
}
});

JS Coverflow

Esquinas redondeadas mediante Canvas

ByLuis

El tema de las esquinas redondeadas es algo bastante frecuente en los sitios de desarrollo web, pero antes no había visto ninguno que lo hiciera usando Canvas.
corner.png
El script del que hablamos añade varios efectos a nuestras imágenes de forma no obtrusiva, usando para ello canvas. Navegadores como Mozilla Firefox 1.5+, Opera 9+ y Safari mostrarán los efectos indicados, mientras que navegadores antiguos y el Internet Explorer no mostrarán nada.
Para incluir los efectos se debe modificar el class y añadir diversos tipos para cada efecto y así poder hacer combinaciones. Entre los efectos nos encontramos: esquinas redondeadas, efecto shading (con transparencia configurable) y sombras.
Corner.js
Vía / dzone

Hapi.js + Vue.js empezando con las routes

Hapi.js + Vue.js empezando con las routes

ByLuis

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í