我对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;

10-07 21:06