2 JS funktioniert mit demselben Namenskonflikt
Kurz
Verwenden von 2 Bibliotheken auf derselben Seite: jQuery UI und Twitter Bootstrap:
- jQuery UI ist sehr wichtig für mich, weil fast alle UI-Dinge darauf basieren
- Twitter Bootstrap nur für die Funktion Split-Button mit Dropdown-Menü .
Nun, das Problem ist, dass beide Bibliotheken dieselben Funktionen haben, die miteinander in Konflikt stehen:
Detailliert
Hier ist ein Beispiel für einen Konflikt zwischen den Funktionen von jQuery UI und Twitter Bootstrap-Schaltflächen
Bitte geben Sie auf dieser Website ein . Drücken Sie die Schaltfläche "Empfehlen" auf der Tabelle
jQuery UI modales Fenster wird angezeigt. Ich habe jquery ui combobox im modalen Fenster verwendet. Das Problem ist, dass es keinen Abwärtspfeil gibt, wie auf jquery ui combobox gezeigt.
Ich habe versucht, herauszufinden, was das Problem verursacht: Durch den Combobox-Code geschaut, und als er .button () aufgerufen hat, ist er in bootstrap.min.js, nicht in jqui.js gegangen.
Wie Sie sehen, ist dies ein Beweis für den Konflikt zwischen zwei js-Bibliotheken.
Übrigens, hier ist jsFiddle , wo es ohne Bootstrap funktioniert.
Problem
Ich habe mehrere Möglichkeiten, dieses Konfliktproblem zu lösen (OHNE BERÜHRUNG DER FUNKTIONALITÄT DER WEBSITE) Ich muss genau die gleiche Funktionalität bekommen wie Split-Taste mit Dropdown-Menü (Twitter Bootstrap):
- wenn möglich in jQuery-UI (etwas wie dies , aber mit Dropdown-Menü)
- sonst nur in CSS + HTML
und loswerden Twitter Bootstrap. Jede Lösung wird sehr geschätzt. Ich bin bereit, 200 Wiederholungen zu geben, gute Antwort (als Kopfgeld). Thx im Voraus
5 Antworten
Die aktuelle Version von Bootstrap (v2.2.2) hat jetzt eine noConflict-Option. Fügen Sie diese Stelle nach den Tags bootstrap und jquery script ein, aber bevor Sie die Funktion button() verwenden.
Alternativ können Sie $(document).ready(handler) verwenden, aber Sie müssen sicherstellen, dass die Ersetzung stattfindet, bevor button() aufgerufen wird.
Sobald diese Codezeile ausgeführt wurde, wird button() die Schaltfläche von JqueryUI und bootstrapBtn() die Version von Bootstrap.
Um die Kollision zwischen den Bootstrap- und jQuery-Funktionen der Benutzeroberfläche zu beheben, benennen Sie eine von ihnen um:
%Vor%Und dann können Sie jede Funktion nach Belieben aufrufen:
%Vor%Sie können diese Technik für jede Funktion verwenden, die Sie benötigen.
Merken Sie sich die Reihenfolge include A -> rename A -> include B .
Wenn Sie nur das Dropdown-Plugin von Twitter Bootstrap verwenden, brauchen Sie das .button() -Plugin nicht.
Gehen Sie zur Seite anpassen und deaktivieren Sie alle jQuery-Plugins und wählen Sie dann nur das Dropdown-Menü aus. Sie können auch einige CSS entfernen, wenn Sie möchten.
Wenn Sie beide Implementierungen benötigen (Twitter Bootstrap und jQuery UI), könnten Sie alle
.button in etwas wie .bsButton umbenennen in die Datei bootstrap-button.js (oder finden Sie diesen Abschnitt in einer nicht-verkleinerten Version) - nicht getestet.
Alle anderen Antworten, die den Konflikt zwischen der jQuery UI-Schaltfläche und der Bootstrap-Schaltfläche beheben, aber Sie können die Bootstrap-Daten-API nicht für die umbenannte button() -Funktion verwenden. Nur manuell mit new-name bootstrapBtn() function.
Ich finde eine Lösung:
- Suchen und ersetzen Sie alle Vorkommen von regex
($[.\w]+\.)buttonbisbtninbootstrap.jsfile. -
Oder verwenden Sie dieses
%Vor%sedscript:
Danach können Sie bootstrap data-api für die Schaltflächenbindung verwenden und auch manuell btn() function anstelle von button() für Bootstrap verwenden, während Sie noch jQuery UI button() function verwenden.
Tags und Links javascript jquery jquery-ui button twitter-bootstrap