jquery-ui - Facebook 的 jQuery 插件 "Like"按钮

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>