Facebook的「Like」按鈕的jQuery插件

Question

現在很多網站上，你可以看到一個Facebook的「贊」按鈕。 - 按下時，它會改變背景顏色。 - 當鼠標移動時，它允許你寫一些額外的文本

我喜歡這個接口 - 輕量級的動作，但允許表達更多的數據，如果用戶想要的話。

任何人都寫過類似的插件？

UPDATE： 見：http://www.engadget.com/2010/05/30/htc-evo-4g-gets-hacked-froyo-port-sense-ui-be-damned/在文章的底部，你會看到像按鈕

Facebook的

Answer 1

我不知道這樣的jQuery插件，但是寫的用戶界面非常簡單。

（編輯：其實我只是想，我可以使用此功能，我自己的地方我還不如寫在此基礎上，下週如果我有時間適當的插件，並且在這裏編輯它。從目前來看，以下是我最初發布...）

所有你需要的是一對夫婦的div：

<div id="thebutton">Click me!</div> 
<div id="thebox" style="display:none;">Content goes here</div> 

和一些jQuery的：

<script type="text/javascript"> 
    $(function() { 

     $('#thebutton') 
      .click(function() { 
       //Show/hide the box 
       $(this).toggleClass('activated'); 
       $(this).hasClass('activated') ? $('#thebox').fadeIn() : $('#thebox').fadeOut(); 
      }) 
      .mouseenter(function() { 
       //If the button is .activated, cancel any delayed hide and display the box 
       $(this).addClass('hovering'); 
       if ($(this).hasClass('activated')) { 
        $('#thebox').clearQueue().fadeIn(); 
       } 
      }) 
      .mouseleave(function() { 
       //Hide the box after 300 milliseconds (unless someone cancels the action) 
       $(this).removeClass('hovering'); 
       $('#thebox').delay(300).fadeOut(); 
      }); 

     $('#thebox') 
      //When hovering onto the box, cancel any delayed hide operations 
      .mouseenter(function() { $(this).clearQueue(); }) 

      //When hovering off from the box, wait for 300 milliseconds and hide the box (unless cancelled) 
      .mouseleave(function() { $(this).delay(300).fadeOut(); }); 
    }); 
</script> 

剩下的幾乎就是#thebutton，#thebox，.hovering和.activated的CSS。

這裏有一個簡樸的外觀，同時寫這個我用：

<style type="text/css"> 
    #thebutton    { width: 100px; background-color: #eee; text-align: center; padding: 10px; cursor: pointer; } 
    #thebutton.activated { font-weight: bold; } 
    #thebutton.hovering  { color: Blue; }   
    #thebox     { background-color: #eee; position:relative; width: 300px; height: 200px; padding: 10px; top: 5px; display: none;} 
</style> 

Answer 2

您可以處理hover，mousedown，並mouseup事件和更改按鈕的內容或風格。

Answer 3

不是它使用Facebook的插件Javascript SDK。您可以通過在文檔的底部放置此加載：

<div id="fb-root"></div> 
<script> 
window.fbAsyncInit = function() { 
FB.init({status: true, cookie: true, 
     xfbml: true}); 
}; 
(function() { 
var e = document.createElement('script'); e.async = true; 
e.src = document.location.protocol + 
    '//connect.facebook.net/en_US/all.js'; 
document.getElementById('fb-root').appendChild(e); 
}()); 
</script> 

這個屬性添加到您的HTML標籤（實際HTML標籤的DOCTYPE之後）：

xmlns:fb="http://www.facebook.com/2008/fbml" 

然後你就可以把這個片斷無論你想一個Like按鈕：

<fb:like></fb:like> 

Answer 4

使用$（ '＃你的按鈕'）按鈕（）;來自jQuery UI庫的函數提供了這個功能，還有更多。

Answer 5

這個怎麼樣jQuery插件：http://socialmediaautomat.com/jquery-fbjlike-js.php 這是非常簡單的設置，讓你在與jQuery的cookie的插件組合執行一些任務整齊（看看演示頁）。