jquery-roadmap
Version:
A simple timeline plugin for jQuery
107 lines (98 loc) • 4 kB
HTML
<html>
<head>
<title>jQuery Roadmap</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" type="text/css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css" rel="stylesheet" type="text/css" />
<!-- Include jQuery Roadmap CSS -->
<link href="../dist/jquery.roadmap.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="my-roadmap"></div>
<!-- Include jQuery -->
<script src="../node_modules/jquery/dist/jquery.min.js" type="text/javascript"></script>
<!-- Include jQuery Roadmap Plugin -->
<script src="../dist/jquery.roadmap.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
var events = [
{
date: 'Q1 - 2018',
content: 'Lorem ipsum dolor sit amet<small>Consectetur adipisicing elit</small>'
},
{
date: 'Q2 - 2018',
content: 'Lorem ipsum dolor sit amet<small>Consectetur adipisicing elit</small>'
},
{
date: 'Q3 - 2018',
content: 'Lorem ipsum dolor sit amet<small>Consectetur adipisicing elit</small>'
},
{
date: 'Q4 - 2018',
content: 'Lorem ipsum dolor sit amet<small>Consectetur adipisicing elit</small>'
},
{
date: 'Q1 - 2019',
content: 'Lorem ipsum dolor sit amet<small>Consectetur adipisicing elit</small>'
},
{
date: 'Q2 - 2019',
content: 'Lorem ipsum dolor sit amet<small>Consectetur adipisicing elit</small>'
},
{
date: 'Q3 - 2019',
content: 'Lorem ipsum dolor sit amet<small>Consectetur adipisicing elit</small><small>Consectetur adipisicing elit</small>'
},
{
date: 'Q4 - 2019',
content: 'Lorem ipsum dolor sit amet<small>Consectetur adipisicing elit</small>'
},
{
date: 'Q1 - 2020',
content: 'Lorem ipsum dolor sit amet<small>Consectetur adipisicing elit</small>'
},
{
date: 'Q2 - 2020',
content: 'Lorem ipsum dolor sit amet<small>Consectetur adipisicing elit</small>'
},
{
date: 'Q3 - 2020',
content: 'Lorem ipsum dolor sit amet<small>Consectetur adipisicing elit</small>'
},
{
date: 'Q4 - 2020',
content: 'Lorem ipsum dolor sit amet<small>Consectetur adipisicing elit</small>'
},
{
date: 'Q1 - 2021',
content: 'Lorem ipsum dolor sit amet<small>Consectetur adipisicing elit</small>'
},
{
date: 'Q2 - 2021',
content: 'Lorem ipsum dolor sit amet<small>Consectetur adipisicing elit</small>'
},
{
date: 'Q3 - 2021',
content: 'Lorem ipsum dolor sit amet<small>Consectetur adipisicing elit</small>'
},
{
date: 'Q4 - 2021',
content: 'Lorem ipsum dolor sit amet<small>Consectetur adipisicing elit</small>'
}
];
$('#my-roadmap').roadmap(events, {
eventsPerSlide: 6,
slide: 1,
prevArrow: '<i class="material-icons">keyboard_arrow_left</i>',
nextArrow: '<i class="material-icons">keyboard_arrow_right</i>',
onBuild: function() {
console.log('onBuild event')
}
});
});
</script>
</body>
</html>