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

Question

短

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

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

现在,问题是两个库具有相同的命名函数,它们彼此冲突:

详细

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

请进入本网站.按表格上的推荐按钮

将出现jQuery UI模式窗口.我在模态窗口中使用了jquery ui combobox.问题是,没有如jquery ui combobox演示中所示的向下箭头按钮.

我试图找到导致问题的原因:通过组合框代码查看,当它调用.button()时,它进入了bootstrap.min.js,而不是jqui.js.

如您所见,它证明了2 js库之间的冲突.

顺便说一句,这是jsFiddle,它没有bootstrap很好地工作.

问题

我有多种方法可以解决这个冲突问题(没有触及网站的功能)我需要通过下拉菜单(Twitter Bootstrap)获得与拆分按钮完全相同的功能:

• 如果可能的话,在jQuery-UI中(类似这样但有下拉菜单)
• 否则只在CSS + HTML中

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

Answer 1

当前版本的bootstrap(v2.2.2)现在具有noConflict选项.只需在引导程序和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()插件。

转到自定义引导页面并取消选择所有 jQuery 插件，然后仅选择下拉列表中的插件。如果需要，您还可以取消选择某些 CSS。

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