使用Joomla及其Mootools的Twitter Bootstrap旋轉木馬

Question

我正在使用Twitter Bootstrap爲Joomla 2.5.x創建模板。我也想爲該模板使用Bootstrap Carousel插件。

當Carousel與Joomla的Mootools實現一起使用時，我遇到了問題。旋轉木馬元素的樣式正在變爲負邊界，使其對用戶不可見。爲了向您說明發生了什麼，我爲您準備了一張jsfiddle http://jsfiddle.net/U2pHH/11/。

由於傳送帶更改樣式屬性，傳送帶會使用戶看不到每秒圖像，但用戶應該看到每張幻燈片。

我已經查看了Carousel插件和Mootools JS文件的源代碼，但遺憾的是無法找出問題的原因。我想也許它是jQuery和Mootools之間的函數/類的命名問題，但是在那裏找不到任何問題。

我希望你能幫助我。

編輯：我想出它與Fx.Slide類的mootools-more.js有關，從源代碼中刪除類解決了這個問題。但那仍然沒有真正的解決方案，任何幫助仍然非常感激。

Answer 1

問題是，Mootools更多的是與twitter引導衝突，這就是爲什麼它的行爲怪異的旋轉木馬。我建議你只使用jQuery或Mootools。這裏有一個引導Mootools實現：https://github.com/anutron/mootools-bootstrap

Answer 2

具有相同的問題。 我正在使用一個名爲JB Library的插件（http://www.joomlabamboo.com/joomla-extensions/jb-library-plugin-a-free-joomla-jquery-plugin），並且可以從管理中刪除Mootools和/或Mootools More。 關閉Mootools之後更多與旋轉木馬有關的問題是「固定的」。在評論更新方面可能會比評論更容易。除非你需要mootools-more.js用於網站上的其他內容。

希望很快會有更好的溶劑出現。

Answer 3

有同樣的問題：自從mootools-more.js加載後，Bootstrap carousel無法在註冊的前端工作。

我的解決方案： Jquery Easy Plugin（http://www.simplifyyourweb.com/index.php/downloads/category/8-loading-jquery）帶有「高級選項」下的「儘可能刪除Mootools」選項。

Answer 4

下面是具體到Joomla和MooTools的更多修復，

JQ調用後添加以下代碼，它可以在任何JS文件

添加

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

Answer 5

相同的另一種實現本安提供的東西是

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

我終於結束了 - 我創建定製Mootools更多構建沒有Fx。滑動

Answer 6

(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);