0

我已经编写了使用 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>

上面的代码正确吗？？？

4

2 回答 2

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 放在页面的头部。

于 2013-09-12T08:39:24.513 回答
1 
<script src="jquery-2.0.3.min.js" type="text/javascript"></script>

应该在<head></head>其他 js 脚本之前在您的页面中声明。您应该尝试使用 Firefox 和 firebug 进行错误检查，它会对您有所帮助。

于 2013-09-12T08:45:22.857 回答