如何实现第三方Javascript库？

Question

I have fairly good knowledge of web developement, but I've never implemented any third party Javascript plugins, so I'm a bit confused. 我对Web开发非常了解，但是我从未实现过任何第三方Javascript插件，因此有点困惑。 Any help would be appreciated. 任何帮助，将不胜感激。

Okay, so lets say I want to use a plugin called flippant. 好的，可以说我想使用一个名为flippant的插件。 http://labs.mintchaos.com/flippant.js/ http://labs.mintchaos.com/flippant.js/

I got the CSS and JS File from the plugin, and put them in my tag: 我从插件获得了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>

^That would be the flippant.js and the flippant.css ^那将是flippant.js和flippant.css

Now lets say I want to apply this plugin to flip a simple div container when I click on it. 现在让我们说我想在单击它时应用此插件翻转一个简单的div容器。

<div id="container">

</div>

Now it gives you directions/code on the website linked above, so I'm not going to link it here. 现在，它在上面链接的网站上为您提供了路线/代码，因此在这里不再链接。 It's under the "Whys and Hows" subtitle. 它位于“为什么和如何”字幕下。

So let's say I want to flip the div container when I click on it from the code above, how would I do it using this plugin? 因此，假设我想在上面的代码中单击div容器时翻转它，我将如何使用此插件进行操作？

Answer 1

The library only provides the method, you still have to call it somewhere in your own code like this: 该库仅提供该方法，您仍然必须在您自己的代码中的某处调用它，如下所示：

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

/Edit: regarding the question in the comment: /编辑：关于评论中的问题：

Yeah, I did that, but it is still not working. 是的，我做到了，但仍然无法正常工作。 Maybe I need to add the flippant.min.js file that also came with it? 也许我需要添加它附带的flippant.min.js文件？ I just added the JS and CSS File from Flippant to the header. 我只是将Flippant的JS和CSS文件添加到标题中。 Although there doesn't look like there is much in the flippant.min.js file. 尽管看起来不像在flippant.min.js文件中有很多内容。

The .min version of a file is the same code as the usual file, it's just a compressed version to save some bytes. 文件的.min版本与通常的文件相同，只是为了节省一些字节的压缩版本。 I think the problem you had is Unobtrusive JavaScript . 我认为您遇到的问题是Unobtrusive JavaScript 。

You can either register an event handler on the html element itself like this: 您可以像这样在html元素本身上注册事件处理程序：

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

or in your JavaScript wrapped by this function: 或此函数包装的JavaScript中：

window.onload = function () {

};

What probably happend is, that you tried to register an event on an element which wasn't rendered from the browser at the time of the script execution. 可能发生的情况是，您试图在脚本执行时未从浏览器呈现的元素上注册事件。

I tried it out myself and got this Code working: 我自己尝试了一下，并使此代码正常工作：

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

The page you linked has this code example: 您链接的页面具有以下代码示例：

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();

You would implement something like this on some particular user event for your container object. 您将在某些特定的用户事件上为您的容器对象实现类似的操作。

For example, you could put your version of that code in a function and then call that function on a click handler for a button: 例如，您可以将代码的版本放入函数中，然后在按钮的单击处理程序上调用该函数：

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

Here's what I did. 这就是我所做的。

I cloned the flippant.js repo from github and copied flippant.js into my app/assets/javascripts folder, and flippant.css into app/assets/stylesheets. 我从github克隆了flippant.js存储库，并将flippant.js复制到了我的app / assets / javascripts文件夹中，并将flippant.css复制到了app / assets / stylesheets中。

Notice at the bottom of the source for example page http://labs.mintchaos.com/flippant.js/ 请注意示例页面http://labs.mintchaos.com/flippant.js/的源代码底部

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

You'll want to grab that bit of javascript and save it as browsery.js in your app/assets/javasccipts folder. 您将需要获取这部分javascript，并将其另存为app / assets / javasccipts文件夹中的browsery.js。 That has the Event Listener in it, so is probably the bit you were stumbling over. 里面有事件监听器，所以可能是您绊脚石了。 Obviously, you can rename this, customize it, etc. 显然，您可以重命名，自定义等等。

I'm using Rails with HAML and pre-compiling assets. 我正在将Rails与HAML和预编译资产一起使用。 In config/assets.rb you may need: 在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 )

I'm including Bootstrap via a CDN in my views/layouts/application.html.haml file, so won't show that here. 我在我的views / layouts / application.html.haml文件中通过CDN包含了Bootstrap，因此这里不再赘述。

Then finally, my view: 最后，我的看法是：

=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"

You can use that same general approach with any plugin. 您可以对任何插件使用相同的通用方法。 Hope that helps. 希望能有所帮助。

如何实现第三方Javascript库？

问题描述

3 个解决方案

解决方案1
1 2013-07-01 22:45:06

解决方案2
1 2013-07-01 22:54:19

解决方案3
1 2014-12-15 04:12:56

如何实现第三方Javascript库？

问题描述

3 个解决方案

解决方案1 1 2013-07-01 22:45:06

解决方案2 1 2013-07-01 22:54:19

解决方案3 1 2014-12-15 04:12:56

解决方案1
1 2013-07-01 22:45:06

解决方案2
1 2013-07-01 22:54:19

解决方案3
1 2014-12-15 04:12:56