jQuery stackoverflow voting widget – Upvote

Upvote is a nice jQuery stackoverflow voting plugin, that implements voting widgets known from Stack Overflow / Stack Exchange sites.

jQuery stackoverflow voting widget in action

Upvote is a lightweight, nice and fast jQuery plugin, which allows us to create a Stack Exchange style rating UI for our web project.

jQuery stackoverflow voting plugin in action
jQuery stackoverflow voting plugin in action

Basic example:

<div id="topic" class="upvote">
    <a class="upvote"></a>
    <span class="count">0</span>
    <a class="downvote"></a>
    <a class="star"></a>
</div>

Upvoted:

<div id="topic" class="upvote">
    <a class="upvote upvote-on"></a>
    <span class="count">6</span>
    <a class="downvote"></a>
    <a class="star"></a>
</div>

Starred:

<div id="topic" class="upvote">
    <a class="upvote"></a>
    <span class="count">5</span>
    <a class="downvote"></a>
    <a class="star star-on"></a>
</div>

Initialization examples – JavaScript / jQuery:

$('#topic').upvote();
$('#topic').upvote({count: 5, upvoted: 1});
$('#topic').upvote({count: 5, upvoted: 1, starred: 1});

Handle callback:

var callback = function(data) {
    $.ajax({
        url: '/vote',
        type: 'post',
        data: { id: data.id, up: data.upvoted, 
                down: data.downvoted, star: data.starred }
    });
};

$('#topic-xyz').upvote({id: 2, callback: callback});

Methods:

// Create, pick up initial values from HTML markup
$('#topic').upvote();

// Mutators
$('#topic').upvote('upvote');
$('#topic').upvote('downvote');
$('#topic').upvote('star');

// Getters
$('#topic').upvote('count');    
$('#topic').upvote('upvoted'); 
$('#topic').upvote('downvoted');
$('#topic').upvote('starred');  

Options and their default values:

id          : undefined
count       : 0
upvoted     : false
downvoted   : false
starred     : false
callback    : function() {}

License: Creative Commons Attribution 3.0.

Project page:

http://janosgyerik.github.io/jquery-upvote

Get jQuery stackoverflow voting plugin from GitHub:

https://github.com/janosgyerik/jquery-upvote

Enjoy!

Share:Share on Facebook2Share on Google+0Tweet about this on TwitterShare on LinkedIn1Pin on Pinterest0