2 JS Funktionen mit dem gleichen Namen-Konflikt

Kurze

Mit 2 Bibliotheken auf derselben Seite: jQuery UI und Twitter Bootstrap:

  • jQuery UI für mich sehr wichtig, weil fast alle UI-Dinge eingebaut, die auf ihm basieren
  • Twitter Bootstrap nur für split-button mit dropdown-Menü Funktionalität.

Nun, das problem ist, die beiden Bibliotheken hat die gleichen genannten Funktionen, die in Konflikt miteinander:

Detaillierte

Hier wird z.B. der Konflikt zwischen jQuery UI und Twitter Bootstrap button " - Funktionen

Bitte geben Sie auf dieser website. Drücken Sie Empfehlen-button auf Tabelle

2 JS Funktionen mit dem gleichen Namen-Konflikt

jQuery UI modal-Fenster wird angezeigt. Ich verwendet jquery-ui-combobox innen modales Fenster. Das problem ist, es gibt keine Pfeil nach unten-Taste, wie gezeigt, auf jquery-ui-combobox demo.

2 JS Funktionen mit dem gleichen Namen-Konflikt

Habe ich versucht zu finden was das problem verursacht: Sah durch combobox-code, und wenn es genannt .Taste() ging es in bootstrap.min.js nicht jqui.js.

Wie Sie sehen, ist es Beweis der Konflikt zwischen 2 js-Bibliotheken.

Btw, Hier ist jsFiddle wo es funktioniert auch ohne bootstrap.

Problem

Habe ich mehrere Möglichkeiten, um diesen Konflikt lösen problem (OHNE Sie zu BERÜHREN DIE FUNKTIONALITÄT der WEBSITE) die ich brauche, um genau die gleiche Funktionalität wie split-button mit dropdown-Menü (Twitter Bootstrap):

  • wenn möglich, im jQuery-UI (so etwas wie diese aber mit dropdown-Menü)
  • sonst in CSS + HTML nur

loszuwerden off Twitter Bootstrap. Alle Lösungen sehr geschätzt. Ich bin bereit zu geben, 200 Mitarbeiter, um eine gute Antwort (wie bounty). Thx im Voraus

  • Wahrheit sein erzählte, Twitter Bootstrap ist nicht speziell gefertigt, um die Arbeit mit jQuery UI oder anderen frameworks. Zum Beispiel, Twitter Bootstrap gilt Regeln zu bloßen Elemente, und dies wird den Konflikt der Regeln von jQuery UI. Ich denke, deine beste Chance ist die Verwendung von Namensräumen Twitter Bootstrap beide JS und CSS, aber dies erfordert eine Menge Aufwand. So, Portierung, die Funktionalität von jQuery UI ist der bessere Weg
InformationsquelleAutor heron | 2012-09-23
  1. 12

    Der aktuellen version von bootstrap (v2.2.2) hat jetzt eine noConflict option. Legen Sie einfach diesen gewissen Ort, nach der bootstrap-und jquery-script-tags aber vor jedem Einsatz der button() Funktion.

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

    Alternativ können Sie $(document).ready(handler), aber Sie müssen noch sicherstellen, dass substitution stattfindet, bevor die button() genannt wird.

    Einmal, dass die code-Zeile ausgeführt wird, wird button() werden JqueryUI-button, und bootstrapBtn() werden Bootstrap-version.

    • Arbeitete für mich. Ich hatte einen ähnlichen Konflikt mit ui-dialog-titlebar-close-Symbol " x " erscheinen nicht in der schließen-Schaltfläche und die bootsrap-Taste. Einfachste Lösung, wenn Sie über die neueste von allem ab Januar 2013
    • Für mich ist dies nur funktionierte, wenn ich den code vor dem laden jquery-ui.js NICHT nur vor meinem ersten Instanz von button() Verwendung.
    InformationsquelleAutor lastoneisbearfood
  2. 8

    Beheben der Kollision zwischen Bootstrap-und jQuery-UI-Funktionen umbenennen einer von Ihnen:

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

    Dann können Sie nennen jede Funktion wird:

    <script type="text/javascript">
    $(".button-one").button()   //jQueryUI button
    $(".button-two").bsbutton()  //Bootstrap button
</script>

    Diese Technik können Sie für jede Funktion die Sie benötigen.

    Erinnern, die Reihenfolge include A -> rename A -> include B.

    InformationsquelleAutor albertedevigo
  3. 1

    Wenn Sie nur mit dem dropdown-plugin von Twitter Bootstrap, die Sie nicht brauchen, die .button() plugin.

    Gehen Sie auf die anpassen bootstrap-Seite und deaktivieren Sie alle jQuery-plugins, dann wählen Sie nur das dropdown ein. Man könnte auch deaktivieren einige der CSS, wenn Sie wollen.

    Wenn Sie brauchen beide Implementierungen (Twitter Bootstrap und jQuery UI), könnten Sie benennen Sie alle .button etwas wie .bsButton im die bootstrap-button.js - Datei (oder in diesem Abschnitt in einem nicht-minified version) - nicht getestet.

    InformationsquelleAutor Sherbrow
  4. 0

    Alle anderen Antworten Befestigung Konflikt zwischen jQuery UI button und bootstrap-Taste, aber Sie können nicht die Verwendung von bootstrap-Daten-api für umbenannt button() Funktion. Nur manuell mit dem neuen Namen bootstrapBtn() Funktion.

    Ich eine Lösung finden:

    • Suchen und ersetzen alle vorkommen des regex (\$[.\w]+\.)button zu \1btn im bootstrap.js Datei.

    • Oder verwenden Sie diese sed Skript:

      #!/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

    Danach können Sie die Verwendung von bootstrap-Daten-api für die Schaltfläche Bindung und auch manuell verwenden btn() Funktion anstelle von button() für die Bootstrap-während noch unter Verwendung der jQuery-UI - button() Funktion.

    InformationsquelleAutor Ruslan Stelmachenko
  5. 0

    Schlage ich vor, eigene jQueryUI, oder Bootstrap-build - beide bieten diese Möglichkeit, auch auf websites.

    Ich verwenden Sie benutzerdefinierte build von jQueryUI mit Kern, Wirkungen, Wechselwirkungen, aber ohne widgets, die oft Ursachen für Konflikte.

    InformationsquelleAutor czLukasss
Schreibe einen Kommentar