2具有相同名称的冲突JS功能 [英] 2 JS functions with same name conflict

问题描述

是在同一页2库：jQuery UI的和Twitter的引导：

Using 2 libraries at same page: jQuery UI and Twitter Bootstrap:

• jQuery UI的，因为几乎所有的事情UI建立了基于这对于我来说很重要


• Twitter的引导只是为了与下拉菜单功能劈扣。

现在的问题是这两个库有相同的命名功能，这与对方发生冲突：

Now, the problem is both libraries has same named functions which conflicts with each other:

我这里是jQuery用户界面和Twitter的引导按钮功能之间的冲突的

Here is example of conflict between jQuery UI and Twitter Bootstrap button functions

请输入本网站。 preSS推荐表上按钮

Please enter to this website. Press Recommend button on table

将出现jQuery UI的模态窗口。我用 jQuery UI的组合框模态窗口内。问题是，有没有倒在 jQuery UI的组合框演示所示箭头按钮。

jQuery UI modal window will appear. I used jquery ui combobox inside modal window. The problem is, there is no down arrow button as shown on jquery ui combobox demo.

我试图找到是什么原因导致的问题：通过组合框code看，当它被称为.button（）它走进bootstrap.min.js，不jqui.js.

I tried to find what causes the problem: Looked through combobox code, and when it called .button() it went into bootstrap.min.js, not jqui.js.

正如你看到它的2 JS库之间的冲突的证据。

As you see it's proof of conflict between 2 js libraries.

顺便说一句，这里是的jsfiddle 在那里工作良好，没有引导。

Btw, Here is jsFiddle where it works well without bootstrap.

我有多个方法来解决这个矛盾的问题（不碰网站功能），我需要得到完全相同的功能的拆分按钮，下拉菜单（Twitter的引导）：

I have multiple ways to solve this conflict problem (WITHOUT TOUCHING FUNCTIONALITY OF THE WEBSITE) I need to get exactly same functionality as split button with dropdown menu (Twitter Bootstrap):

• 如果可能的jQuery中的用户界面（类似这但随着下拉菜单）


• 在别的CSS + HTML仅

• if possible in jQuery-UI (something like this but with dropdown menu)
• else in CSS + HTML only

和摆脱了Twitter的引导。任何解决方案大大AP preciated。我准备给200销售代表很好的答案（如奖金）。 THX提前

and get rid off Twitter Bootstrap. Any solutions greatly appreciated. I'm ready to give 200 reps to good answer (as bounty). Thx in advance

推荐答案

自举（V2.2.2）的当前版本现在有一个noConflict选项。只需插入一些这方面的地方你的引导和jQuery脚本标记之后，但在按钮的任何使用前（）功能。

The current version of bootstrap (v2.2.2) now has a noConflict option. Just insert this some place after your bootstrap and jquery script tags but before any usage of the button() function.

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

另外，你可以使用 $（文件）。就绪（处理器），但你仍然必须确保替换之前，出现按钮（） 被调用。

Alternatively, you can use $(document).ready(handler), but you still have to make sure substitution occurs before button() is called.

一旦执行code的那行，按钮（）将jQueryUI的的按钮和 bootstrapBtn（）将引导的版本。

Once that line of code is executed, button() will be JqueryUI's button, and bootstrapBtn() will be Bootstrap's version.

这篇关于2具有相同名称的冲突JS功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！