JQuery plugin for rating stars
It all started with the fact that I decided to change the rating for notes on my blog.
The main reason for changing the rating was the fact that the rating was derived by “integer” stars, well, a maximum could be derived and half of the star. That is, if the rating for the article was 4.75, then it was necessary to display either 4.5 stars or 5, which did not suit me very much.
Therefore, it was decided to write your own plugin on jQuery to form a rating in the form of stars.
')
Basic requirements for the plugin:
After the requirements for the plugin were developed, I started programming. As a result, I got a pretty good, I think, jQuery plugin for rating notes in the form of stars, which I will gladly share with you.
In order to use this plugin on your site, first of all you need to connect the jQuery library itself and the plugin itself. We will connect the jQuery library not in the usual way, but from the Google repository.
This code must be placed between the <head> </ head> tags on your site.
You can read about jQuery from the Google repository here .
Also for the correct operation of the plugin, you must connect the following styles:
All this you will find in the source code.
After all the necessary styles and libraries are connected, the plugin itself can be called. To do this, in the right place on your page you need to insert a div, for example, with the class rating:
Now to this element you can call the plugin as follows:
In this case, the plugin will be called with the default settings, as a result of which 5 non-shaded stars will be created.
In order to specify a certain number of filled stars, it is necessary to insert a hidden input field with the class val in our element, which will contain the value of your rating:
In order to display the number of votes next to the rating, inside our element, you need to add another hidden field for entering with the class votes:
If you call the plugin now, the following rating will be created:
After the user clicks on the desired star, the rating is automatically recalculated (the number of filled stars will change) taking into account the choice made, and the number of votes will also change.
If there are several ratings on one page and you need to send data to the server, then another hidden input field with the vote-id class is used to identify the rating:
The value of this field will be transmitted to the server along with the result of the vote. This way you can identify the rating and update the value of the rating you need!
Now let's talk about what settings the plugin has and how they can be changed!
Custom message output format
If the rating data is transmitted to the server, the result of this operation can be displayed to the user.
Suppose on the server you are processing a request and updating the rating of a note. In this case, you can display the message “Thank you. Your vote has been counted, ”rebuild the rating of stars and update the number of users who voted in the browser.
But most often before updating the rating, you need to check whether this person voted for this article or not. And in the event that a person has already voted for this note, then in the user's browser it is necessary to display a warning and not update the rating value and the number of voters.
Therefore, for the plugin to work correctly, the server must return a json object of the following form:
or
If status is equal to the value - OK, the stars rating will be updated and the number of voters will be recalculated, otherwise a warning message will be displayed.
Here is such a universal plug-in for displaying the rating of notes in the form of stars, I succeeded.
View the demo here
Sources can be downloaded here.
If this plugin came in handy, you can thank me in the comments below. So I will know that my work is not in vain.
If there are suggestions for improving this plugin or questions, please write in the comments.
I hope you find it useful for yourself!
UPD: Considering the comments in the comments, I added an option to the plugin settings to set the minimum rating value below which the user cannot vote. Also reworked the resulting html-code of the plug-in, as a result, now you can freely rate both 0 and 5
The main reason for changing the rating was the fact that the rating was derived by “integer” stars, well, a maximum could be derived and half of the star. That is, if the rating for the article was 4.75, then it was necessary to display either 4.5 stars or 5, which did not suit me very much.
Therefore, it was decided to write your own plugin on jQuery to form a rating in the form of stars.
')
Basic requirements for the plugin:
- The rating should have been displayed correctly, that is, if my rating was 4.78, then the number of filled stars should be appropriate.
- Ability to select the effect when you hover the mouse over a star. This means how much the user will be able to set. i.e., when pointing the mouse at the stars, they had to be painted over either with whole stars, either by half a star, or in absolute values, following the mouse pointer
- Ability to set your stars
- Ability to specify the URL to which the voting result will be sent
- Ability to specify the number of stars displayed in the rating
- Automatic declination of voting results. (For example: 1 vote, 2 votes, 5 votes)
- Ability to set your own nouns for voting results
- Ability to set a minimum rating value below which the user cannot vote
- Ability to perform custom function when clicking on a star
After the requirements for the plugin were developed, I started programming. As a result, I got a pretty good, I think, jQuery plugin for rating notes in the form of stars, which I will gladly share with you.
In order to use this plugin on your site, first of all you need to connect the jQuery library itself and the plugin itself. We will connect the jQuery library not in the usual way, but from the Google repository.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script type="text/javascript"> window.jQuery || document.write('<script type="text/javascript" src="js/jquery-1.6.2.min.js"><\/script>'); </script> <script type="text/javascript" src="js/jquery.rating.js"></script> This code must be placed between the <head> </ head> tags on your site.
You can read about jQuery from the Google repository here .
Also for the correct operation of the plugin, you must connect the following styles:
<link href="styles/jquery.rating.css" rel="stylesheet" type="text/css" /> All this you will find in the source code.
After all the necessary styles and libraries are connected, the plugin itself can be called. To do this, in the right place on your page you need to insert a div, for example, with the class rating:
<div class="rating"></div> Now to this element you can call the plugin as follows:
$('div.rating').rating(); In this case, the plugin will be called with the default settings, as a result of which 5 non-shaded stars will be created.
In order to specify a certain number of filled stars, it is necessary to insert a hidden input field with the class val in our element, which will contain the value of your rating:
<div class="rating"> <input type="hidden" class="val" value="2.75"/> </div> In order to display the number of votes next to the rating, inside our element, you need to add another hidden field for entering with the class votes:
<div class="rating"> <input type="hidden" class="val" value="2.75"/> <input type="hidden" class="votes" value="2"/> </div> If you call the plugin now, the following rating will be created:
After the user clicks on the desired star, the rating is automatically recalculated (the number of filled stars will change) taking into account the choice made, and the number of votes will also change.
If there are several ratings on one page and you need to send data to the server, then another hidden input field with the vote-id class is used to identify the rating:
<div class="rating"> <input type="hidden" class="val" value="2.75"/> <input type="hidden" class="votes" value="2"/> <input type="hidden" class="vote-id" value="voteID"/> </div> The value of this field will be transmitted to the server along with the result of the vote. This way you can identify the rating and update the value of the rating you need!
Now let's talk about what settings the plugin has and how they can be changed!
| fx | float | The effect of hovering the mouse over a star.
|
| image | path to the image of stars. It should be noted that the picture should be made in the form of a sprite, i.e. At the very top of the image is a star, which will be displayed for non-shaded stars. Under it is a star, which is displayed when you hover the mouse. And at the very bottom is a star, which is displayed for shaded stars. If you decide to change the stars, then this sequence should be kept. Also I draw your attention that the height and width of one star should be equal . Otherwise, the rating will not be displayed correctly. | |
| width | 32 | Width of one star |
| stars | five | Number of stars displayed in the rating |
| titles | [ 'vote', 'vote', 'votes' ] | An array of nouns that will be displayed for votes |
| readOnly | false | Mode of operation rating. The default is false. If set to true, it will not be possible to vote |
| minimal | 0 | Minimum rating value below which a user cannot vote |
| url | The address of the page to which the AJAX request will be sent with the result of voting | |
| type | post | Type AJAX request. The default is - post. If you need to send a GET request to the server, then set this value to - get |
| loader | The path to the image that will be displayed at that moment while the AJAX request is being sent to the server | |
| click | A user-defined function that is called when a user clicks on a star. The first parameter of the function will be the object of the rating itself, and the second is the result of the user's vote. |
Custom message output format
If the rating data is transmitted to the server, the result of this operation can be displayed to the user.
Suppose on the server you are processing a request and updating the rating of a note. In this case, you can display the message “Thank you. Your vote has been counted, ”rebuild the rating of stars and update the number of users who voted in the browser.
But most often before updating the rating, you need to check whether this person voted for this article or not. And in the event that a person has already voted for this note, then in the user's browser it is necessary to display a warning and not update the rating value and the number of voters.
Therefore, for the plugin to work correctly, the server must return a json object of the following form:
{'status': 'OK','msg': '. '} or
{'status': 'ERR','msg': ' '} If status is equal to the value - OK, the stars rating will be updated and the number of voters will be recalculated, otherwise a warning message will be displayed.
Here is such a universal plug-in for displaying the rating of notes in the form of stars, I succeeded.
View the demo here
Sources can be downloaded here.
If this plugin came in handy, you can thank me in the comments below. So I will know that my work is not in vain.
If there are suggestions for improving this plugin or questions, please write in the comments.
I hope you find it useful for yourself!
UPD: Considering the comments in the comments, I added an option to the plugin settings to set the minimum rating value below which the user cannot vote. Also reworked the resulting html-code of the plug-in, as a result, now you can freely rate both 0 and 5
Source: https://habr.com/ru/post/132807/
All Articles