Stack Overflowの評価システムが実装できる「Upvote」

「Upvote」はStack Overflowライク(というかそのまま)なデザインの評価システムを実装することのできるjQueryプラグインです。投票システムとも言いますね。

Upvote

Upvote

こういった機能を実装することはそれほど難しいことではありませんが、Stack Overflowライクというのが面白いです。

 

デザインは3種類用意されています。まずは標準的なもの。

Upvote-demo-1

 

シンプルデザイン。

Upvote-demo-2

 

最後に手書き風なデザイン。

Upvote-demo-3

 

 

それでは実装方法をご紹介します。まずはjQuery含む外部ファイルを読み込みます。

<script src="js/jquery-2.0.2.min.js"></script>
<script src="lib/jquery.upvote.js"></script>
<link rel="stylesheet" href="lib/jquery.upvote.css">

 

HTMLはこのようにマークアップします。各機能は必要に応じてマークアップしてください。

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

 

JavaScriptはこのように実装します。たったの一行。簡単です。

$('#topic').upvote();

 

するとこのように作ることが出来ました。

Upvote-sample-1

 

このデザインの評価システムを設置していると。。。といった感じですが、ネタとしては面白いかもしれません。参考にどうぞ。

 

Home > JavaScript > Stack Overflowの評価システムが実装できる「Upvote」

Return to page top