我对Web开发非常了解,但是我从未实现过任何第三方Javascript插件,因此有点困惑。任何帮助,将不胜感激。
好的,可以说我想使用一个名为flippant的插件。
http://labs.mintchaos.com/flippant.js/
我从插件获得了CSS和JS文件,并将它们放在我的标签中:
<head>
<link rel="stylesheet" type="text/css" href="Record.css">
<link rel="stylesheet" type="text/css" href="flippant.css">
<script src="Record.js" type="text/javascript"></script>
<script src="flippant.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
</head>
^那将是flippant.js和flippant.css
现在让我们说我想在单击它时应用此插件来翻转一个简单的div容器。
<div id="container">
</div>
现在,它在上面链接的网站上为您提供了路线/代码,因此在这里我不会链接它。它在“为什么和如何”字幕下。
因此,假设我想在上面的代码中单击div容器时翻转它,我将如何使用此插件进行操作?
最佳答案
您链接的页面具有以下代码示例:
var front = document.getElementByID('flipthis');
var back_content = "<h1>I'm the back!</h1>"; // Generate or pull any HTML you want for the back.
var back;
// when the correct action happens, call flip!
back = flippant.flip(front, back_content);
// this creates the back element, sizes it and flips it around.
// invoke the close event on the back element when it's time to close.
// call the close method on the back element when it's time to close.
back.close();
您将在您的容器对象的某个特定用户事件上实现类似的操作。
例如,您可以将代码的版本放入函数中,然后在按钮的单击处理程序上调用该函数:
function myFlip() {
var container = document.getElementByID('container');
var back_content = "<h1>I'm the back!</h1>"; // Generate or pull any HTML you want for the back.
var back;
// when the correct action happens, call flip!
back = flippant.flip(container, back_content);
// this creates the back element, sizes it and flips it around.
// invoke the close event on the back element when it's time to close.
// call the close method on the back element when it's time to close.
back.close();
}
// assume you have a button with id="myButton"
document.getElementById("myButton").onclick = myFlip;