將鏈接轉到jQuery圖標

我想將兩個「投票」鏈接轉換爲jQuery UI圖標。一個是upvote鏈接，應該是帶有向上箭頭的圖標，另一個是downvote鏈接，該鏈接應該是帶有向下箭頭的圖標。這裏是鏈接的回報率碼之一：將鏈接轉到jQuery圖標

<%= link_to "+1", video_votes_path(:video_id => video.id, :type => "up"), :method => :post, :remote => true %>

我也想被點擊時，它改變圖標的顏色，並再次單擊它時，它應該改回原來的顏色。我怎麼能做到這一切？

來源

2011-03-20 Justin Meltzer

你問了一個jQuery ** **按鈕包含一個圖標，而不是一個jQuery的* *圖標。你是否也在應用程序的其他地方使用jQuery UI？用一些CSS和JS一行代碼很容易實現你的要求，如果你需要按鈕功能，jQuery UI可能有點矯枉過正，尤其是如果你不使用jQuery UI的話。 – polarblau 2011-03-20 07:54:06

我沒有在其他地方使用它......我肯定會接受一個CSS和JS示例作爲答案。它不需要是jQuery UI。 – 2011-03-20 07:55:54

請參閱下面的我的建議。 – polarblau 2011-03-20 08:06:04

僅通過jQuery使用CSS和JS的觸摸的溶液：

創建圖標的子畫面，你的箭頭的兩個版本（一個用於每種顏色）彼此下方 - 例如是這樣的：

enter image description here

給你鏈接的類vote，並添加了CSS和jQuery魔法。

CSS：

// will show the upper part of the sprite by default 
a.vote { 
    display: block; 
    text-indent: -999em; 
    width: 15px;    // width of your sprite 
    height: 15px;   // half the height of your sprite 
    background: transparent url(your_sprite.png) no-repeat center top; 
} 

// will show the lower part of the sprite when toggled 
a.vote.selected { 
    background-position: center bottom; 
}

JS：

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

來源

2011-03-20 08:05:52 polarblau

謝謝。你如何創建你自己的精靈？你將如何獲得按鈕內的精靈箭頭？ – 2011-03-20 08:17:22

您需要一些圖像編輯軟件，例如Photoshop。或嘗試在網上找到一個準備好的精靈。您是指「

是的，我想我可以讓它成爲一個帶有精靈圖像的按鈕，或者精靈圖像可以是一個按鈕。 – 2011-03-20 08:27:54

將鏈接轉到jQuery圖標

回答

相關問題