Like-dislike
A simple jQuery plugin that allows you to create a rating bar with two buttons: Like and Dislike.
- See demos
Installation
If you use Bower, you can type into the command line prompt in your project folder:
$ bower install like-dislike
Or press "Download ZIP" button on the main GitHub page to get all the files and manually add them to your project.
Preparation
Add jQuery and like-dislike into your document:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <script src="js/like-dislike.min.js"></script>Usage
<div id="rating"> <button class="like">Like</button> <span class="likes">0</span> <button class="dislike">Dislike</button> <span class="dislikes">0</span> </div> <script type="text/javascript"> $('#rating').likeDislike({ initialValue: 0, click: function (value, l, d, event) { var likes = $(this.element).find('.likes'); var dislikes = $(this.element).find('.dislikes'); likes.text(parseInt(likes.text()) + l); dislikes.text(parseInt(dislikes.text()) + d); // $.ajax({ // url: 'url', // type: 'post', // data: 'value=' + value, // }); } }); </script>Options
// This callback function is called when the button is pressed. click: null, // function(value, l, d, event) {} // If specified, this callback function will be called before 'click'. // To prevent 'click', you need to return false instead of true. beforeClick: null, // boolean function(event) {} // Sets the initial value of the vote. initialValue: 0, // number (0, 1 or -1) // Sets the initial state of the buttons (locks or unlocks). readOnly: false, // boolean // Enables or disables the possibility to reverse the vote. reverseMode: true, // boolean // The class name of the Like button. likeBtnClass: 'like', // string // The class name of the Dislike button. dislikeBtnClass: 'dislike', // string // The class name of the active button. activeClass: 'active', // string // The class name of the disabled button. disabledClass: 'disabled', // string Methods
readOnly(state) Locks or unlocks the buttons.
this.readOnly(true); // locks the buttons this.readOnly(false); // unlocks the buttons
