jquery-ui cdn - I suggerimenti di jQueryUI sono in competizione con Twitter Bootstrap




5 Answers

Sia jQuery UI che Bootstrap usano tooltip per il nome del plugin. Utilizzare $.widget.bridge per creare un nome diverso per la versione dell'interfaccia utente jQuery e consentire al plug-in Bootstrap di rimanere nominato tooltip (provare a utilizzare l'opzione noConflict nel widget Bootstrap comporta solo un sacco di errori perché non funziona correttamente; quel problema è stato segnalato qui ):

// Resolve name collision between jQuery UI and Twitter Bootstrap
$.widget.bridge('uitooltip', $.ui.tooltip);

Quindi il codice per farlo funzionare:

// Import jQuery UI first
<script src="/js/jquery-ui.js"></script>
// Resolve name collision between jQuery UI and Twitter Bootstrap
$.widget.bridge('uitooltip', $.ui.tooltip);
// Then import bootstrap
<script src="js/bootstrap.js"></script>

Bel codice copia incolla che gestisce anche il conflitto dei pulsanti:

<script type="application/javascript" src="/js/jquery.js"></script>
<script type="application/javascript" src="/js/jquery-ui.js"></script>
<script>
/*** Handle jQuery plugin naming conflict between jQuery UI and Bootstrap ***/
$.widget.bridge('uibutton', $.ui.button);
$.widget.bridge('uitooltip', $.ui.tooltip);
</script>
<script type="application/javascript" src="/js/bootstrap.js"></script>
movable draggable

Sono stato in grado di ottenere alcuni suggerimenti sugli strumenti per lavorare finalmente con il seguente codice:

<a href="#" rel="tooltip" title="Tool tip text here">Hover over me</a>

e poi

<script>
    $('[rel=tooltip]').tooltip();
</script>

Il problema che sto incontrando è che sta usando i tooltips di jQueryUI (niente frecce, grandi brutti tooltip) invece di Bootstraps.

Cosa devo fare per utilizzare le descrizioni di Bootstrap invece di jQueryUI?




Questo ha funzionato per me:

Se è necessario utilizzare l'interfaccia utente di JQuery ma si desidera utilizzare la descrizione comando di bootstrap, è sufficiente ottenere una versione personalizzata di JQuery-UI da questo website .

Basta deselezionare l'opzione "Tooltip" e scaricarla (sarà qualcosa come "jquery-ui-1.10.4.custom.js").

Semplicemente aggiungilo al tuo progetto invece della versione che stai attualmente usando e sei pronto per fare festa. Ciò eviterà il conflitto. Ha funzionato come un incantesimo per me!




Nel caso in cui tu debba caricare jquery-ui.js dopo bootstrap.js ecco come farlo:

<script type="application/javascript" src="/js/jquery.js"></script>
<script type="application/javascript" src="/js/bootstrap.js"></script>

<script>var _tooltip = jQuery.fn.tooltip;</script>
<script type="application/javascript" src="/js/jquery-ui.js"></script>
<script>var jQuery.fn.tooltip = _tooltip;</script>




Che ne dici di usare solo i popover Bootstrap? I popover BS non creano lo stesso conflitto anche se richiedono lo stesso componente tooltip.js. Sì, sono più stilizzati ma non fanno sì che i miei pulsanti dell'interfaccia utente di JQuery diventino instabili.

Sto usando l'interfaccia utente di Jquery solo per autocomplete / combobox personalizzate (quindi non posso rivendicare altri controlli JQ-UI sono ok) e nessuno dei precedenti ha funzionato per risolvere il problema CSS sui pulsanti della combo diventando "unstyled" durante l'invocazione di BS Tooltips. Passare a BS Popovers ha fornito essenzialmente lo stesso effetto senza conflitti, non importa il riordino del mio script e non sono necessarie istruzioni esplicite sul bridge.




C'è una soluzione facile e buona, basta riorganizzare il tuo file bootstrap e il link del file ui jquery in questo modo:

 <script src="/js/jquery-ui.min.js" type="text/javascript"></script>
 <script src="/js/bootstrap.min.js" type="text/javascript"></script>

Basta caricare jQueryui prima di caricare il file jostra di boostrap. È lavoro per me.




Related