我已经编写了一个使用metro ui创建示例页面的代码。 但是实时图块功能不起作用。瓷砖不会滑动
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<link href="stt.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<div class="tiles">
<div class="live-tile" data-mode="slide">
<div style="background-color:Red;">test 1</div>
<div style="background-color:Orange;">test back</div>
</div>
<div class="live-tile" data-mode="flip">
<div style="background-color:green;">test 2</div>
<div style="background-color:red;">test 2 - back</div>
</div>
<script src="metrojs.js" type="text/javascript"> </script>
<script src="metrojs.min.js" type="text/javascript"> </script>
<script src="jquery-2.0.3.min.js" type="text/javascript"> </script>
<script type="text/javascript">
$(document).ready(function () {
alert("Document loaded");
$(".live-tile").liveTile();
alert("exiting alert");
});
</script>
</body>
</html>
是上面的代码正确???
答案 0 :(得分:1)
首先需要jQuery
,因为metrojs
使用jQuery,重新排序这样的js文件:
<script src="jquery-2.0.3.min.js" type="text/javascript"> </script>
<script src="metrojs.js" type="text/javascript"> </script>
<script src="metrojs.min.js" type="text/javascript"> </script>
此外,我认为您不需要metrojs.js
和metrojs.min.js
,只需要其中一个,我建议将jQuery放在页面的头部。
答案 1 :(得分:1)
<script src="jquery-2.0.3.min.js" type="text/javascript"></script>
应在其他js脚本之前在页面<head></head>
中声明。您应该尝试使用Firefox和firebug进行错误检查,它会帮助您。