Twitter Bootstrap Carousel使用Joomla及其Mootools

Twitter Bootstrap Carousel using Joomla and its Mootools

本文关键字：及其 Mootools Joomla 使用 Bootstrap Carousel Twitter      更新时间：2023-09-26

我正在使用Twitter Bootstrap为Joomla 2.5.x开发模板。我还想为该模板使用引导轮播插件。

当旋转木马与Joomla的Mootools实现一起使用时，我遇到了问题。轮播元素的样式正在以负边距更改，使其对用户不可见。为了向您展示到底发生了什么，我为您准备了一个 jsfiddle http://jsfiddle.net/U2pHH/11/。

由于轮播更改样式属性，轮播使用户看不到每隔一张图片，但用户应该可以看到每张幻灯片。

我已经研究了轮播插件和Mootools JS文件的源代码，但遗憾的是无法找出问题的原因。我想也许是jQuery和Mootools之间的函数/类的一些命名问题，但在那里找不到任何问题。

我希望你能在这里帮助我。

编辑：我发现它与mootools的Fx.Slide类有关 - 更多.js，从源代码中删除该类解决了问题。但这仍然不是真正的解决方案，任何帮助仍然非常感谢。

这是特定于 Joomla 和 mootools 的修复程序 更多 ，

在jq调用后添加此代码，它可以在任何JS文件中

加

if (typeof jQuery != 'undefined') { 
(function($) { 
       $(document).ready(function(){
        $('.carousel').each(function(index, element) {
                $(this)[index].slide = null;
               });
         });
 })(jQuery);
}

Benn 提供的相同内容的另一个实现是

if (typeof jQuery != 'undefined' && typeof MooTools != 'undefined' ) {
    Element.implement({
        slide: function(how, mode){
            return this;
        }
    });
}

我最终得到了什么 - 我创建了自定义的Mootools 更多构建没有Fx.Slide的构建

问题是Mootools more与Twitter引导程序冲突，这就是为什么它的行为很奇怪。我建议你只使用jQuery或Mootools。这里有一个引导Mootools实现：https://github.com/anutron/mootools-bootstrap

有同样的问题。我正在使用一个名为 JB 库 ( http://www.joomlabamboo.com/joomla-extensions/jb-library-plugin-a-free-joomla-jquery-plugin ( 的插件，它有选项可以从管理员中删除 Mootools 和/或 Mootools 更多。关闭"关闭"Mootools More后，旋转木马的问题已"修复"。可能比注释有关更新的内容更容易解决。除非你需要mootools-more.js当然是网站上的其他东西。

希望很快会有更好的解决方案出现。

有同样的问题：引导轮播在注册的前端不起作用，因为 mootools-more.js 加载了。

我的解决方案：Jquery Easy Plugin ( http://www.simplifyyourweb.com/index.php/downloads/category/8-loading-jquery ( 在"高级选项"下带有"尽可能删除 Mootools"选项。

    (function($)
{
    $(document).ready(function(){
        var bootstrapLoaded = (typeof $().carousel == 'function');
        var mootoolsLoaded = (typeof MooTools != 'undefined');
        if (bootstrapLoaded && mootoolsLoaded) {
            Element.implement({
                hide: function () {
                    return this;
                },
                show: function (v) {
                    return this;
                },
                slide: function (v) {
                    return this;
                }
            });
        }
    });
})(jQuery);
相关文章：