7

我想在我的 WordPress 插件中使用来自 Bootstrap 的弹出框（及其工具提示依赖项）脚本。

插件很可能会出现在已经有 Bootstrap 的环境中，我正在尝试确定如何以稳健的方式实现它。

  1. 如果它们不存在，我可以尝试检查插件定义并动态加载脚本（否则使用环境有什么）。然而，时间似乎具有挑战性，因为一个脚本依赖于另一个脚本，并且加载同名插件并不能保证它是兼容版本甚至是 Bootstrap 脚本。

  2. 脚本似乎包含一些noConflict()功能，我可以尝试使用它来隐藏我自己的副本并在任何情况下忽略全局副本的存在。但是，我再次不确定如何正确使用此机制，因为 popover 需要工具提示才能工作。同样从稍后查看 Bootstrap 问题跟踪器来看，似乎noConflict()工具提示中的当前已损坏，并且仅在 v3 中修复。:(

  3. 似乎额外的加载器（例如 yepnope）可以为我处理这个问题，但感觉就像把自己挖得更深。

这些（或除了这些）方法中的哪一个是可行的？

4

1 回答 1

1

使用 RequireJS 加载您自己的脚本并用一些闭包包装它们。

// let's say tooltip was defined already
$.fn.tooltip = function(data){
    $(this).mouseover(function(){
        console.log(data.title);
    });
};

// we'll apply the old tooltip to .tooltip1
$('.tooltip1').tooltip({
    title: 'tada',
    placement: 'bottom'
});

// what version of jquery did we have out here
console.log($.fn.jquery);

require({
    "paths": {
      "jquery": "//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min",
      "bootstrap": "//twitter.github.io/bootstrap/assets/js/bootstrap.min"
    },
    shim: {
        "bootstrap": {
            deps: ['jquery'],
            exports: '$.fn.tooltip'
        }
    }
}, ['jquery', 'bootstrap'], function($){
    // what version of jquery do we have in here
    console.log($.fn.jquery);

    // now we apply the bootstrap tooltip to .tooltip2
    $('.tooltip2').tooltip({
        title: 'tada',
        placement: 'bottom'
    });
});

http://jsfiddle.net/moderndegree/prSUF/

于 2013-06-20T20:33:15.473 回答