Question

我在实现一个应该是“简单”的插件时遇到了问题。该插件位于以下地址：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库的相同源代码，我确保对该插件的引用是正确的。

查看作者页面的源代码，您会看到他也“绑定”链接标记上的点击功能，从他的插件调用.flip方法，“tb”表示“向左翻转”。

Answer 1

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

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

jQuery的插件实现问题

1 个答案: