jQueryUI Araç İpuçları Twitter Bootstrap ile rekabet ediyor

Sonunda aşağıdaki kod ile çalışmak için bazı araç ipuçları elde edebildim :

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

ve sonra

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

İçinde çalışıyorum sorun Bootstraps yerine jQueryUI araç ipuçları (ok yok, büyük çirkin araç ipuçları) kullanıyor olmasıdır.

JQueryUI yerine Bootstrap Araç İpuçlarını kullanmak için ne yapmam gerekir?

Hem jQuery UI hem de Bootstrap tooltipeklentinin adı için kullanır . Kullanım $.widget.bridge(kullanmaya çalışırken jQuery UI sürümü için farklı bir ad oluşturmak ve Bootstrap adlı araç ipucunu kalmak eklentisi izin noConflictdüzgün çalışmaması nedeniyle Widget sadece hataların bir sürü neden Bootstrap seçeneği; o konu burada bildirilmiştir ):

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

Bu yüzden çalışması için kod:

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

Düğme çakışmasını da işleyen güzel kopya yapıştırma kodu:

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

Basit bir çözüm, jquery-ui.js'den sonra bootrap.js'yi yüklemektir, böylece bootstrap .tooltip yöntemi öncelik kazanır.

Bu benim için çalıştı:

JQuery-UI kullanmanız gerekiyor ancak bootstrap araç ipucunu kullanmak istiyorsanız, bu web sitesinden özelleştirilmiş bir JQuery-UI sürümü edinin .

Basitçe "Araç İpucu" seçeneğinin işaretini kaldırın ve indirin ("jquery-ui-1.10.4.custom.js" gibi bir şey olacaktır).

Şu anda kullanmakta olduğunuz sürüm yerine projenize eklemeniz yeterlidir ve partiye hazırsınız. Bu çatışmayı önleyecektir. Benim için bir cazibe gibi çalıştı!

Bundan jquery-ui.jssonra yüklemeniz gerekiyorsa bootstrap.js, bunu nasıl yapacağınız aşağıda açıklanmıştır:

<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>jQuery.fn.tooltip = _tooltip;</script>

Bu jquery-ui araç ipucunu geçersiz kılar ve her zaman önyükleme kullanır.

Bootsrap başlatıldıktan sonra kullanıcı arayüzünün çağrılacağını varsayarsak

Bootstrap işlevini kullanıcı arayüzü başlatılmadan hemen önce saklayın

jQuery.fn.bstooltip = jQuery.fn.tooltip; 

Sonra şu şekilde çağırın

$('.targetClass').bstooltip();

Bu çözüm benim için iyi çalışıyor gibi görünüyor.

// handle jQuery plugin naming conflict between jQuery UI and Bootstrap
$.widget.bridge('uibutton', $.ui.button);
$.widget.bridge('uitooltip', $.ui.tooltip);

Bunun yerine sadece Bootstrap popover'ları kullanmaya ne dersiniz? BS popovers, aynı tooltip.js bileşenini gerektirmelerine rağmen aynı çakışmayı oluşturmaz. Evet, daha stilize edilmiş ancak JQuery UI düğmelerimin sakat olmasına neden olmuyor.

Jquery UI yalnızca özel otomatik tamamlama / comboboxes için kullanıyorum (bu yüzden diğer JQ-UI denetimlerinin iyi olduğunu iddia edemez) ve yukarıdakilerin hiçbiri BS Tooltips'i çağırırken combobox düğmelerinde "biçimlenmemiş" hale gelen CSS sorununu düzeltmek için çalıştı. BS Popovers'a geçiş, çakışma, komut dosyası içe aktarma işlemimin yeniden sıralanması ve açık köprü ifadelerine gerek olmadan temelde aynı etkiyi sağladı.

jQuery.noConflict () kullanmayı deneyin ve bunun size yardımcı olup olmadığını görün. Önyükleme ve jQuery aynı ad alanını kullanıyor gibi görünüyor ve belki de bootstrap ve jQuery araç ipuçları aynı işleve yüklenir veya birincisi önce yüklenir.

Önce hangi kitaplığın yüklendiğini de kontrol edebilirsiniz. Genellikle aynı işlevi javascript'te iki kez bildirirseniz, ikincisi kullanılan işlevdir.

Üçüncüsü, jQueryUI paketini ( web sitelerinde) kontrol edin ve araç ipuçlarını içermeyen bir sürümü indirip indiremeyeceğinizi görün (kontrol ettim ve bu tamamen yapılabilir).

Kolay ve iyi bir çözüm var, sadece bootstrap ve jquery ui dosya bağlantınızı aşağıdaki gibi yeniden düzenleyin:

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

Sadece boostrap js dosyasını yüklemeden önce jQueryui'yi yükleyin. Benim için iş.

Kolay bir yol, jquery-ui.js'den sonra bootstrap.js'yi yüklemektir, böylece bootstrap .tooltip jquery UI'larını geçersiz kılar. Requijs gibi bir modül yükleyici kullanıyorsanız, bootstrap'i jquery-ui'ye bağımlı hale getirebilirsiniz, örneğin:

requirejs.config({
    baseUrl: 'js',
    waitSeconds: 30,
    shim: {
        'bootstrap': {
            deps: [ 'jquery', 'jquery-ui' ]
        },...