Short

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

• jQuery UI 对我来说非常重要，因为几乎所有的 UI 东西都是基于它构建的
• Twitter Bootstrap 仅适用于带下拉菜单的拆分按钮 http://www.jqueryui.com/demos/button/#splitbutton功能。

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

Detailed

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

请输入到这个网站 http://ecruting.tisoft.me/。按桌子上的推荐按钮

将出现 jQuery UI 模式窗口。我用了jquery ui 组合框 http://jqueryui.com/demos/autocomplete/#combobox模态窗口内。问题是，没有如图所示的向下箭头按钮jquery ui 组合框 http://jqueryui.com/demos/autocomplete/#combobox demo.

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

正如你所看到的，这是两个 js 库之间冲突的证明。

顺便说一句，这是jsFiddle http://jsfiddle.net/sBXRn/在没有引导程序的情况下运行良好的地方。

Problem

我有多种方法来解决这个冲突问题（无需触及网站的功能）我需要获得与带下拉菜单的拆分按钮（Twitter Bootstrap）： http://twitter.github.com/bootstrap/components.html#buttonDropdowns

• 如果可能的话，在 jQuery-UI 中（类似this http://www.jqueryui.com/demos/button/#splitbutton但有下拉菜单）
• else 仅在 CSS + HTML 中

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

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