Welcome to Milestones’s documentation!¶

Milestones is a jQuery plugin that displays a timeline with milestones. The milestones are evenly separated along the timeline with labels underneath. Once a milestone is met, you can check it off and move to the next one.

Click this link to take you to a demo page that displays the plugin in real time. Be sure to view the source to see how to set it up and options available.

Demo

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.

Requirements¶

Milestones is dependant on three external libraries which are listed below:

Bootstrap
jQuery
Font-Awesome

Getting Started¶

To begin, you need to ensure that the stylesheets and the javascript libraries are included in your html file.

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">

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>

Add a Container¶

Make sure you apply the milestones class and give the container an ID:

<div class="milestones" id="ms1"></div>

Instantiate the Plugin¶

This will apply default values and display the milestones.

<script>
   $(function(){
       $('#ms1').milestones();
   });
</script>

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>

License Information¶

As a work of the United States Government, this project is in the public domain within the United States.

Additionally, we waive copyright and related rights in the work worldwide through the CC0 1.0 Universal public domain dedication.

CC0 1.0 Universal Summary¶

This is a human-readable summary of the Legal Code (read the full text)

No Copyright¶

The person who associated a work with this deed has dedicated the work to the public domain by waiving all of his or her rights to the work worldwide under copyright law, including all related and neighboring rights, to the extent allowed by law.

You can copy, modify, distribute and perform the work, even for commercial purposes, all without asking permission.

Other Information¶

In no way are the patent or trademark rights of any person affected by CC0, nor are the rights that other persons may have in the work or in how the work is used, such as publicity or privacy rights.

Unless expressly stated otherwise, the person who associated a work with this deed makes no warranties about the work, and disclaims liability for all uses of the work, to the fullest extent permitted by applicable law. When using or citing the work, you should not imply endorsement by the author or the affirmer.