8

短的

在同一页面上使用 2 个库：jQuery UI 和 Twitter Bootstrap：

  • jQuery UI 对我来说非常重要，因为几乎所有的 UI 都是基于它构建的
  • Twitter Bootstrap 仅适用于具有下拉菜单功能的拆分按钮。

现在，问题是两个库都有相同的命名函数，它们相互冲突：

详细的

这是 jQuery UI 和 Twitter Bootstrap 按钮功能之间冲突的示例

请进入本网站。按桌子上的推荐按钮

在此处输入图像描述

将出现 jQuery UI 模式窗口。我在模态窗口中使用了 jquery ui 组合框。问题是， jquery ui 组合框演示中没有向下箭头按钮。

在此处输入图像描述

我试图找出导致问题的原因：查看组合框代码，当它调用 .button() 时，它进入 bootstrap.min.js，而不是 jqui.js。

如您所见，这是 2 个 js 库之间冲突的证明。

顺便说一句，这是jsFiddle，它在没有引导程序的情况下运行良好。

问题

我有多种方法来解决这个冲突问题（没有触摸网站的功能）我需要获得与带有下拉菜单的拆分按钮完全相同的功能（Twitter Bootstrap）：

  • 如果可能在 jQuery-UI 中（类似这样，但带有下拉菜单）
  • else 仅在 CSS + HTML 中

并摆脱 Twitter Bootstrap。任何解决方案都非常感谢。我已经准备好为好的答案提供 200 次代表（作为赏金）。提前谢谢

4

5 回答 5

12

当前版本的引导程序 (v2.2.2) 现在有一个 noConflict 选项。只需在您的 bootstrap 和 jquery 脚本标记之后但在任何使用该button()函数之前将其插入某个位置。

<script type='text/javascript'>
    $.fn.bootstrapBtn = $.fn.button.noConflict();
</script>

或者，您可以使用$(document).ready(handler)，但您仍然必须确保在button()调用之前发生替换。

一旦执行了那行代码，button()它将成为 JqueryUI 的按钮，bootstrapBtn()并将成为 Bootstrap 的版本。

于 2013-01-22T08:41:17.790 回答
8

要修复 Bootstrap 和 jQuery UI 函数之间的冲突，请重命名其中之一：

<script type="text/javascript" src="bootstrap.min.js"></script>
<script type="text/javascript">
    $.fn.bsbutton = $.fn.button;
</script>
<script type="text/javascript" src="jquery-ui.min.js"></script>

然后你可以随意调用每个函数：

<script type="text/javascript">
    $(".button-one").button()   // jQueryUI button
    $(".button-two").bsbutton()  // Bootstrap button
</script>

您可以将此技术用于您需要的任何功能。

记住顺序include A -> rename A -> include B。

于 2012-09-23T10:51:03.557 回答
1

如果您只使用 Twitter Bootstrap 的下拉插件，则不需要该.button()插件。

转到自定义引导页面并取消选择所有 jQuery 插件，然后仅选择下拉菜单之一。如果需要，您也可以取消选择某些 CSS。

如果您需要这两种实现（Twitter Bootstrap 和 jQuery UI），您可以将所有内容重命名.button为类似文件.bsButton中的bootstrap-button.js名称（或在非缩小版本中找到此部分） - 未经测试。

于 2012-09-23T09:33:21.277 回答
0

所有其他答案都修复了 jQuery UI 按钮和引导按钮之间的冲突，但您不能使用引导数据 API 来重命名button()函数。只能手动使用新命名的bootstrapBtn()函数。

我找到了解决方案：

  • 在文件(\$[.\w]+\.)button中查找并替换所有出现的正则表达式。\1btnbootstrap.js

  • 或者使用这个sed脚本：

    #!/bin/bash
# Change bootstrap3 $.fn.button() function to $.fn.btn() for no conflict with jQuery UI
sed "s/\(\$[[:alnum:]._]\+\.\)button/\1btn/g" bootstrap/js/bootstrap.js > bootstrap/js/bootstrap.btn.js
sed "s/\(fn\.\)button/\1btn/g" bootstrap/js/bootstrap.min.js | sed "s/button\((\)/btn\1/g" > bootstrap/js/bootstrap.btn.min.js

之后，您可以使用 bootstrap data-api 进行按钮绑定，也可以手动使用btn()函数代替button()Bootstrap，同时仍然使用 jQuery UIbutton()函数。

于 2013-10-12T05:17:07.690 回答
0

我建议进行自定义 jQueryUI 或 Bootstrap 构建——两者都在网站上提供了这种可能性。

我使用带有核心、效果、交互的 jQueryUI 自定义构建，但没有小部件，这通常会导致冲突。

于 2014-04-29T15:44:22.647 回答