Question

现在很多网站上都可以看到Facebook“赞”按钮。 - 按下时，它会改变背景颜色。 - 当鼠标覆盖时，它允许您编写一些额外的文本

我喜欢这个界面 - 轻量级动作，但如果用户愿意，可以表达更多数据。

有人写过类似的插件吗？

更新：请参阅帖子底部的http://www.engadget.com/2010/05/30/htc-evo-4g-gets-hacked-froyo-port-sense-ui-be-damned/，您将看到facebook like按钮

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

这个jquery插件怎么样：http://socialmediaautomat.com/jquery-fbjlike-js.php 设置非常简单，让你结合jquery cookie插件执行一些简洁的任务（看一下演示页面）。

Answer 3

您可以处理hover，mousedown和mouseup事件，并更改按钮的内容或样式。

Answer 4

它不是一个使用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标记（DOCTYPE后面的实际HTML标记）：

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

然后您可以将此代码段放在您想要的“赞”按钮的任何位置：

<fb:like></fb:like>

Answer 5

使用$（'＃your-button'）。button（）;来自jQuery UI库的函数提供了这个功能，还有更多功能。

http://jqueryui.com/themeroller/

Facebook的“喜欢”按钮的jQuery插件

5 个答案: