Socket
Socket
Sign inDemoInstall

star-rating-svg2

Package Overview
Dependencies
0
Maintainers
1
Versions
1
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

    star-rating-svg2

A star rating plugin based on svg with the latest version


Version published
Weekly downloads
348
increased by19.18%
Maintainers
1
Install size
53.9 kB
Created
Weekly downloads
 

Readme

Source

A basic, yet flexible star rate jQuery plugin, using SVG.

Features:

  • Doesn't use external images
  • Customize size
  • Customize colors
  • Use half or full stars
  • Choose the number of stars to be displayed
  • Define gradient color of selected stars
  • Specify a border/stroke thickness and color
  • Specify initial rating via options or markup data attribute
  • Execute callback after rating (ex. to notify a server)
  • onHover and onLeave events
  • Locked / Read-only mode
  • Unload option
  • Change star shape (rounded or straight)
  • Resize stars


demo

For a working demo, see: http://nashio.github.io/star-rating-svg/demo

Usage

  1. Include jQuery:

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

    <script src="jquery.star-rating-svg.js"></script>
    
  3. Include plugin's css:

    <link rel="stylesheet" type="text/css" href="star-rating-svg.css">
    
  4. Add the markup

    <div class="my-rating"></div>
    
  5. Call the plugin:

    $(".my-rating").starRating({
        starSize: 25,
        callback: function(currentRating, $el){
            // make a server call here
        }
    });
    

Options

optiondefaultdescription
totalStars5Amount of stars to show
initialRating0Initial rating applied on load
starSize40width in pixels of each star
useFullStarsfalserate using whole stars, if enabled, it doesn't use half-steps
emptyColorlightgrayColor assigned to an empty star
hoverColororangeColor assigned to hovered star
activeColorgoldColor assigned to active rated star
ratedColorcrimsonColor assigned to manually rated star
useGradienttrueActive stars will use gradient coloring
To use this option you need to populate the object [starGradient]
starGradient{start: '#FEF7CD', end: '#FF9511'}Define the star and end colors for the gradient
readOnlyfalseIf false any interaction is disabled
disableAfterRatetrueRemoves further events once a rate is selected
strokeWidth0Defines the thickness of the border, 0 is disabled
strokeColorblackDefines the color for the border
starShape'straight' or 'rounded'Change the star shape type
baseUrlfalsewhen enabled (true), enables compatibility with the base tag in your head section
forceRoundUpfalseif true, forces rounding the initial rating to the nearest upper half even if the value is closer to the lower (1.1 -> 1.5 rather than 1.1 -> 1.0)

Methods

methodargumentsdescription
unload Destroys the instance and removes events attached to it
setRating0 to max stars (int), round (Boolean)Manually sets the rating
getRating Gets the current rating from instance
resize1 to 200Resize the stars on the fly
setReadOnlyBooleanDisable or enable stars manually
// unload/destroy example
$('your-selector').starRating('unload')
// set rating example
$('your-selector').starRating('setRating', 2.5)
// set rating and round
$('your-selector').starRating('setRating', 2.8, true) // 3.0
// get rating example
$('your-selector').starRating('getRating')
// resize
$('your-selector').starRating('resize', 50)
// disable/enable stars manually
$('.your-selector').starRating('setReadOnly', true);

Callbacks

nameargumentsdescription
callbackrating, DOM elementExecutes when selecting a rate
$('your-selector').starRating({
    callback: function(currentRating, $el){
    	// do something after rating
    }
});

Events

methoddescription
onHoverexecutes a callback on mouseover
onLeaveexecutes a callback on mouseout
$('your-selector').starRating({
    onHover: function(currentIndex, currentRating, $el){
			// do something on mouseover
    },
    onLeave: function(currentIndex, currentRating, $el){
			// do something after mouseout
    }
});

Files

Code example

demo/index.html/

Source file

src/

Minified version

dist/

Changelog

1.2.1
  • Adds color for manually rated stars 'ratedColor'
1.2.0
  • Adds public method to disable & enable stars manually
1.1.1
  • Fixes issue when using SVG + base tag
1.1.0
  • Change the star type
  • Adds method to resize star on the fly
1.0.1
  • Fixes Firefox hover issues
1.0.0
  • Adds set rating, and get rating
  • Adds onHover event
  • Adds onLeave event
0.9.4
  • Fixes support for enabling full stars
0.9.3
  • Returns element on callback
  • Fixed typos
0.8.2
  • Fixed bugs related to rendering in retina
0.8.0
  • Added readonly mode

License

The MIT License (MIT)

Keywords

FAQs

Last updated on 31 Aug 2018

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc