starwarsjs
StarWarsJS is a jQuery based plugin for settings stars for feedback.
Features
StarWarsJS is a lightweight jQuery-plugin to set feedback stars. It allows to have infinite number of rows and stars in it. Also, one can set various range of rate numbers if needed.
Browser support
- Firefox
- Chrome
- Internet Explorer 9+
- Opera
Star icons are based on fonts which gives freedom to change the size and color of a certain icon by re-writing default CSS styles. Enjoy! :)
Installation
First of all download and unpack zip file from github repository. Then include the CSS at the top of your page in your tag:
<link href="path/to/starwars.css" rel="stylesheet"> Make sure to include jQuery in your page:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> Then include JS code just after jquery.
<script src="path/to/starwars.js"></script> Write your HTML:
<div class="rate_row"></div>Input element takes rate values from data-value attributes after a certain star was clicked. Therefore you should specify desired rate range there. The code written above will provide rate from 1 to 5, according to values written in data-value attributes.
Initialize StarWarsJS.js
The class names of row should be included in selector in order to initialize the plugin. All you need is to fetch values from input fields written in code. Note: Do not forget to wrap code inside $( document ).ready(). $(' .rate_row ').starwarsjs(); StarWarJS will generate following html code after initialization.
<div class="rate_row"> <!-- Wrap stars in a row --> <span class="rate_star" data-value="1"></span> <!-- Single Star --> <span class="rate_star" data-value="2"></span> <span class="rate_star" data-value="3"></span> <span class="rate_star" data-value="4"></span> <span class="rate_star" data-value="5"></span> <input type="hidden" class="get_star" value=""> </div> The values inside data-value attributes are defined according to the number of stars provided in options. Input element takes rate values from data-value attributes after a certain star was clicked.
Options
```js $(' .rate_row ').centipedejs({ stars : 5, range : [2, 6], count : 2, disable : 4, on_select : function(data){ console.log("write something..."); } }); ```Options
Option | Default | Description |
| stars: | 5 | Set the number of stars per row. |
| range: | [] | By default the values of per star are starting from one and ending with the number of stars. By activating "range" option it is possible to define different start and end values for rate's range. The first element of array stands for the start value and the last element of array stands for the end value of range. |
| count: | 1 | Initially the values of rate are incrementing by one. In case you want to increment rate values by another number then the choice is yours. |
| disable: | 0 | "disable" option allows to have inactive star icons which are not clickable. When a number bigger than zero is set for this option then all next values till the end of defined range are becoming disabled. Note*: the number of disabled star icons should not exceed the stars or the value of the last element of a range array. |
| default_stars: | 0 | In case user wants to have active items by default then "default_stars" option is ready. Just set the desired number of stars here. This option will display active stars on load and add "default-stars" attribute to the sibling input which will show the number of stars loaded by default. Note: the number of default stars should not overlap with the number of disabled stars. In other words the number of default stars should be less than the number of disabled stars as both options are changing items located to the next |
| on_select: | null | Due to "on_select" option one can retrieve selected star's value or pass needed data to the plugin. For more info check presentations below: |
Set stars
Write random number of stars for a certain row.
Define Range
Write random number of stars for a certain row.
Change The Increment Value
Change the increment steps value from one (default) to a random.
Disable Icons
Disable needed amount of icons.
Set Default Stars
Set desired number of default stars to have them on load.
Benefits Of On_Select Option
Fetch selected element's value or pass random data to plugin.
