Question

我对网络开发有很好的了解，但我从来没有实现任何第三方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>

现在它为您提供上面链接的网站上的路线/代码，所以我不打算在此链接。它位于“Whys and Hows”副标题下。

所以我想说当我从上面的代码点击它时我想翻转div容器，我该如何使用这个插件呢？

Answer 1

库只提供方法，您仍然需要在自己的代码中调用它，如下所示：

var element = document.getElementById('container');
element.onclick = function() { // code from your library };

/编辑：关于评论中的问题：

是的，我做到了，但它仍然没有用。也许我需要添加还带有flippant.min.js文件吗？我刚刚添加了JS和从Flippant到标题的CSS文件。虽然看起来不像 flippant.min.js文件中有很多内容。

.min版本的文件与通常的文件是相同的代码，它只是一个压缩版本来保存一些字节。我认为你遇到的问题是Unobtrusive JavaScript。

您可以在html元素本身上注册一个事件处理程序，如下所示：

<button onclick="flip()">Flip</button>

或在此函数包装的JavaScript中：

window.onload = function () {

};

可能发生的是，您尝试在脚本执行时未在浏览器中呈现的元素上注册事件。

我自己试了一下，让这个代码工作了：

window.onload = function () {
    function flip() {

        var front = document.getElementById('container')
        var back_content = "I'm the back!"; // 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.

        // call the close method on the back element when it's time to close.
        back.close();
    }

    document.getElementById('flip').onclick = flip;
};

Answer 2

您链接的页面有以下代码示例：

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;

Answer 3

这就是我的所作所为。

我从github克隆了flippant.js repo并将flippant.js复制到我的app / assets / javascripts文件夹中，并将flippant.css复制到app / assets / stylesheets中。

请注意页面http://labs.mintchaos.com/flippant.js/

的源代码底部

<script type="text/javascript" src="example/browsery.js"></script>

你需要抓住那一点javascript并将其保存为app / assets / javasccipts文件夹中的browsery.js。那里有Event Listener，所以可能是你磕磕绊绊的。显然，您可以重命名，自定义等等。

我正在使用Rails和HAML以及预编译资产。在config / assets.rb中，您可能需要：

Rails.application.config.assets.precompile += %w( flippant.css )
Rails.application.config.assets.precompile += %w( flippant.js )
Rails.application.config.assets.precompile += %w( browsery.js )

我在我的views / layouts / application.html.haml文件中通过CDN包含Bootstrap，所以不会在这里显示。

最后，我的观点：

=stylesheet_link_tag "flippant"

    .container
    %h1 Notecard Flipper

    .row
      .col-xs-4
        %h2 Flip This!
        %p Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
        %p
          %a.btnflip.btn{:href => "#"} Modal &#187;
          %a.btnflip.btn.card{:href => "#"} Card &#187;
      .col-xs-4.flippant
        %h2 Flip This!
        %p Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
        %p
          %a.btnflip.btn{:href => "#"} Modal &#187;
          %a.btnflip.btn.card{:href => "#"} Card &#187;
      .col-xs-4
        %h2 Flip This!
        %p Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
        %p
          %a.btnflip.btn{:href => "#"} Modal &#187;
          %a.btnflip.btn.card{:href => "#"} Card &#187;

    =javascript_include_tag "flippant"
    =javascript_include_tag "browsery"

您可以对任何插件使用相同的通用方法。希望有所帮助。

如何实现第三方Javascript库？

3 个答案: