upv

upvote

Generate a voting widget like the one used on Stack Exchange sites.

Showing:

Popularity

Downloads/wk

2

Maintenance

No Maintenance Data Available

Package

Dependencies

1

License

Type Definitions

Tree-Shakeable

No?

Categories

Readme

jQuery Upvote - a voting plugin

jQuery Upvote is a plugin that generates a voting widget like the one used on Stack Exchange sites, for example:

Version

@version         1.0.2
@since           2013.06.19
@author          Janos Gyerik
@homepage        https://janosgyerik.github.io/jquery-upvote
@twitter         twitter.com/janosgyerik

Required files

  • lib/jquery.upvote.js
  • lib/jquery.upvote.css
  • lib/images/sprites-stackoverflow.png

Options and their default values

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

If unspecified, most of these options will be set based on the passed in dom object:

  • id: from data-id attribute, for example in <div data-id="123">...</div>. If there is no such attribute in the dom, the value will be left undefined.
  • count: from count class, for example in <div><span class="count">7</span>...</div>. If there is no such class in the dom, the value will default to 0.
  • upvoted: from upvoted class, for example in <div>...<a class="upvote upvoted"></a>...</div>. If there is no such class in the dom, the value will default to false.
  • downvoted: from downvoted class, for example in <div>...<a class="downvote downvoted"></a>...</div>. If there is no such class in the dom, the value will default to false.
  • starred: from starred class, for example in <div>...<a class="star starred"></a>...</div>. If there is no such class in the dom, the value will default to false.

The id parameter is not used for rendering. It's useful when you implement a callback method, so that you can identify to your server backend the object that is voted on.

Markup

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>

Downvoted:

<div id="topic" class="upvote">
    <a class="upvote"></a>
    <span class="count">4</span>
    <a class="downvote downvote-on"></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

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

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

Methods

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

// Mutators
$('#topic').upvote('upvote');       // Upvote!
$('#topic').upvote('downvote');     // Downvote!
$('#topic').upvote('star');         // Star!

// Getters
$('#topic').upvote('count');        // Get the current vote count
$('#topic').upvote('upvoted');      // Get the upvoted state -> boolean
$('#topic').upvote('downvoted');    // Get the downvoted state -> boolean
$('#topic').upvote('starred');      // Get the starred state -> boolean

License

Licensed under Creative Commons Attribution 3.0 Unported http://creativecommons.org/licenses/by/3.0/

You can do it via PayPal. Thanks! :)

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial