Tabla de precios/período deslizante adaptable con JavaScript puro-tabella. js
| Autor: | iliketomatoes |
|---|---|
| Views Total: | 2,668 |
| Sitio oficial: | Ir a la web |
| Actualizado: | November 10, 2016 |
| Licencia: | MIT |
Vista prévia
Descripción
Tabella. js es un plugin de JavaScript puro que genera una tabla de precios/período táctil con capacidad de respuesta para su sitio web de comercio electrónico/negocio. Haga clic en las flechas o deslice/arrastre las filas para deslizarse a través de la tabla de precios.
¿Cómo funciona?
Cargue el tabella. CSS en el encabezado de los estilos básicos.
<link href="css/tabella.css" rel="stylesheet">
Cree un elemento DIV que actuará como contenedor de la tabla de precios.
<div id="tabella" class="tabella-ctr"></div>
Cargue el tabella. js en el documento.
Agregar los datos a la tabla de precios en el JavaScript.
!(function(){
var tabellaCtr = document.getElementById('tabella');
var test = new Tabella(
tabellaCtr,
{
periods: [
['2014-12-14', '2014-12-20']
,['2014-12-21', '2015-1-10']
,['2015-2-1', '2015-3-7']
,['2015-3-8', '2015-3-21']
,['2015-3-22', '2015-4-7']
,['2015-4-7', '2015-4-23']
],
rows : [
{
desc: '<h2 class="table-h"><a href="#">Single bed room</a></h2>',
prices: [[190 , 210, 210, 204, 180, 160],[190 , 210, 210, 204, 180, 140]],
pricesDesc : [['1 persona'], ['2 persone']]
},
{
desc: '<h2 class="table-h"><a href="#">Double bed room</a></h2>',
prices: [[190 , 210, 210, 204, 180, 160]],
pricesDesc : [['1 persona']]
},
{
desc: '<h2 class="table-h"><a href="#">Suite</a></h2>',
prices: [[190 , 210, 210, 204, 180, 170]],
pricesDesc : [['1 persona']]
}
]
});
})(); Registro de cambios
v0.4.1 (11/10/2016)
- Errores
