Author: | iliketomatoes |
---|---|
Views Total: | 1,824 views |
Official Page: | Go to website |
Last Update: | May 20, 2019 |
License: | MIT |
Preview:

Description:
tabella.js is a pure JavaScript plugin that generates a responsive, touch-enabled period/pricing table for your e-commerce/business website.
Click on the arrows or swipe/drag the rows to slide through the pricing table.
Basic usage:
Load the tabella.css
in the header for basic styles.
<link href="css/tabella.css" rel="stylesheet">
Create a DIV element that will act as the container for the pricing table.
<div id="tabella" class="tabella-ctr"></div>
Load the tabella.js
in your document.
Add your data to the pricing table in the 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']] } ] }); })();
More configuration options.
var myTabella = new Tabella( element { /** * BREAKPOINTS : * 1st element in array is the row width, * the 2nd is the number of cells to be shown * Default breakpoint is from [0,1], just one element is shown */ cellBreakpoints: { default: [0, 1], small: [360, 2], medium: [640, 3], large: [820, 4], xlarge: [1080, 5] }, /** * DESCRIPTION BREAKPOINTS : * 1st element in array is the row width, * the 2nd is the description cell width, * Default breakpoint is from [0,0] */ descBreakpoints: { default: [0, 0], medium: [460, 160], large: [900, 200] }, // Content shown in the period start row from: 'from', // Content shown in the period end row. to: 'to', // Currency symbol currency: '€', /** * Easing functions * easeInSine * easeOutSine * easeInOutSine * easeInQuad * easeOutQuad * easeInOutQuad * easeInCubic * easeOutCubic * easeInOutCubic * easeInQuart * easeOutQuart * easeInOutQuart * easeInQuint * easeOutQuint * easeInOutQuint * easeInExpo * easeOutExpo * easeInOutExpo * easeInCirc * easeOutCirc * easeInOutCirc * easeInBack * easeOutBack * easeInOutBack */ easing: 'easeInOutSine', // The duration of the sliding animation. duration: 600, // The speed of the animation once "touch end" event is fired. reboundSpeed: 300, // The amount of pixels you can swipe over the boundaries of the row. edgeThreshold: 150, // The amount of pixels needed to fire the swipe event. swipeThreshold: 60, // Whether to swipe by a single-cell-length per time or not. swipeSingleTick: true, // a function which will be fired when the browser window has been resized. onRefreshSize: false, // customi divider headerRowDevider: '-', // When a row contains less cells than the number of the table header cells, it will just add an empty cell with this value. emptyCell: 'not set', // Enable the table header fixed position fixedHeader: true, // The distance between the fixed table header and the bottom of the table ( expressed in px ) below which the fixed table header will disappear. fixedHeaderBottomThreshold: 80, // Set the CSS top rule for the table header when it's in fixed position. fixedHeaderTop: '0', // custom SVG arrows leftArrow: '', rightArrow: '' });
API methods.
// Goes to the next cell. myTabella.move('right'); // Goes to the previous cell. myTabella.move('left'); // Move all the rows by the given amount of pixels. myTabella.move(x); // Move all the rows to the starting point when no parameters are given. // Useful when showing a table that was previously not displayed. myTabella.move(); // Reflow the table size. // Useful when showing a table that was previously not displayed. myTabella.refreshSize(); // Returns the current width of each cell myTabella.getCellWidth(); // Returns the current breakpoint. // The first element of this object is the array picked from the options.cellBreakpoints which fits into the current media query. // The second element is another array picked among the options.descBreakpoints, which is fit for the current media query as well. myTabella.getCurrentBreakPoint(); // Sets single tick myTabella.setSingleTick(trueOrFalse);
Changelog:
v0.5.1 (05/20/2019)
- Feat: passing svg arrows objects in initializing options
v0.4.1 (11/10/2016)
- Bugfixes
Hello I’m studying Javass and would like to know how can I change de Euro currency for Dollar or Brazilian Reais. Thank you