自定义简单的喜欢按钮(不是facebook)

我正在寻找最简单的方法来添加一个简单的喜欢按钮到我的网站。基本上，一个按钮，当点击-改变为一个新的图形(让你知道你点击了它)，不能再点击，并发送到一个php脚本，这样服务器就知道你喜欢什么。

我认为一个好的技术可能是把一个喜欢的按钮在一个iframe，所以你可以点击它，php页面可以只是回声'谢谢喜欢这个' -但问题是iframe必须有一个源。我不希望每个页面都加载大量外部文件。有没有办法，我可以有一个iframe标签，并把HTML里面没有它是外部的?

希望这是有意义的。我不知道你的服务器结构，所以我很难建立一个完整的例子，但这应该让你离开你的脚!

文件: index . php

// query the database and check to see if there is a record for this content piece and ip address
// select count() from statistics where contentId='1' and ip='0.0.0.0' limit 1;
$contentLiked = false;
?>
<html>
<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
    <script src="site.js"></script>
</head>
<body>
<? if(!$contentLiked): ?>
<a href="JavaScript:void(0);" rel="1" class="likeButton status">like</a>
<? else: ?>
<a href="JavaScript:void(0);" rel="1" class="likeButton status liked">unlike</a>
<? endif ?>
</body>
</html>

文件: site.js

$(document).ready(function() {
    $('.likeButton').click(function() {
        var contentId = $(this).attr('rel');
        var link = this;
        if(!$(link).hasClass('liked')) {
            $.post("like.php", { Id: contentId }).done(function(data) {         
                if(data) {
                    $(link).addClass('liked');
                    $(link).html('liked');
                }
            });
        }
    });
});

文件: like.php

<?
    $contentId = $_POST['Id'];
    $timestamp = time();
    $usersIP = $_SERVER['REMOTE_ADDR'];
    // php code to update the database
    // insert: contentId, timestamp, ip address

    // if injected then echo / print true;
    echo 'true';
?>

你应该使用jquery动画。它允许你用jquery在HTML元素上创建动画。

使用Jquery，使用'click'事件，你可以使用动画效果，并有这样的东西:

$("#my-button").click(function(){
    $(this).animate({
        height: 'toggle'
    }, 500, function(){
        $(this).animate({
            height: 'toggle'
        }, 500);
    });
});

请参见下面的示例

相关内容

最新更新

热门标签：