我在实现应该是“简单”的插件时遇到了问题。插件位于以下地址: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;
});
});