Javascript
A bunch of jquery plugins for a better life.
Datepicker
A mobile-friendly, responsive and lightweight jquery date input picker. Based on Pickadate.js
Usage
Via data attributes
You can activate the date picker without writing any Javascript. Add the data-datepicker to a text input.
<input type="text" data-datepicker />
Via Javascript
You can call the date picker by attaching the pickadate function to the jQuery element.
$('#datePicker').pickadate(options)
Heads up!
Furatto covers some of this plugin features, but if you need a higher level of customization, refer to the official site.
Options
There are several options you can pass via data attributes to the date picker plugin, just by appending the option name to data-, as in data-format.
| Name | Type | Default | Description |
|---|---|---|---|
| format | string | "d mmmm, yyyy" | This options set the format in which the date is displayed in the date picker, such as Urray!, you selected: d mmmm, yyyy |
| formatSubmit | string | undefined | This options sets the actual value to be submitted through the form. |
| select-years | boolean | false | With this option you should be able to select the year through a select element which is render on top of the picker. |
| select-months | boolean | false | With this option you should be able to select the months through a select element which is render on top of the picker. |
Date formats
According to the piackdate.js plugin the following rules can be use to format any date.
| Rule | Description | Result |
|---|---|---|
| d | Date of the month | 1 - 31 |
| dd | Date of the month with a leading zero | 01 - 31 |
| ddd | Day of the week in short form | Sun - Sat |
| dddd | Date of the week in full form | Sunday - Saturday |
| m | Month of the year | 1 - 12 |
| mm | Month of the year with a leading zero | 01 - 12 |
| mmm | Month name in short form | Jan - Dec |
| mmmm | Month name in full form | January - December |
| yy | Year in short form | 00 - 99 |
| yyyy | Year in full form | 2000 - 2999 |
Toolbars
This jquery plugin from @paul_kinzett allows you to quickly create tooltip style toolbars for use in web applications and websites.
By default the position of the toolbar is top, but you can customize it by adding a 'position' data attribute.
Usage
Via data attributes
Add the data-furatto="toolbar" to a link. You have add a a data-content="#idToToolbarContent" for the toolbar pick up the right anchors.
Heads up!
Furatto covers the basics, which should be enough to get up and running, but you are free to checkout the official site documentation.
Options
There are several options you can pass via data attributes to the date picker plugin, just by appending the option name to data-, as in data-position.
| Name | Type | Default | Description |
|---|---|---|---|
| position | string | 'top' | Sets the position for the toolbar. You can use top, bottom,left and right |
| content | string | null | Id of the links container to display on the toolbar, it must have the # symbol next to the id name, as in #idOfToolbarContent. |
Modal
Furatto modal was rebuilt and now comes better than ever, it is truly responsive and all transitions are managed via hardware acceleration.
Usage
Via data attributes
Add the data-furatto="modal" attribute to a button or link. It is necessary that you add a data-target="#myModal" attribute poiting to the modal.
<button class="btn btn-info btn-large" data-furatto="modal" data-target="#modal-1" data-transition="1">Launch modal</button>
Via javascript
You can show or hide a modal by calling the show or the hide function, like so:
$('#modal').modal('show');
$('#modal').modal('hide');
Options
There are several options you can pass via data attributes to the modal plugin, just by appending the option name to data-, as in data-target.
| Name | Type | Default | Description |
|---|---|---|---|
| target | string | You should set it up. | Id of the modal with a # symbol appended |
| transition | number | "1" | It's the transition you want in the modal, goes from 1 to 16 |
| theme | string | "default" | It is the theme you want to use for the modal, currently Furatto comes with 7 different ones, primary, danger, info, funky, warning, success, inverse |
Slider
Furatto comes with a better slider based on the Mobile First principle. It is built on top of Swiper by iDangero.us, which is a mobile touch slider & framework with hardware accelerated transitions.
Hello World!
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Hello World!
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Hello World!
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Hello World!
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Hello World!
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Usage
Via data attributes
Currently there is no support for the swiper via data attributes, but don't worry we are working on it. Sorry for any trouble.
Via javascript
You can call the swiper as described in the official plugin site, check it out at: Swiper. An initializer is provided by default in the compiled JS version of Furatto, it takes the swiper-container class element, as in the example above.
Options
The default values used to invoke the swiper are described below.
| Name | Type | Default | Description |
|---|---|---|---|
| mode | string | horizontal | Sets the orientation for the swiper. |
| loop | boolean | true | Produces an infinite loop on the swiper. |
| calculateHeight | boolean | true | Swiper will calculate container's height depending on slides content. Useful in repsonsive layout or when you don't know height of your slides. |
| grabCursor | boolean | true | This option may a little improve usability of your swiper users. If true, user will see the "grab" cursor when hover on Swiper. |
| paginationClickable | boolean | true | If true then clicking on pagination button will cause transition to appropriate slide. |
| speed | integer | 600 | The interval of time the animation is going to take. |
The javascript call is provided below:
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
mode: 'horizontal',
loop: true,
calculateHeight: true,
grabCursor: true,
paginationClickable: true,
speed: 600
});
Tooltips
Provide helpful messages through tooltips on icons menus, text hints with Furatto tooltips. Based on the Boostrap tooltips. Four directions are available.
Usage
Via data attributes
Add the data-toggle="tooltip" attribute to any element.
Tooltip on top
Via javascript
You can trigger the tooltip plugin via JS like so:
$('#tooltip').tooltip('show');
Options
| Name | Type | Default | Description |
|---|---|---|---|
| placemenet | string | top | Where to display the tooltip, top, bottom, right, left. |
| original-title | string | undefined | Especifies the text to be displayed on the tooltip. |
Methods
| $('#example').tooltip('show') | Displays the tooltip. |
| $('#example').tooltip('hide') | Hides the tooltip. |
| $('#example').tooltip('toggle') | Toggles the tooltip. |
| $('#example').tooltip('show') | Destroys the tooltip. |