Newton's Preposterous Miscalculation

    jquery-roadmap

    1.4.0 • Public • Published

    jQuery Roadmap

    Another timeline jquery plugin. This plugin was custom made for another project and then separated.

    Install

    <script src="https://cdn.jsdelivr.net/npm/jquery-roadmap@1/dist/jquery.roadmap.min.js"></script>
    • Download: zip

    Usage

    1. Include jQuery:

      <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    2. Include plugin's code:

      <script src="dist/jquery.roadmap.min.js"></script>
    3. Call the plugin:

      $("#my-roadmap").roadmap(data, options);

    Parameters

    Data

    First parameter is an array of objects with the following structure:

    var data = [
        {
            date: 'Q1 - 2018',
            content: 'Lorem ipsum dolor sit amet'
        },
        {
            date: 'Q2 - 2018',
            content: 'Lorem ipsum dolor sit amet'
        },
        {
            date: 'Q3 - 2018',
            content: 'Lorem ipsum dolor sit amet'
        },
        {
            date: 'Q4 - 2018',
            content: 'Lorem ipsum dolor sit amet'
        }
    ];

    Options

    Second parameter is an object of properties used to customize the timeline. Here's a list of all properties and it's default values:

    $("#my-roadmap").roadmap(data, {
        eventsPerSlide: 6,
        slide: 1,
        rootClass: 'roadmap',
        prevArrow: 'prev',
        nextArrow: 'next',
        orientation: 'auto',
        onBuild: function() {
            console.log('on build event');
        },
        eventTemplate: '<div class="event">' +
                '<div class="event__date">####DATE###</div>' +
                '<div class="event__content">####CONTENT###</div>' +
            '</div>'
    });

    eventsPerSlide

    Sets the number of events per slide.

    Default value: 6

    slide

    Sets the slide to show after initialization.

    Default value: 1

    rootClass

    Allows you to change the css root class.

    Default value: roadmap

    prevArrow

    Allows you to customize the "Previous" arrow. HTML is allowed.

    Default value: prev

    nextArrow

    Allows you to customize the "Next" arrow. HTML is allowed.

    Default value: next

    orientation

    Allows you to force the timeline orientation only to horizontal or vertical. Possible values are: horizontal, vertical and auto.

    Default value: auto

    onBuild

    Allows you to pass a callback function that will run after the build

    eventTemplate

    Allows you to customize the event template. Use ####DATE### and ####CONTENT### as tokens to show the events date and content.

    Contributing

    Check CONTRIBUTING.md for more information.

    License

    MIT License © Stefano Marra

    Install

    npm i jquery-roadmap

    DownloadsWeekly Downloads

    71

    Version

    1.4.0

    License

    MIT

    Unpacked Size

    66.1 kB

    Total Files

    16

    Last publish

    Collaborators

    • stefanomarra