Table of Contents
A jQuery plugin that adds a rating system to HTML markup compatible with form submission. The plugin supports different shapes, custom sizes, different shapes and the number of shapes.
Call the plugin on an using the ID property of an element of your choice and you'll have a rating system that's all setup and ready to get submitted with your form!
Getting started is easy. Clone or download the repository and link the plugin script to your project to your project. Call the method on the id of a div element that you want to see the ratings system and your rating system will appear. The element that you call the .rates method on will have an input form appended to it with a class and name with a suffix of 'Rating'. For example, if the method is called on a div with the ID of "score" an element with the id and name of "scoreRating" will be generated that can be used in form submissions.
This result:
Produced by this code:
See the installation and usage sections for the specific details.
- Download or clone the repo and place the contents, the css, images and js folders in your project root directory.
Note: If you need to adjust the images folder location, do step 2. If everything was placed in your root directory, skip to step 3
-
If you cannot place the images folder in the root directory due to a limitation of your project, you can adjust the path of the images using the settings of the plugin in the method call. For example, if you have a folder named 'static' in your root directory and your images folder is inside of it in order to indicate the images location you can use the 'imagesFolderLocation' setting and set it to 'static/' like in the following:
-
Download JQuery(version 3 or higher) from https://jquery.com/ or use a CDN to link jQuery to your html file and add the rates script file to your project as well:
-
Link the rates.css file to your html file:
-
After following the installation steps, create an html tag and add an ID to target the element like in the following example:
-
In the scripts tag of your html file or the external .js script file, call the .rates method on the element where you want to generate the rating system.
-
If no settings are given then a set of five 25 pixel-sized white stars that turn yellow when hovered over like the following:
-
Clicking on a star will set the rating to the corresponding star.
-
The settings can be edited like the following: shadeColor can be set as either 'red' or 'yellow' to set the fill-in color, starCount can be set as an integer and sets how many shapes are to appear. The shape can be set as 'black-star', 'white-star', 'black-heart', and 'white-heart' and alters the shapes of the rating.
-
For example the above settings will create a set that looks like the following:
-
Note: For the purposes of form submission an input tag will be dynamically created in your HTML file of this structure:
<input type="hidden" id = "${$containerName}Rating" name="${$containerName}Rating" value="0" >
The id and container name are based on the id of the element you targeting with the plugin. So, for our example (id = ratestars) the id and name of our input element will be ratestarsRating.
Customizable optional settings
shadeColor
Adjusts the filling color, for different options are provided as follows.
Options:
"rates-green"
"rates-blue"
"rates-yellow"
"rates-red"
shapeHeight:
Adjust the size of the shape by changing its height
Enter any string value that indicates the pixel size.
Example options:
"25px"
"55px"
"75px"
shapeCount:
Adjusts many items(stars or hearts) are part of the rating system
Enter an integer appropriate for your project.
Example options:
3
5
10
imagesFolderLocation:
Adds a prefix to the path of default images folder which should be in your root directory, only
necessary for pathing conflicts or issues.
For example, the default relative path for the white-star image is "images/white-star.png"
If you need to adjust the default path to indicate it is nested deeper in your project you
indicate with this setting.If you want to indicate the images folder is nested in a folder
named static use "static/" as the setting, this would set the path as "static/images/white-star.png"
Example options:
"static/"
"styles/"
If no value is entered, results produce a default of:
shadeColor: 'rates-yellow',
shapeHeight: '25px',
shapeCount: 5,
shape: 'white-star',
imagesFolderLocation: '',