rj
4.0/51
raty-js
npm i raty-js
rj

raty-js

🌟 Raty - A Star Rating Plugin

by Washington Botelho

3.1.1 (see all)License:MITTypeScript:Not FoundCategories:Vanilla JavaScript Star Rating
npm i raty-js
Readme

Raty - A Star Rating Plugin

CI NPM Version Maintainability Sponsor

Rails Rating?

This is Rating: https://github.com/wbotelhos/rating

Usage with Image

  • jquery.raty.js
  • star-off.png
  • star-on.png
<script src="jquery.raty.js"></script>

<div></div>
$('div').raty();

Usage with Font

  • jquery.raty.js
  • jquery.raty.[eot|svg|ttf|woff]
  • jquery.raty.css
<link rel="stylesheet" href="jquery.raty.css">
<script src="jquery.raty.js"></script>

<div></div>
$('div').raty({ starType: 'i' });

Options

PropertyDefaultDescription
cancelfalseCreates a cancel button to cancel the rating.
cancelClass'raty-cancel'Name of cancel's class.
cancelHint'Cancel this rating!'The cancel's button hint.
cancelOff'cancel-off.png'Icon used on active cancel.
cancelOn'cancel-on.png'Icon used inactive cancel.
cancelPlace'left'Cancel's button position.
clickundefinedCallback executed on rating click.
halffalseEnables half star selection.
halfShowtrueEnables half star display.
hints['bad', 'poor', 'regular', 'good', 'gorgeous']Hints used on each star.
iconRangeundefinedObject list with position and icon on and off to do a mixed icons
iconRangeSamefalseAll icons prior to selection will be the same as the selection.
mouseoutundefinedCallback executed on mouseout.
mouseoverundefinedCallback executed on mouseover.
noRatedMsg'Not rated yet!'Hint for non rated elements when it's readOnly.
number5The number of stars that will be presented.
numberMax20Max number of stars star the option number will create.
pathundefinedA global path where the icon will be found.
precisionfalseEnables the selection of a precise score.
readOnlyfalseTurns the rating read-only.
round{ down: .25, full: .6, up: .76 }Includes value attributes to do the score rounding math.
scoreundefinedInitial rating.
scoreName'score'Name of the hidden field that holds the score value.
singlefalseEnables single star selection.
spacetruePuts space between the icons.
starHalf'star-half.png'The name of the half star image.
starOff'star-off.png'Name of the star image off.
starOn'star-on.png'Name of the star image on.
targetundefinedElement selector where the score will be displayed.
targetFormat'{score}'Template to interpolate the score in.
targetKeepfalseIf the last rating value will be kept on mouseout.
targetScoreundefinedScore field target avoiding hidden field creation
targetText''Default text in a target.
targetType'hint'Choose if target will receive a hint or the score number
starType'img'Element used to represent a star.

Functions

FunctionDescription
$('div').data('raty).score();Get the current score.
$('div').data('raty).score(number);Set a score.
$('div').data('raty).click(number);Click on a star.
$('div').data('raty).readOnly(boolean);Change the read-only state.
$('div').data('raty).cancel(boolean);Cancel the rating. The last param force the click callback.
$('div').data('raty).move(number);Move the mouse to the given score point position.

Downloads/wk

3.3K

GitHub Stars

2.3K

LAST COMMIT

2mos ago

MAINTAINERS

1

CONTRIBUTORS

31

OPEN ISSUES

48

OPEN PRs

7
VersionTagPublished
3.1.1
latest
9mos ago
No tutorials found
Add a tutorial