Question

很少冒险进入jquery但偶然发现Metro JS http://www.drewgreenwell.com/projects/metrojs我对它印象深刻，所以我想我会试一试。我喜欢简单易懂。由于没有jquery专家，我似乎无法让翻盖瓦工作，所以任何帮助将不胜感激。我的完整代码如下。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Untitled Document</title>
    <link rel="stylesheet" href="metrojs.css" type="text/css">
    <script src="jquery-1.7.1.min.js" type="text/javascript"></script>
    <script language="javascript" type="text/javascript" src="metrojs.js"></script>
    <script language="javascript" type="text/javascript">
    //animate on click

    var $tile1 = $("#tile1").liveTile();
    $("#tile1").on("click", function(){
        $("#tile1").liveTile('play', 0);
    });

    var $tile2 = $("#tile2").liveTile();
    $("#tile2").on("click", function(){
        $("#tile2").liveTile("play", 0);
    });

    </script>

        <script type="text/javascript">
            $(document).ready(function() {
                $(".live-tile,#tile1,#tile2").liveTile();
            });
        </script>


    </head>

    <body>
    <h1>Animate on Click</h1>
    <div class="tiles red">
        <div class="live-tile" id="tile1" data-mode="flip">        
            <div>
                <a class="full" href="#">front</a>
                <span class="tile-title">front title</span>
            </div>
            <div>
                <p>this tile flips once vertically when clicked using a repeat count of 0</p>
                <span class="tile-title">back title</span>
            </div>
        </div>
        <div class="live-tile blue" id="tile2" data-direction="horizontal" data-mode="flip">     
            <div>front
                  <span class="tile-title">front title</span>
            </div>
            <div>
                <p>this tile flips horizontally on an interval or when when clicked
                   <span class="tile-title">back title</span>
                </p>
            </div>
        </div>
    </div>
    </body>

    </html>

Answer 1

看起来您需要包含jQuery才能使metro.js正常工作。

您可以下载最新版本的jQuery here。将其保存在与其余代码相同的文件夹中，然后添加以下行：

<script src="jquery.2.1.1.min.js" type="text/javascript"></script>

确保在包含metrojs.js之前放置此行 - 您需要在加载metro.js之前加载jQuery。

将来，您可以通过打开Web控制台进行调试，该控制台将报告网页上发生的任何Javascript错误，以及大量其他有用信息。在这种情况下，运行您的网页会导致控制台报告jQuery和$未定义，这有助于我确定问题。

有关访问Web /调试控制台的说明以及其他有用的Firefox，Chrome和IE开发人员工具，可在线获取。

MetroJS入门

1 个答案: