Magento Jquery引导程序和原型冲突?导航标签不起作用
Magento Jquery Bootstrap and Prototype conflict? nav-tabs dont work
我使用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);
相关文章:
- 固定标签导航小部件的高度
- Magento Jquery引导程序和原型冲突?导航标签不起作用
- 我可以在蜘蛛网的高图表中添加两个轴,然后单击x轴标签导航到另一个页面吗
- 使用标签页导航时Chrome Windows中的Angular ng-select错误
- 如何在导航 jQuery 中的特定 href 标签上给出目标空白
- 打开/关闭时在光滑导航中更改标签
- Angularjs-FF在页面内导航时会显示{{}}标签,Chrome则不会;t
- 什么's是使用哈希标签进行页面导航和锚点导航的最佳方式
- 如何调整这个jquery键盘导航以允许其他标签和键盘功能
- 如何在Facebook标签页之间导航
- 引导导航标签作为按钮
- Javascript标签导航
- 导航标签动态加载/显示
- 引导3导航,下拉菜单,标签(仍然)不能在IE8中工作
- 标签导航HTML
- Wicket AjaxTabbedPanel标签导航需要第二次点击
- 在弹出式导航栏下面添加图像(标签)
- 设置一个自定义范围选择器,并在图表和导航器上禁用xAxis标签
- jQuery .load页面,然后使用标签导航到锚
- 套接字.IO,导航标签有问题