Miscellaneous JavaScript widgets ΒΆ
Tag select
Tag builder
Carousels
A Backbone View and accompanying CSS exists for creating carousels.
define([
'Backbone',
'lib/views/CarouselView',
'hbs!lib/templates/myItemTemplate'
], function (
Backbone,
CarouselView,
carouselItemTemplate
) {
var carouselItems = new Backbone.Collection();
carouselItems.add([
{
name: 'Item 1',
description: 'Item description.'
},
{
name: 'Item 2',
description: 'Item description.'
}
// ...and so on
]);
var carouselView = new CarouselView({
el: document.getElementById('carousel'),
collection: carouselItems,
itemTemplate: carouselItemTemplate
});
carouselView.render();
});
Modals
Please include the lib/frontend/widgets/modal
JS dependency and the
blocks/modal
Sass dependency to display modals.
Close
Demo modal
This is a demonstration modal.
#modal
.modal__head
%a.modal__close.modal__head__close{href: '#'}
%i.g-button-modal-close Close
%h3modal__head__title Demo modal
%p This is a demonstration modal.
%button.button#button Click me
%script
var $modal = $('#modal').modal({
autoOpen: false
});
$('#button').on('click', function () {
$modal.modal('open');
});
Tooltips
Please include the lib/widgets/tooltip
JS dependency and the
blocks/tooltip
Sass dependency to display tooltips.
Always remember that, due to the limitation of touch screens, an element that already performs some other action on click cannot also function as a tooltip. e.g., links and buttons cannot be tooltips unless that is their only function.
%button.button#tooltip Hover/tap me to show a tooltip.
$('#tooltip-1').tooltip({
content: 'This text is displayed in a tooltip.'
});
$('#tooltip-2').tooltip({
content: 'This text is displayed in a tooltip.',
inverse: true
});