Magento Jquery引导程序和原型冲突?导航标签不起作用

Magento Jquery Bootstrap and Prototype conflict? nav-tabs dont work

本文关键字:导航 标签 不起作用 冲突 原型 Jquery 引导程序 Magento      更新时间:2024-03-16

我使用Magento 1.9.2.4和以下主题

https://github.com/webcomm/magento-boilerplate

它的描述是"HTML5推特引导3.1 Magento Boilerplate模板"

它与其他"Bootstrap responsible"功能配合得很好。我的问题是,这个网站上的所有以下内容在我的安装:

http://www.w3schools.com/bootstrap/bootstrap_tabs_pills.asp

"不起作用"意味着你可以点击下一个选项卡,但边框和突出显示等仍然在第一个选项卡上

Bootstrap的"导航药丸"也是如此。

在这个Boilerplate中有一个Bootstrap下拉菜单的变通方法:

jQuery.noConflict();
;(function ($) {
'use strict';
function Site(settings) {
    this.windowLoaded = false;
}
Site.prototype = {
    constructor: Site,
    start: function () {
        var me = this;
        $(window).load(function () {
            me.windowLoaded = true;
        });
        this.attach();
    },
    attach: function () {
        this.attachBootstrapPrototypeCompatibility();
        this.attachMedia();
    },
    attachBootstrapPrototypeCompatibility: function () {
        /*// Bootstrap and Prototype don't play nice, in the sense that
         // prototype is a really wacky horrible library. It'll
         // hard-code CSS to hide an element when a hide() event
         // is fired. See http://stackoverflow.com/q/19139063
         // To overcome this with dropdowns that are both
         // toggle style and hover style, we'll add a CSS
         // class which has "display: block !important"
         $('*').on('show.bs.dropdown show.bs.collapse active nav-tabs.active', function (e) {
         $(e.target).addClass('bs-prototype-override');
         });
         $('*').on('hidden.bs.collapse nav-tabs', function (e) {
         $(e.target).removeClass('bs-prototype-override');
         });*/
        var isBootstrapEvent = false;
        if (window.jQuery) {
            var all = jQuery('*');
            jQuery.each(['hide.bs.dropdown',
                'hide.bs.collapse',
                'hide.bs.modal',
                'hide.bs.tooltip',
                'hide.bs.popover',
                'hide.bs.tab'], function (index, eventName) {
                all.on(eventName, function (event) {
                    isBootstrapEvent = true;
                });
            });
        }
        var originalHide = Element.hide;
        Element.addMethods({
            hide: function (element) {
                if (isBootstrapEvent) {
                    isBootstrapEvent = false;
                    return element;
                }
                return originalHide(element);
            }
        });
    },
    attachMedia: function () {
        var $links = $('[data-toggle="media"]');
        if (!$links.length) return;
        // When somebody clicks on a link, slide the
        // carousel to the slide which matches the
        // image index and show the modal
        $links.on('click', function (e) {
            e.preventDefault();
            var $link = $(this),
                $modal = $($link.attr('href')),
                $carousel = $modal.find('.carousel'),
                index = parseInt($link.data('index'));
            $carousel.carousel(index);
            $modal.modal('show');
            return false;
        });
    }
};
jQuery(document).ready(function ($) {
    var site = new Site();
    site.start();
});
})(jQuery);

我已经在github上问过了,在github上没有回答问题

所以Bootstrap的Dropdown正在发挥作用。我的问题是我做错了什么还是遗漏了什么?

为什么导航标签在这里不起作用?

将"'power_components/bootstrap/js/tab.js'"tab.js添加到gullfile.js AND将tab类添加到script.js中解决了我的Bootstrap Nav Pills和Tabs问题。

       $('*').on('show.bs.dropdown show.bs. hide.bs.tab hidden.bs.tab', function(e) {
            $(e.target).addClass('bs-prototype-override');
        });
        $('*').on('hidden.bs.collapse', function(e) {
            $(e.target).removeClass('bs-prototype-override');
        });

最后,代码看起来就像这样:

jQuery.noConflict();
;(function($) {
'use strict';
function Site(settings) {
    this.windowLoaded = false;
}
Site.prototype = {
    constructor: Site,
    start: function() {
        var me = this;
        $(window).load(function() {
            me.windowLoaded = true;
        });
        this.attach();
    },
    attach: function() {
        this.attachBootstrapPrototypeCompatibility();
        this.attachMedia();
    },
    attachBootstrapPrototypeCompatibility: function() {
        // Bootstrap and Prototype don't play nice, in the sense that
        // prototype is a really wacky horrible library. It'll
        // hard-code CSS to hide an element when a hide() event
        // is fired. See http://stackoverflow.com/q/19139063
        // To overcome this with dropdowns that are both
        // toggle style and hover style, we'll add a CSS
        // class which has "display: block !important"
        $('*').on('show.bs.dropdown show.bs. hide.bs.tab hidden.bs.tab', function(e) {
            $(e.target).addClass('bs-prototype-override');
        });
        $('*').on('hidden.bs.collapse', function(e) {
            $(e.target).removeClass('bs-prototype-override');
        });
    },
    attachMedia: function() {
        var $links = $('[data-toggle="media"]');
        if ( ! $links.length) return;
        // When somebody clicks on a link, slide the
        // carousel to the slide which matches the
        // image index and show the modal
        $links.on('click', function(e) {
            e.preventDefault();
            var $link = $(this),
                $modal = $($link.attr('href')),
                $carousel = $modal.find('.carousel'),
                index = parseInt($link.data('index'));
            $carousel.carousel(index);
            $modal.modal('show');
            return false;
        });
    }
};
jQuery(document).ready(function($) {
    var site = new Site();
    site.start();
});
})(jQuery);