upvote

<!doctype html> <head> <meta charset="utf-8"> <title>jQuery Upvote</title> <meta name="author" content="Janos Gyerik"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet"> <script src="js/jquery-3.1.0.min.js"></script> <script src="lib/jquery.upvote.js"></script> <link rel="stylesheet" href="lib/jquery.upvote.css"> <style type="text/css">  </style> <script type="text/javascript"> function gen(target, cssClass, params) { var obj = $('#templates .upvote').clone(); obj.addClass(cssClass); $(target).append(obj); return obj.upvote(params); } $(function() { function gen_examples(params) { gen('#examples', '', params); } function gen_unix(params) { gen('#unix', 'upvote-unix', params); } function gen_programmers(params) { gen('#programmers', 'upvote-programmers', params); } function gen_serverfault(params) { gen('#serverfault', 'upvote-serverfault', params); } var functions = [gen_examples, gen_unix, gen_programmers, gen_serverfault]; for (var i in functions) { var fun = functions[i]; fun(); fun({count: 5}); fun({count: 6, upvoted: 1}); fun({count: 4, downvoted: 1}); fun({count: 15, starred: 1}); fun({count: 16, upvoted: 1, starred: 1}); fun({count: 14, downvoted: 1, starred: 1}); } }); </script> </head> <body> <a href="http://github.com/janosgyerik/jquery-upvote"><img style="position: absolute; top: 0; right: 0; border: 0;" src="http://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub" /></a> <div class="container"> <h1>jQuery Upvote - a voting plugin</h1> <div>jQuery Upvote is a plugin that generates a voting widget like the one used on <a href="http://stackoverflow.com/">Stack Exchange</a> sites.</div> <h2>Examples</h2> <div class="row"> <div class="span6"> <h3>stackoverflow.com</h3> <div class="examples" id="examples"></div> </div> <div class="span6"> <h3>unix.stackexchange.com</h3> <div class="examples" id="unix"></div> </div> </div> <div class="row"> <div class="span6"> <h3>programmers.stackexchange.com</h3> <div class="examples" id="programmers"></div> </div> <div class="span6"> <h3>serverfault.com</h3> <div class="examples" id="serverfault"></div> </div> </div> <h2>Markup ("read-only" examples)</h2> <div class="row"> <div class="span6"> <h3>Basic</h3> <div class="row"> <div class="span1"> <div class="upvote"> <a class="upvote"></a> <span class="count">5</span> <a class="downvote"></a> <a class="star"></a> </div> </div> <div class="span5"> <pre> <div class="upvote"> <a class="upvote"></a> <span class="count">5</span> <a class="downvote"></a> <a class="star"></a> </div></pre> </div> </div> </div> <div class="span6"> <h3>Upvoted</h3> <div class="row"> <div class="span1"> <div class="upvote"> <a class="upvote upvote-on"></a> <span class="count">6</span> <a class="downvote"></a> <a class="star"></a> </div> </div> <div class="span5"> <pre> <div class="upvote"> <a class="upvote"></a> <span class="count">6</span> <a class="downvote"></a> <a class="star"></a> </div></pre> </div> </div> </div> </div> <div class="row"> <div class="span6"> <h3>Downvoted</h3> <div class="row"> <div class="span1"> <div class="upvote"> <a class="upvote"></a> <span class="count">4</span> <a class="downvote downvote-on"></a> <a class="star"></a> </div> </div> <div class="span5"> <pre> <div class="upvote"> <a class="upvote"></a> <span class="count">4</span> <a class="downvote downvote-on"></a> <a class="star"></a> </div></pre> </div> </div> </div> <div class="span6"> <h3>Upvoted and starred</h3> <div class="row"> <div class="span1"> <div class="upvote"> <a class="upvote upvote-on"></a> <span class="count">6</span> <a class="downvote"></a> <a class="star star-on"></a> </div> </div> <div class="span5"> <pre> <div class="upvote"> <a class="upvote"></a> <span class="count">6</span> <a class="downvote"></a> <a class="star star-on"></a> </div></pre> </div> </div> </div> </div> <div class="row"> <div class="span6"> <h3>unix.stackexchange.com style</h3> <div class="row"> <div class="span1"> <div class="upvote upvote-unix"> <a class="upvote"></a> <span class="count">4</span> <a class="downvote downvote-on"></a> <a class="star"></a> </div> </div> <div class="span5"> <pre> <div class="upvote upvote-unix"> <a class="upvote"></a> <span class="count">4</span> <a class="downvote downvote-on"></a> <a class="star"></a> </div></pre> </div> </div> </div> <div class="span6"> <h3>serverfault.com style</h3> <div class="row"> <div class="span1"> <div class="upvote upvote-serverfault"> <a class="upvote upvote-on"></a> <span class="count">6</span> <a class="downvote"></a> <a class="star star-on"></a> </div> </div> <div class="span5"> <pre> <div class="upvote upvote-serverfault"> <a class="upvote"></a> <span class="count">6</span> <a class="downvote"></a> <a class="star star-on"></a> </div></pre> </div> </div> </div> </div> <h2>Links</h2> <ul> <li><a href="http://github.com/janosgyerik/jquery-upvote">Documentation / Download</a></li> <li><a href="tests/test1.html">Unit tests</a></li> <li><a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=SQTLZB5QCLR82">Donate via PayPal</a></li> </ul> </div> <div id="footer"> <div class="container"> <p class="muted credit"><a href="https://github.com/janosgyerik/jquery-upvote">jQuery Upvote</a> by <a href="http://janosgyerik.com/">Janos Gyerik</a></p> </div> </div> <div id="templates" class="hidden"> <div class="upvote"> <a class="upvote" title="This is good stuff. Vote it up! (Click again to undo)"></a> <span class="count" title="Total number of votes"></span> <a class="downvote" title="This is not useful. Vote it down. (Click again to undo)"></a> <a class="star" title="Mark as favorite. (Click again to undo)"></a> </div> </div> </body> </html>