1. Background¶
Before we get to the code examples and how to include it in your html page, there’s a couple of things to highlight first.
1.1. Requirements¶
Milestones is dependant on three external libraries which are listed below:
- Bootstrap
- jQuery
- Font-Awesome
2. Getting Started¶
To begin, you need to ensure that the stylesheets and the javascript libraries are included in your html file.
2.1. Required Stylesheets¶
Load the requred external Stylesheets:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/milestones.css">
2.2. Required Libraries¶
Include the required javascript libraries:
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/milestones.js"></script>
2.3. Add a Container¶
Make sure you apply the milestones class and give the container an ID:
<div class="milestones" id="ms1"></div>
2.4. Instantiate the Plugin¶
This will apply default values and display the milestones.
<script>
$(function(){
$('#ms1').milestones();
});
</script>
2.5. Add Options¶
This will control the labels, the progress and the checkmarks.
<script>
$(function(){
$('#ms1').milestones({
position: 2, // progress to the 2nd milestone
checks: 1, // apply a checkmark to the 1st milestone
checkclass: 'ms-checkmark', // apply this class to the checkmarks
msclass: 'doneclass', // apply this class to the completed tickmarks
labels: ["Stage 1","Stage 2","Stage 3","Stage 4"] // array of labels
});
});
</script>