0

我对网络开发有相当好的了解，但我从未实现过任何第三方 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 容器时翻转它，我将如何使用这个插件来做到这一点？

4

3 回答 3

1

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

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;
于 2013-07-01T22:54:19.513 回答
1

该库仅提供该方法，您仍然必须在自己的代码中的某处调用它，如下所示：

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

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

是的，我这样做了，但它仍然无法正常工作。也许我需要添加它附带的flippant.min.js 文件？我刚刚将 Flippant 中的 JS 和 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;
};
于 2013-07-01T22:45:06.877 回答
1

这就是我所做的。

我从 github 克隆了 Flippant.js 存储库，并将 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 并将其保存为 browsery.js 在您的 app/assets/javasccipts 文件夹中。里面有事件监听器，所以可能是你绊倒的地方。显然，您可以重命名它，自定义它等。

我正在使用带有 HAML 和预编译资产的 Rails。在 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"

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

于 2014-12-15T04:12:56.773 回答