Facebook的"喜欢"按钮的jQuery插件

Question

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

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

有人写过类似的插件吗？

更新:请参阅: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>