我在实现应该是“简单”的插件时遇到了问题。插件位于以下地址:http://lab.smashup.it/flip/

我尝试用一​​个简单的短代码对其进行测试,并检查了显示插件的页面中的代码,以确保我做对了,但是显然什么也没发生,并且我没有收到任何错误反馈,所以我不知道朝哪个方向前进。

这是我测试运行的代码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Test#0935</title>

        <script src="http://www.google.com/jsapi"></script>
        <script type="text/javascript">
            // Load jQuery
            google.load("jquery", "1");
        </script>
        <script src="JS/jquery-ui-1.7.2.custom.min.js"></script>
        <script src="JS/jquery.flip.min.js"></script>

        <script type="text/javascript">

            $("a").bind("click",function(){
                $("#flipo").flip({
                    direction: "tb"
                })
                return false;
            });

        </script>

        <style type="text/css">

            #flipo {
                width:100px;
                height:70px;
                background-color:lightblue;
                margin:20px;
            }

        </style>

    </head>

    <body>

        <div id="flipo"></div>
        <a href="#" id="left">left</a>

    </body>
</html>


我为jQuery库“导入了”与插件作者相同的源,并且确保对插件的引用是正确的。

查看作者页面的源代码,您会发现他也“绑定”了链接标签上的click函数,从插件中调用了.flip方法,“ tb”的意思是“向左翻转”。

最佳答案

.bind()包裹在$(function() {});包装器中。这模拟了$(document).ready(),这意味着“其中的所有内容都将在DOM加载后以及页面内容加载之前加载。”

$(function() {
    $("a").bind("click",function(){
        $("#flipo").flip({
            direction: "tb"
        })
        return false;
    });
});

10-05 20:34
查看更多