All the options to the bootstrap star rating plugin can be passed typically via the javascript object at plugin initialization. Depending on your need, these options can also be configured as HTML5 data attributes on the native star rating (on which the plugin is initialized). Most of the plugin options can be retrieved at runtime by the following method.
var plugin = $('#star-rating).data('star-rating');
console.log(plugin.starTitles); // get parsed starTitles plugin setting
The plugin supports the following options.
Not seeing the updated content on this page! Hard refresh your browser to clean cache for this page (e.g. SHIFT-F5 on Windows Chrome)
string, language configuration for the plugin to enable the plugin to display messages for your
locale (you
must set the ISO code for the language). You can have multiple language widgets on the
same
page. The locale JS file
for the language code must be defined as mentioned in the translations section. The file must be loaded after
star-rating.js.
string the CSS class to be appended to the star rating container. This is useful if you want to
prefix some CSS class to the container and override the plugin widget styling for your
use
case. This can be used in conjunction with theme property also if
needed.
Defaults to an empty string ''.
string the theme to be applied for the rating. Defaults to a blank string ''. If a
value is set here, the plugin will automatically append the CSS
'theme-{name}'
to the containerClass, where {name} will be replaced with
this
theme property setting. You can build your own theme CSS file based
on theme setting and need to load the theme specific CSS file after bootstrap.css.
The following themes are provided inbuilt with the plugin:
krajee-svg (for displaying SVG icons). This is the default theme. To use this theme, you must additionally load the theme CSS file
theme-krajee-svg.css from the plugin CSS folder (after the default star-rating.css).
krajee-gly (for displaying Bootstrap 3.x glyphicons) . To use this theme, you must
set
theme property to krajee-gly and additionally load the glyphicons
CSS file (if you do not have Bootstrap 3.x css loaded).
krajee-uni (for displaying UNICODE symbols as stars). To use this theme, you must
set
theme property to krajee-uni and additionally load the theme
CSS
file theme-krajee-uni.css from the plugin CSS folder (after
the
default star-rating.css).
krajee-fa (for displaying FONT AWESOME 4.x icons). To use this theme, you must set theme
property to krajee-fa and additionally load the theme CSS
file
theme-krajee-fa.css from the plugin CSS folder (after the default
star-rating.css).
krajee-fas (for displaying FONT AWESOME 5.x icons and above). To use this theme, you must set theme
property to krajee-fas and additionally load the theme CSS
file
theme-krajee-fas.css from the plugin CSS folder (after the default
star-rating.css).
string the symbol markup to display for an empty star. Note that unlike earlier releases, you can set a HTML markup to render the star. Defaults to:
<i class="glyphicon glyphicon-star-empty"></i>
string the symbol markup to display for a filled / highlighted star. Note that unlike earlier releases, you can set a HTML markup to render the star. Defaults to:
<i class="glyphicon glyphicon-star"></i>
float the minimum value for the rating input. Defaults to 0. Note that this is the
lowest rating value when no stars are selected or highlighted.
float the maximum value for the rating input. Defaults to 5. Note that this is the
highest rating value when all stars are selected or highlighted.
float the minimum threshold value for the rating input which is a bit different than
min. Setting this will enable the star rating to have a minimum threshold value. For
example,
if minThreshold is set to 1, (with step = 1,
min = 0,
& max = 5), then the plugin will always enable one star at the minimum to be
highlighted. The rating value therefore will always have a minimum value of
minThreshold and the user will not be allowed to highlight stars lower than this
value
(the
default value of the rating on init if lower than this value, will be overwritten to match
minThreshold).
NOTE The value of minThreshold must be therefore set between min and max settings.
The logic for highlighting stars depends on the stars, min , max, and step configurations. The percentage of each star to be highlighted for each step, will be evaluated using the following expression:
STAR_HIGHLIGHT_PERCENT = (max - min) * step * 100 / starsFor example:
If min = 0, max = 5, step = 0.5, and stars =
5,
then
STAR_HIGHLIGHT_PERCENT will evaluate to 50% of each star for each
step.
If min = 1, max = 5, step = 0.5, and stars =
5,
then
STAR_HIGHLIGHT_PERCENT will evaluate to 40% of each star for each
step.
So, for example 2 above, the stars will not be completely highlighted as desired. It is therefore important you set the configuration of stars, min , max, and step correctly.
boolean whether the keyboard access to navigate and modify the rating is enabled. Defaults to
true.
When this is set to true, users can navigate to the rating using the
keyboard
TAB key and also modify (increment/decrement) the rating using the keyboard RIGHT ARROW
and
LEFT ARROW.
boolean whether the mouse access to modify the rating is enabled. Defaults to true.
When this is set to false, users cannot modify the rating using the mouse
or
touch devices.
boolean whether the widget is a display only control. This is a bit different than disabled and readonly. It actually provides a fast shortcut method, to only display a rating with highlighted stars in a view and hides the caption and clear button. It also prevent any edits to the rating control by the user (but can be edited via javascript).
When using the rtl mode, you must ensure that the icon markup you set in filledStar is symmetrical horizontally. This is because the plugin default CSS styling uses a horizontal mirror flipped version of the filledStar markup.
The rtl input ratings are by default floated right. You may need to add a
<div
class="clearfix></div>
for bootstrap styling after RTL ratings to ensure that floats are cleared for subsequent content
displayed.
If you are already using a HTML markup on your page which has the content RTL oriented, then you
must
be careful in setting the rtl property. For example, if you have an <html
dir="rtl">
at top of your page and wish to have a RTL oriented star rating, then you may take one of the
following approaches to render a proper RTL rating
Option 1: Wrap the rating inside a LTR container e.g. <div
dir="ltr">.
Option 2: You can set the rtl setting for the plugin to
false.
boolean whether to animate the stars when the rating stars are highlighted on hover or click.
Defaults to true.
string the default caption text, which will be displayed when no caption is setup for the rating
in
the starCaptions array. This variable defaults to {rating}
Stars,
where the variable {rating} will be replaced with the selected star rating.
array | function the caption text corresponding to each of the star rating selected. Defaults to
{
0.5: 'Half Star',
1: 'One Star',
1.5: 'One & Half Star',
2: 'Two Stars',
2.5: 'Two & Half Stars',
3: 'Three Stars',
3.5: 'Three & Half Stars',
4: 'Four Stars',
4.5: 'Four & Half Stars',
5: 'Five Stars'
}
This can also be configured as a function that returns a star caption based on a supplied parameter
val, where val is the calculated rating. For example:
starCaptions: function(val) {
if (val < 3) {
return 'Low: ' + val + ' stars';
} else {
return 'High: ' + val + ' stars';
}
}
array | function the caption css classes corresponding to each of the star rating selected. Defaults to
{
0.5: 'caption-badge caption-danger',
1: 'caption-badge caption-danger',
1.5: 'caption-badge caption-warning',
2: 'caption-badge caption-warning',
2.5: 'caption-badge caption-info',
3: 'caption-badge caption-info',
3.5: 'caption-badge caption-primary',
4: 'caption-badge caption-primary',
4.5: 'caption-badge caption-success',
5: 'caption-badge caption-success'
}
This can also be configured as a function that returns a star caption based on a supplied parameter
val, where val is the calculated rating. For example:
starCaptionClasses: function(val) {
if (val == 0) {
return 'caption-badge caption-secondary';
}
else if (val < 3) {
return 'caption-badge caption-danger';
}
else {
return 'caption-badge caption-success';
}
}
array | function
the titles to be shown on hovering each star in the rating. Note that this will be validated only when
showCaptionAsTitle is set to false. Defaults to:
{
1: 'One Star',
2: 'Two Stars',
3: 'Three Stars',
4: 'Four Stars',
5: 'Five Stars'
}
This can also be configured as a function that returns a star caption based on a supplied parameter
val, where val is the calculated rating. For example:
starCaptions: function(val) {
if (val < 3) {
return 'Low: ' + val + ' stars';
} else {
return 'High: ' + val + ' stars';
}
}
If starTitles is set as an object, the data will be merged with the default values. If you want to override the default entirely, you need to override all values in the object, OR setup this as a function callback.
boolean, whether to display the caption as a title attribute for the rating displayed on hover.
Defaults to false. This feature is useful for readonly ratings when no
caption
is separately displayed. Note that when set to false, the plugin will use
starTitles to show a different title on hover of each star.
string the markup for displaying the clear button. Defaults to
<i class="glyphicon glyphicon-minus-sign"></i>.
string the CSS class for the clear button that will be appended to the base class above when
button
is hovered/activated. Defaults to clear-rating-active.
string the value to clear the input to, when the clear button is clicked. Defaults to min if not set.
string the CSS Class to apply to the caption displayed, when clear button is clicked. Defaults
to
caption-badge caption-secondary.
string the identifier for the container element selector for displaying the caption. Defaults to
a
div container with .caption class inside the rating control.
string the identifier for the container element selector for displaying the clear button.
Defaults
to a div container with .clear-rating class inside the rating
control.
boolean whether hover functionality is enabled. This will dynamically change the stars and
caption
on mouse hover. Defaults to true.
boolean control whether the caption should dynamically change on mouse hover. Defaults to
true.
Will be applicable only if hoverEnabled is true.
boolean control whether the stars should dynamically change on mouse hover. Defaults to
true.
Will be applicable only if hoverEnabled is true.
boolean whether to dynamically clear the rating on hovering the clear button. Defaults to
true.
Will be applicable only if hoverEnabled is true.
Comments & Discussion
Note
You can now visit the Krajee Webtips Q & A forum for searching OR asking questions OR helping programmers with answers on these extensions and plugins. For asking a question click here. Select the appropriate question category (i.e. Krajee Plugins) and choose this current page plugin in the question related to field.
The comments and discussion section below are intended for generic discussions or feedback for this plugin. Developers may not be able to search or lookup here specific questions or tips on usage for this plugin.