¿Cómo hacer que Twitter Bootstrap funcione con prototype.js?

Question

Mira esta pieza del código http://jsfiddle.net/u6N6T/3/. El acordeón está funcionando correctamente.

Pero está roto cuando se carga prototype.js, consulte http://jsfiddle.net/jWZBD/8/.

Seguí http://api.jquery.com/jQuery.noConflict/ para hacer que JQuery funcione junto con el prototipo, pero el acordeón no funciona incluso si envuelvo el archivo bootstrap.js dentro de "jQuery (documento). Listo (función ($) {});".

¿Alguien sabe alguna manera de hacer que Bootstrap funcione cuando se carga el prototipo? ¿O debo convertir todos los javascripts basados ​​en prototipos existentes a JQuery?

Answer 1

tenía el mismo problema. No pude solucionarlo, pero encontré un trabajo alternativo.

Primero, use $.noConflict() y haga lo que ShaunOReilly dijo y reemplace todos los caracteres $ en Bootstrap.js con jQuery. Sin embargo, tenga en cuenta que ese bootstrap tiene muchas variables nombradas con $ al inicio; estas no son referencias a jQuery, sino que son parte del nombre de la variable. No necesita cambiarlos. Descubrí que la búsqueda y el reemplazo de instancias de $., $( y $) hacen el truco.

A continuación, no cargue el complemento de carga de transición. Si está cargando la lib completa en una secuencia de comandos, entre y elimine la función de transición (está en la parte superior de bootstrap.js v2.3.0). Perderá las animaciones de transición, pero las estructuras de colapso seguirán funcionando. Ver this fiddle para un ejemplo.

Esto solucionará el comportamiento de alternar en la interacción del usuario, pero las combinaciones automáticas seguirán rotas, como mostrar u ocultar el menú de navegación en el tamaño de la página. Para solucionar estos problemas, simplemente implemente su propio detector de eventos y llame directamente a la función de arranque que necesite. Consulte el api para referencia.

Por ejemplo, para resolver el problema con la barra de navegación en la página cambia el tamaño, he utilizado este código:

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

Answer 2

Dos opciones:

reemplazar todo en el archivo del gorjeo js con uno personalizado, y reemplazan todos los caracteres $ con la palabra "jQuery"

Usted puede escribir su propio tipo acordeón de la funcionalidad de conmutación si esto es el único que es el problema.

La otra opción es convertir cosas de Prototype en jQuery. Personalmente odio usar Prototype, cuando puedo usar jQuery.

Aquí es otro ejemplo de un problema similar: jQuery & Prototype Conflict

O una posible solución se puede encontrar aquí: http://www.dynamicdrive.com/forums/showthread.php?29309-Content-Glider-and-Lighbox-Conflict

Answer 3

No es lo ideal, pero podría codificar un acordeón CSS3 y derivación de todo el caos jQuery ... sierra uno aquí: Accordion with CSS3

Answer 4

Para aquellos desarrolladores que usan PrototypeJS, Bootstrap requiere el uso de jQuery.Si no desea cargar otra biblioteca solo para manejar las interacciones de Bootstrap, use este fork de Bootstrap: https://github.com/jwestbrook/bootstrap-prototype

Answer 5

Sé que esta es una pregunta antigua, pero probé todas las sugerencias que se descubrieron en vano. Lo que funcionó para mí fue cambiando ligeramente biblioteca de prototipo para filtrar ciertos eventos como aquí Bootstrap -

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

Answer 6

This article me dio una cierta penetración en el problema subyacente de Bootstrap usando Prototype. Las soluciones dadas allí en realidad están funcionando bien. He ajustado el primero ligeramente y se añadió un cheque si prototipo se carga realmente y lo ha combinado en un jQueryNoConflict() como un reemplazo para el jQuery.noConflict estándar():

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

Si está utilizando bootstrap.js , reemplace:

this.$element.trigger(startEvent); 

con:

this.$element.triggerHandler(startEvent); 

que funcionará sin problemas