Metro JS无法使Tiles可点击

时间:2014-03-06 01:13:31

标签: javascript jquery html

我正在使用MetroJS为我的网站制作地铁图块,但是我对网站上缺少文档感到恼火。任何人都可以帮我,请点击这个瓷砖吗?无论我尝试哪种方式,它都无法正常工作。它使用锚作为链接,但这意味着我不能使用反弹功能。到目前为止,这是我的代码:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="/cdn/metrojs/MetroJs.min.css">
<script type="text/javascript" src="/cdn/metrojs/MetroJs.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>

<div id="live-tile" class="live-tile" data-mode="none" data-bounce="true" data-link="http://google.com/">
        <img src="/cdn/metro-icons/Web%20Browsers/Internet%20Explorer.png" class="live-tile full">
</div>
<script type="text/javascript">
 $(".live-tile").liveTile({
        click: function ($tile, tileData) {
            var id = $tile.attr("id");
            window.location = "postpage.php?name=" + id;
            return false; // or return true; 
        }
    });
</script>
</body>
</html>

有人可以帮助我吗,这很容易,为什么我不能只使用标准锚而不是这个jQuery废话?

1 个答案:

答案 0 :(得分:1)

您可以在实时磁贴中使用标准锚标记,而不会出现任何问题。如果向其添加完整的类,默认情况下它将占用磁贴。如果将它嵌套在div中,它将采用其父级的强调颜色。数据链接只是一个帮助者,它远不如锚

<div id="live-tile" class="live-tile" data-mode="none" data-bounce="true">
<a href="http://google.com/" class="full">
    <img src="/cdn/metro-icons/Web%20Browsers/Internet%20Explorer.png" class="full">
</a>
</div>

您也可以通过这种方式绑定点击

$(".live-tile").liveTile().on("click", function(e){ /* do stuff */ });