2

我正在使用 Twitter 引导程序。我在我网站的一个地方使用包含的轮播来旋转 DIV 列表，一次显示一个 div。

它是这样启动的：

$('.carousel').carousel({interval: 5000});

Bootstrap Carousel 非常基础，在站点的其他地方我需要一个轮播，它允许我一次显示多个项目、添加回调等，所以我想使用jq.carousel或jQuery Carousel之类的东西。这两个都使用与 Bootstrap 相同的函数名称，并像这样启动：

var $carousel = $('.mycarouselclass').carousel();

所以……有冲突。在一个站点上使用这两个插件有哪些不同的方法？有没有办法重新定义一个插件，以便用不同的名称调用它？如果您认为我以错误的方式处理这个问题，请说出来，我非常愿意接受建议和学习 :)

基于评论的附加信息： 如果可能的话，我想保持缩小的插件 js 文件不变，所以我对一种在外部重命名一个实例的方法感兴趣，以便将来的插件升级很容易。

4

2 回答 2

6

在加载第二个轮播插件之前，在本地重命名第一个中的函数，如下所示：

<script type='text/javascript' src="bootstrapCarousel.js"></script>
<script type='text/javascript'>
    $.fn.bootstrapCarousel = $.fn.carousel;
    delete $.fn.carousel;
</script>
<script type='text/javascript' src="nonBootstrapCarousel.js"></script>

然后，如果您想要您调用的引导程序版本，.bootstrapCarousel()而对于另一个版本，它只是.carousel().

于 2012-09-05T12:01:04.747 回答
0

虽然 Timm 的回答仍然有效，但 Twitter Bootstrap 插件提供了自己的.noConflict()方法来避免命名空间冲突。

对于 TB 2.3.x，请参阅此页面，对于最新的 3 ，请点击此链接。顺便说一句，两个版本都使用相同的方法。

var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton            // give $().bootstrapBtn the Bootstrap functionality

通过阅读 TB 的插件代码之一，我发现该插件保留了预加载的插件，该插件在内部变量中使用相同的命名空间，var old = $.fn.carousel并在调用时将其放回.noConflict()。如果先加载其他插件并加载TB，则很方便。

如果您先加载 TB，则需要.noConflict()在加载将使用相同命名空间的其他插件之前调用。否则以后加载一个可能会出现错误。

于 2014-01-23T07:06:07.270 回答