Askmethat-Rating

This is a simple JavaScript plugin powered by Typescript. This plugin allows you to create custom rating using any font from Font-Awesome or Glyphicon.

You can customize the style of the rating and customize the way to work with it !

Download

Getting Started

Install with Npm

npm i askmethat-rating

Access it from npm website

Install with Bower

bower install askmethat-rating

Usage

Askmethat-Rating is encapsuled in the Askmethat module

Without Popover


HTML

              
                  <div id="myRating"></div>

JavaScript

              
              var options = {
                  backgroundColor : "#e5e500",
                  hoverColor: "#ffff66",
                  fontClass: "fa fa-star",
                  minRating: 1,
                  maxRating: 5,
                  readonly: false,
                  step: Askmethat.AskmethatRatingSteps["OnePerOneStep"],
                  inputName: "AskmethatRating"
                };

              var div = document.getElementById("myRating");
              var amcRating = new Askmethat.AskmethatRating(div, 2, options);

With Popover

The popover will display some progress bar that represente the percentage of selected rating value


HTML

            
                <div id="myRatingPopover"></div>

JavaScript

            
            var options = {
                backgroundColor : "#e5e500",
                hoverColor: "#ffff66",
                fontClass: "fa fa-star",
                minRating: 1,
                maxRating: 5,
                readonly: false,
                step: Askmethat.AskmethatRatingSteps["OnePerOneStep"],
                inputName: "AskmethatRatingPopover",
                popover: {
                  color: "#e5e500",
                  fontClass: "fa fa-star",
                  direction: 0,
                  values : [20,20,20,20,20],
                }    
              };

            var div = document.getElementById("myRatingPopover");
            var amcRating = new Askmethat.AskmethatRating(div, 0, options);