如何做一个Upvote / Downvote按钮？ [英] How can I make an Upvote/Downvote button?

问题描述

这只是为了样式，我试图做一个upvote / downvote与它在SO和Reddit上做的相同的方式，从我可以看到他们使用箭头图像作为背景，然后定位，但我'我是一个CSS新手，我需要有人来带我通过它。提前感谢。

解决方案

您可以通过向背景添加不同的图片，每个按钮的状态一个。然而，有一种更清洁，更容易，更现代的方式来实现这个结果：Sprites。

精灵是一个保存为较大图像一部分的图像。使用精灵的最大的优点之一是减少到服务器的所有图像到Sprite的一个请求的往返。显示图片的元素具有作为背景的图像。背景相对于元素移动，因此元素仅显示图像的一部分。例如，当您在海报上移动相框（或在这种情况下：在框架下移动海报）

在这样他们创建一个包含所有状态为按钮。他们给按钮的元素（在这种情况下 span ）一个固定的宽度和高度，并用CSS添加背景。然后使用javascript对点击事件切换状态（打开或关闭）的类。现在你在CSS中只需要改变CSS类的背景位置：

  $（'。vote'）。点击（function（）{$（this）.toggleClass（'on'）;}）;  

  .vote {display：inline-block; overflow：hidden; width：40px; height：25px; cursor：pointer; background：url（'http://i.stack.imgur.com/iqN2k.png'）; background-position：0 -25px;} .vote.on {background-position：0 2px;}  

 < script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script>点击投票：< span class =vote> < / span>  
 

您可以轻松地向sprite添加更多状态，例如hover SO甚至将整个页面的所有图像放在单个图像中。您可以使用firebug或Chrome开发人员工具验证这一点。查找sprites.png。

This is just for the styling, I'm trying to make an upvote/downvote the same way that it's done on SO and Reddit, from what I can see they use arrow images as backgrounds and then position it, but I'm a CSS newbie and I need someone to walk me through it. Thanks in advance.

解决方案

You could do it by adding a different picture to the background, one for every state of the button. There is however a cleaner, easier, more modern way of achieving this result: Sprites.

A sprite is an image that is saved as a part of a larger image. One of the biggest advantages of using sprites is the reduction of round-trips to the server for all the images to just one request for the Sprites. The element to display a picture has the image as background. The background is moved relative to the element so the element displays only part of the image. Like when you move a photo-frame over a poster (or in this case: moving the poster under the frame)

At SO they make an image that contains all the states for the button. They give the element for the button (a span in this case) a fixed width and height and add the background to it with CSS. Then toggle a class for the state (on or off) with javascript on the click event. Now the only thing you have to do in CSS is change the position of the background with CSS classes:

$('.vote').click(function () {
  $(this).toggleClass('on');
});

.vote {
  display: inline-block;
  overflow: hidden;
  width: 40px;
  height: 25px;
  cursor: pointer;
  background: url('http://i.stack.imgur.com/iqN2k.png');
  background-position: 0 -25px;
} 


.vote.on {
  background-position: 0 2px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Click to vote: <span class="vote"> </span>

You can easily add more states to the sprites like 'hover' and 'active' just the same way. SO even puts all the images for the whole page in a single image. You can verify this with firebug or the Chrome developer tools. Look for 'sprites.png'.

这篇关于如何做一个Upvote / Downvote按钮？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！