2具有相同名称冲突的JS函数

Question

短

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

• jQuery UI对我来说非常重要，因为几乎所有基于它构建的UI事物
• 仅适用于split button with dropdown menu功能的Twitter Bootstrap。

现在，问题是这两个库具有相同的命名函数，这些函数彼此冲突：

详细

以下是jQuery UI与Twitter Bootstrap按钮功能之间的冲突示例

请输入to this website。按表格上的推荐按钮

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

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

正如您所看到的那样，2 js库之间存在冲突。

顺便说一下，这里是jsFiddle，没有bootstrap就可以正常运行。

问题

我有多种方法可以解决这个冲突问题（没有触及网站的功能）我需要获得与split button with dropdown menu (Twitter Bootstrap):完全相同的功能

• 如果可能的话，在jQuery-UI中（类似this，但有下拉菜单）
• 其他仅限CSS + HTML

并摆脱Twitter Bootstrap。非常感谢任何解决方案我已准备好给予200名代表好的回答（作为赏金）。 Thx提前

Answer 1

当前版本的bootstrap（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的版本。

Answer 2

要修复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。

Answer 3

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

转到customize bootstrap page并取消选择所有jQuery插件，然后只选择下拉列表。如果需要，你也可以取消选择一些CSS。

<小时/> 如果您需要两种实现（Twitter Bootstrap和jQuery UI），您可以将所有.button重命名为the bootstrap-button.js file中的.bsButton（或在非缩小版本中查找此部分） - 不是测试。

Answer 4

所有其他答案修复了jQuery UI按钮和引导按钮之间的冲突，但您不能将bootstrap data-api用于重命名的button()函数。仅手动使用新命名的bootstrapBtn()函数。

我找到了解决方案：

• 在(\$[.\w]+\.)button文件中查找并替换所有正则表达式\1btn到bootstrap.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 UI button()函数。

Answer 5

我建议自定义jQueryUI或Bootstrap构建 - 都在网站上提供这种可能性。

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