Geek asks and answers

How to get Twitter Bootstrap to work with prototype.js?

Take a look at this code snippet http://jsfiddle.net/u6N6T/3/ . The accordion is working properly.

But it breaks when prototype.js loads, see http://jsfiddle.net/jWZBD/8/ .

I followed http://api.jquery.com/jQuery.noConflict/ so that jQuery works with the prototype, but the accordion does not work even if I wrap bootstrap.js inside "jQuery (document) .ready (function ($) {}); ".

Is there anyone who knows how to get Bootstrap to work when loading a prototype? Or do I need to convert all existing prototype based javascripts in jQuery?

+5
source share
7 answers

There was the same problem. I could not fix it, but found a job.

First use $.noConflict()and do as ShaunOReilly said, and replace all the $characters in Bootstrap.js with jQuery. Note, however, that there are many variables in the bootstrap with the name $ at the beginning - these are not jQuery references, but are part of the variable name. You do not need to change them. I found that finding and replacing instances $., $(and $) does the trick.

Then do not download the upload-transition plugin. If you load the full lib into one script, then go in and remove the transition function (bootstrap.js v2.3.0 at the top right). You will lose the transition animation, but the collapse structures will still work. See this script for an example.

, - , / . , , . . api.

, navbar , :

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

, PrototypeJS, Bootstrap jQuery. Bootstrap, Bootstrap: https://github.com/jwestbrook/bootstrap-prototype

+3

, CSS3 jQuery... : CSS3

+1

:

twitter js , $ "jQuery"

, , .

- Prototype jQuery. Prototype, jQuery.

: jQuery Prototype Conflict

: http://www.dynamicdrive.com/forums/showthread.php?29309-Content-Glider-and-Lighbox-Conflict

0

Bootstrap Prototype. , , . , Prototype , jQueryNoConflict() 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);
    }
}
0

bootstrap.js, :

this.$element.trigger(startEvent);

:

this.$element.triggerHandler(startEvent);

0
source

More articles:


All Articles