Minimal Like Dislike Button Plugin with jQuery like dislike - Download Minimal Like / Dislike Button Plugin with jQuery - like-dislike

Download Minimal Like / Dislike Button Plugin with jQuery – like-dislike

By Posted on

This time I will share jQuery Plugin and tutorial about Minimal Like / Dislike Button Plugin with jQuery – like-dislike, hope it will help you in programming stack.

Minimal Like Dislike Button Plugin with jQuery like dislike - Download Minimal Like / Dislike Button Plugin with jQuery - like-dislike
File Size: 8.1 KB
Views Total: 23847
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

like-dislike is a really simple jQuery plugin for generating a like button widget on your website that displays the number of users who liked / disliked each content.

How to use it:

1. Place jQuery library and the jQuery like-dislike plugin at the bottom of your webpage.

view source
1 <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
2 <script src="js/like-dislike.js"></script>

2. Create like and dislike buttons on the webpage.

view source
1 <div id="demo">
2   <button class="like">Like
3     <span class="likes">0</span>
4   </button>
5   <button class="dislike">Dislike
6     <span class="dislikes">0</span>
7   </button>
8 </div>

3. Call the function on the top element to active the plugin.

view source
1 $('#demo').likeDislike();

4. Auto-update like / dislike counters.

view source
01 $('#demo').likeDislike({
02  
03   // update like / dislike counters
04   click: function (btnType, likes, dislikes, event) {
05       var likesElem = $(this).find('.likes');
06       var dislikedsElem = $(this).find('.dislikes');
07       likesElem.text(parseInt(likesElem.text()) + likes);
08       dislikedsElem.text(parseInt(dislikedsElem.text()) + dislikes);
09   }
10    
11 });

5. Advanced usage.

view source
01 $('#demo').likeDislike({
02   reverseMode: true,
03   activeBtn: localStorage['key']? localStorage['key'] : '',
04   click: function(btnType, likes, dislikes, event) {
05     var self = this;
06  
07     // lock the buttons
08     self.readOnly(true);
09  
10     // send data to the server
11     $.ajax({
12       url: '/action',
13       type: 'GET',
14       data: 'id=1' + '&likes=' + likes + '&dislikes=' + dislikes,
15       success: function (data) {
16         // show new values
17         $(self).find('.likes').text(data.likes);
18         $(self).find('.dislikes').text(data.dislikes);
19         localStorage['key'] = btnType;
20  
21         // unlock the buttons
22         self.readOnly(false);
23       }
24     });
25   }
26 });

6. Options and defaults.

view source
01 $('#demo').likeDislike({
02   click: null, // callback
03   beforeClick: null, // callback
04   initialValue: 0,
05   reverseMode: false,
06   readOnly: false,
07   likeBtnClass: 'like',
08   dislikeBtnClass: 'dislike',
09   activeClass: 'active',
10   disableClass: 'disable'
11 });

Change log:

2017-03-20

  • Update to version 1.0.1

This awesome jQuery plugin is developed by uagrace. For more Advanced Usages, please check the demo page or visit the official website.

source : jqueryscript.net

Related posts: