引导程序和 jQueryUI 冲突

Posted 2023-03-06

【中文标题】引导程序和 jQueryUI 冲突

【英文标题】：Bootstrap and jQueryUI Conflict

【发布时间】：2014-06-19 03:31:01

【问题描述】：

我正在尝试在同时引用 jQueryUI 和 Bootstrap 3 的视图上使用 tooltip。我制作了一个样本here。如果我在 jQueryUI 的 js 之后加载 Boostrap，那么 tooltip() 调用是成功的，但是如果我在 Bootstrap 之后调用 jQueryUI，那么我会收到一个错误并且没有任何效果。你可以自己试试。网上有很多关于这个的讨论，我在 GitHub 上四处询问，但我还没有找到解决方案。

【问题讨论】：

你想同时使用还是只使用 Bootstrap 之一？

您可以在没有tooltip 代码的情况下下载jQueryUI，只需在他们的custom download page 上下载您真正想要的内容。或者，您需要在对null 上一个方法的库调用之间有一个脚本。

@closure 我需要在同一个视图中引用它们，但我希望只使用 Boostrap 的工具提示。

@balexandre 谢谢。定制一个是一个很好的解决方案。您能否详细说明您的第二个建议，即Or, you need to have a script between the library calls to null the previous method.，也许请举个例子。

@Md.lbrahim 这是您在同一页面中使用 jQueryUI Tooltip 和 Bootstrap Tooltip 的示例：jsbin.com/bihazugo/1 - ADDED:​​> 有点搜索时您可以看到相同的答案：***.com/a/19247955/28004

【参考方案1】：

最简单的解决方案是先放jquery-ui.js，然后放bootstrap-datepicker.js 这对我有用。

【参考方案2】：

不包括 jquery-ui.js，而是根据需要包括各个库并省略 jquery-ui 工具提示。

例如，如果您只需要 jquery-ui 可排序，则使用此：

<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/jquery-ui/ui/core.js"></script>
<script src="bower_components/jquery-ui/ui/widget.js"></script>
<script src="bower_components/jquery-ui/ui/mouse.js"></script>
<script src="bower_components/jquery-ui/ui/sortable.js"></script>

【参考方案3】：

理想的解决方案是使用不带工具提示的 QueryUI。这将起作用。如果您不想这样做，请在 JQueryUI 之后包含 Bootstrap。确保每个组件都有独特的组件（您可以使用所需组件自定义构建两个库）

Bootstrap 可以重置任何组件，例如：

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

上面的代码在 JQueryUI 之后加载 bootstrap 时会起作用

参考：http://getbootstrap.com/javascript/

这是来自 Bootstrap 的相关代码：

  var old = $.fn.tooltip

  $.fn.tooltip = function (option) 
    ....
  


  $.fn.tooltip.noConflict = function () 
    $.fn.tooltip = old
    return this
  

【讨论】：

谢谢它确实有效，但有点奇怪。看看 [这里](jsfiddle.net/zPAm7/1/)。如果我仍然保持对tooltip() 的调用不应该bootstrapTt 现在封装引导程序的工具提示功能，它会起作用吗？

Tooltip 在 noConflict 后应该指向 JQueryUI，而 bootstrapTooltip 指向 bootstrap。我不确定 JQueryUI 工具提示的外观。我已经编辑了答案，以提供来自 BootStrap 的相关代码的 sn-p。

很抱歉我之前的样本有误。我没有覆盖tooltip。请看一下更新的小提琴。现在它根本不起作用。 jsfiddle.net/zPAm7/2

将 tooltip.destroy 更改为 $element.bootstrapTt("destroy")。它现在正在工作。 jsfiddle.net/zPAm7/3

我必须同意使用没有工具提示的 jquery-ui 构建是要走的路。很难想象为什么你会在同一个项目中同时需要这两个，然后把东西放进去然后再拿出来是浪费和不雅的。