如何显示向上/向下投票项目像Reddit？

我想获得像Reddit或HackerNews投票那样的上/下箭头叠加的类似外观。我尝试过，而给了我下面来看看：如何显示向上/向下投票项目像Reddit？

我下面的代码给出：

HTML

<ul class="list-unstyled"> 
     <li class="entry"> 
      <div class="row"> 
       <div class="col-sm-2 entry__rank"> 
        <span class="pull-left">1.</span> 
         <i class="fa fa-icon fa-caret-up fa-2x pull-left"></i> 
         <i class="fa fa-icon fa-caret-down fa-2x pull-left"></i> 
       </div> 
        <div class="col-md-9"> 
         <span class="entry__title"> 
         <a href="#">This is a great billboard</a> 
         </span> 
        </div> 
      </div> 
     </li> 
    </ul>

CSS

.entry { 
    padding: 5px; 
    margin-bottom: 20px; 
} 
.entry__rank { 
    font-size: 20px; 
    font-weight: bold; 
    color: grey; 
    padding: 5px 0 5px 0; 
    margin-top: -10px !important; 
} 
.entry__title { 
    font-weight: bold; 
    font-family: Helvetica Neue, Helvetica, Arial; 
    font-size: 16px; 

} 

.entry__title a { 
    color: #285ddf !important; 
}

所需的外观

事件类似Stackover流程投票是可行的。

来源

2015-12-28 Volatil3

编辑，以提供更好的插件：

使用下面的将可能是一个更好的，少臃肿的解决方案：

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

书签交易实际上已经可他们的代码为人们采取和基本如果他们想要创建自己的Reddit克隆：

https://github.com/reddit/reddit

看看这个，你可能会找到你正在寻找什么。

来源

2015-12-28 07:26:25 Dandy

值。这不回答我的问题，因此没有帮助。我知道Reddit的来源。 – Volatil3

然后看看这个：http://janosgyerik.github.io/jquery-upvote/ – Dandy

这个插件很棒。用这些细节更新你的答案，我会接受它。 – Volatil3

使用引导库[http://getbootstrap.com/]其中有更多功能&请按照此代码。

<div className = "row"> 
 
\t \t \t \t \t <div className = "u-full-width u-cf link-item"> 
 
\t \t \t \t \t \t <div className = "u-pull-left link-vote"> 
 
\t \t \t \t \t \t \t <div className = "u-pull-left vote-buttons"> 
 
\t \t \t \t \t \t \t <div className = "arrow-up upvote" onClick={this._onVoteUp}></div> 
 
\t \t \t \t \t \t \t <div className = "arrow-down downvote" onClick= {this._onVoteDown}></div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <span className="points">{this.state.points}</span> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t <div className="u-pull-right link-content" onClick={this._onLineClick}> 
 
\t \t \t \t \t \t \t {this.props.title} 
 
\t \t \t \t \t \t <span className="u-pull-right info">{domain}</span> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div>

用于给予好评，DownVote &等

来源

2015-12-28 07:31:45

它不工作？ – Volatil3

你已经安装了引导程序？ –

U可以用html按钮和任何JavaScript变量来显示计数写入方法。在按钮标记添加的onclick属性并调用一个JavaScript方法，它增加了对倒计数按钮类似的方法点击变量值只减少方法

https://codeshare.io/Xv5xB

来源

2015-12-28 07:46:57 user5722540

如何显示向上/向下投票项目像Reddit？

回答

相关问题