如何實現第三方Javascript庫？

Question

我對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容器時翻轉它，我將如何使用此插件進行操作？

Answer 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;
};

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存儲庫，並將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。 里面有事件監聽器，所以可能是您絆腳石了。 顯然，您可以重命名，自定義等等。

我正在將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 個解決方案

解決方案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