Jak zdobyć Twitter Bootstrap do pracy z prototype.js?

Question

Sprawdź ten fragment kodu: http://jsfiddle.net/u6N6T/3/. Akordeon działa poprawnie.

Ale jest uszkodzony, gdy załadowany jest prototype.js, patrz http://jsfiddle.net/jWZBD/8/.

Połączyłem się z http://api.jquery.com/jQuery.noConflict/, aby JQuery działał razem z prototypem, ale akordeon nie działa, nawet jeśli zawijam plik bootstrap.js do "jQuery (document) .ready (function ($) {});".

Czy jest ktoś, kto potrafi uruchomić Bootstrap podczas ładowania prototypu? Czy muszę przekonwertować wszystkie istniejące javascripty oparte na prototypach na JQuery?

Answer 1

miał ten sam problem. Nie udało mi się tego naprawić, ale znalazłem pracę.

Najpierw użyj $.noConflict() i zrób jak ShaunOReilly powiedział i zastąp wszystkie znaki $ w Bootstrap.js z jQuery. Zwróć jednak uwagę, że bootstrap ma wiele zmiennych o nazwie $ na początku - nie są to odwołania do jQuery, ale są częścią nazwy zmiennej. Nie musisz ich zmieniać. Zauważyłem, że wyszukiwanie i zastępowanie wystąpień $., $( i $) robi lewę.

Następnie nie ładuj wtyczki do uruchamiania systemu. Jeśli ładujesz pełną bibliotekę w jednym skrypcie, wejdź i usuń funkcję przejścia (po prawej stronie u góry pliku bootstrap.js v2.3.0). Utracisz animacje przejścia, ale struktury zwinięcia nadal będą działać. Zobacz przykład this fiddle.

Naprawi to działanie przełączania w interakcji użytkownika, ale automatyczne przełączniki będą nadal łamane - na przykład pokazywanie/ukrywanie menu nawigacji na rozmiarach strony. Aby rozwiązać te problemy, wystarczy zaimplementować własny detektor zdarzeń i bezpośrednio wywołać funkcję bootstrap. Zobacz numer api w celach informacyjnych.

Na przykład, aby rozwiązać problem z paska nawigacyjnego na stronie zmienia rozmiar, użyłem tego kodu:

window.onresize = function(event) { 
    var nav = jQuery(".collapse"); 
    if (jQuery(window).width() > 940) nav.collapse('show'); 
    else nav.collapse('hide'); 
} 

Answer 2

dwie opcje:

Wymień wszystko w aktach Twitter js ze zwyczajem jednym, i zastąpić wszystkie $ znaki ze słowem „jQuery”

można napisać własną zaklejony rodzaju funkcją przełączania jeśli to jest jedynym bitem, który jest problemem.

Inną opcją jest konwersja elementów Prototype do jQuery. Osobiście nienawidzę używać prototypu, kiedy mogę używać jQuery.

Oto kolejny przykład z podobnym problemem: jQuery & Prototype Conflict

Albo możliwe rozwiązanie można znaleźć tutaj: http://www.dynamicdrive.com/forums/showthread.php?29309-Content-Glider-and-Lighbox-Conflict

Answer 3

To nie jest idealne, ale można zakodować akordeonie CSS3 i jQuery bypass cały chaos ... piły jeden tutaj: Accordion with CSS3

Answer 4

Dla programistów używających PrototypeJS, Bootstrap wymaga użycia jQuery.Jeśli nie chcesz, aby załadować inną bibliotekę tylko do obsługi interakcji Bootstrap używać tego widełki bootstrap: https://github.com/jwestbrook/bootstrap-prototype

Answer 5

wiem, że to jest stare pytanie, ale próbowałem wszystkie propozycje znalezione tam bezskutecznie. Rzecz, która pracowała dla mnie było nieznacznie zmieniając biblioteki prototyp filtrować pewne zdarzenia Bootstrap jak tutaj -

https://github.com/zikula/core/commit/079df47e7c1f536a0d9eea2993ae19768e1f0554

Answer 6

This article dał mi pewien wgląd w podstawowej problemu Bootstrap użyciu prototypu. Obejścia tam podane działają właściwie. Mam regulować pierwszy z nich lekko i dodano sprawdzanie czy Prototype jest faktycznie załadowane i połączono je w jQueryNoConflict() jako zamiennik dla standardowego jQuery.noConflict():

function jQueryNoConflict() 
{ 
    jQuery.noConflict(); 

    if (typeof Prototype !== "undefined" && Prototype.BrowserFeatures.ElementExtensions) 
    { 
     var disablePrototypeJS = function (method, pluginsToDisable) 
     { 
      var handler = function (event) 
      { 
       event.target[method] = undefined; 
       setTimeout(function() 
       { 
        delete event.target[method]; 
       }, 0); 
      }; 

      pluginsToDisable.each(function (plugin) 
      { 
       jQuery(window).on(method + '.bs.' + plugin, handler); 
      }); 
     }, 

     pluginsToDisable = ['collapse', 'dropdown', 'modal', 'tooltip', 'popover', 'tab']; 
     disablePrototypeJS('show', pluginsToDisable); 
     disablePrototypeJS('hide', pluginsToDisable); 
    } 
} 

Answer 7

Jeśli używasz bootstrap.js wymienić:

this.$element.trigger(startEvent); 

z:

this.$element.triggerHandler(startEvent); 

będzie działać płynnie