Easy star-ratings in jQuery and Bootstrap
I was wondering an easy way to add a rating widget to a Bootstrap project, but everything I found seemed a bit outdated or overweighted for my needs, so I've created another plugin to do this:
https://github.com/javiertoledo/bootstrap-rating-input
This is a very simple approach and it won't fit every use case, but it has some advantages:
- You don't need to learn anything about configuration, it just works.
- You can use it without writing a single line of code, just include the library on a website and add a class to an input and you're ready.
- It doesn't require to add other libraries than jQuery and Bootstrap.
- It looks nice on Bootstrap apps.
Of course I'm open to comments and suggestions. I just expect it to be useful for someone else ;-)
Related protips:
Written by Javier Toledo
Related protips
12 Responses
This is rad 12:45am find! Thanks for making my grind less painful!
@bendayhoe You are welcome :-)
Very cool work on this item mate. thanks a lot for taking the time. saved me a lot of hassle with building a rating widget from scratch ;) - cheers.
Nice one! Do you know how to implement "half star" so we can better fine tune the ratings?
For voting is ok just with 5 stars but when displaying ratings of many items it is nice to have at least half star or we risk to have many similar ratings.
I know is out of scope of your plugin as you say in github it is enough with this
<i class='glyphicon glyphicon-star'></i><i class='glyphicon glyphicon-star'></i><i class='glyphicon glyphicon-star'></i><i class='glyphicon glyphicon-star-empty'></i><i class='glyphicon glyphicon-star-empty'></i>
Do you know to do some kind of "half-empty" in CSS???ç
Thanks a lot and feliz navidad
@sagive thanks, I'm glad it to be useful :-)
@antorome "half stars" cannot be done yet with this widget, but its planned for some future version. You can leave your comments on this issue if you'd like to share any ideas: https://github.com/javiertoledo/bootstrap-rating-input/issues/8
Extending the plugin to render readonly representations of ratings is also planned here: https://github.com/javiertoledo/bootstrap-rating-input/issues/7
Meanwhile, to generate static half stars you can use Font Awesome with one of these icon classes:
Thanks for your comments! :-)
Hi again,
the point would be to avoid using both glyphicons and fa.
I have tried with this but didn't manage to clip de star
http://www.html5rocks.com/en/tutorials/masking/adobe/
Also with the second method of
http://www.anieto2k.com/2009/09/08/3-tecnicas-de-hacer-crop-con-css/
and almost did it but I couldn't.
Any suggestion?
@antorome I think these approaches wont work because gliphicons are not images, but a typeface. What about just using Fontawesome on entire project and get rid of Gliphicons? There are equivalents for every gliphicon and you win the half stars :-)
Hey,
This is the CSS you need to make a half-star (didn't implement it, I was just playing around with the console)
.glyphicon.glyphicon-star:after {
content: "\e007";
}
element.style {
width: 0.5em;
overflow: hidden;
margin-right: 0.5em;
}
@gastonius that's a nice approach, but I think I'd prefer to use half star icons from fontawesome:
http://fontawesome.io/icon/star-half-o/
http://fontawesome.io/icon/star-half/
What I'm thinking to do is detecting with JS when the mouse is on the first or second half of the star and replace the icon by the half or full star in each case. This is one of the main requests on github, so I promise this will be one of the first things I'll do when I have time ;-)
thanks! i'm pretty newbie coder, and I am doing something wrong cause i see no starts - only empty small squares. Added <script src="bootstrap-rating-input.min.js" type="text/javascript"></script> at the end of my project, saved bootstrap-rating-input.min.js in my server folder with the code found here https://github.com/javiertoledo/bootstrap-rating-input/blob/master/build/bootstrap-rating-input.min.js, added div container in my page. What am I doing wrong?
@perettxintxola may be you need to include bootstrap with gliphicons in your page. Try adding this line to the <header> section in your HTML code:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">Hey, this is an awesome library you have over here.... I am facing an issue when using bootstrap 4.0. I cant seem to get it running. The stars just do not show up. It works if I switch back to bootstrap 3
