web-dev-qa-db-fra.com

Bootstrap et conflit jQueryUI

J'essaie d'utiliser tooltip sur une vue qui fait référence à la fois jQueryUI et Bootstrap 3 . J'ai fait un échantillon ici . Si je charge le Boostrap après le js de jQueryUI alors l'appel tooltip() réussit mais si j'appelle jQueryUI après Bootstrap alors j'obtiens une erreur et rien ne fonctionne. Vous pouvez l'essayer Il y a beaucoup de discussions à ce sujet sur Internet et j'ai demandé autour de GitHub mais je n'ai pas encore trouvé de solution.

javascriptjquerycssjquery-uitwitter-bootstrap-3
17
lbrahim

La solution idéale sera de prendre QueryUI sans info-bulle. Cela fonctionnera. Dans le cas où vous ne souhaitez pas le faire, veuillez inclure Bootstrap après JQueryUI. Assurez-vous que vous disposez de composants uniques pour chacun (vous pouvez créer des bibliothèques personnalisées avec les composants requis)

Bootstrap a un moyen de réinitialiser n'importe quel composant comme:

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

Le code ci-dessus fonctionnera lorsque bootstrap est chargé après JQueryUI

Réf: http://getbootstrap.com/javascript/

Voici le code pertinent de Bootstrap:

  var old = $.fn.tooltip

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


  $.fn.tooltip.noConflict = function () {
    $.fn.tooltip = old
    return this
  }
41
closure

Au lieu d'inclure jquery-ui.js, incluez les bibliothèques individuelles selon vos besoins et omettez l'infobulle jquery-ui.

Par exemple, si tout ce dont vous avez besoin est jquery-ui sortable, utilisez ceci:

<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
supersan