同一頁面的jQuery衝突管理

我有一個頁面（這個實際上是http://gtsturism.agencia.ro/），其中客戶端請求使用themefuse中的主題（這很難修改）。同一頁面的jQuery衝突管理

然而，主題使用jQuery 1.8.3，爲了正常工作，我開發了一個新的部分（下面的調諧器），要求v。1.10.2。

問題與jQuery UI相同。這個想法是，如果我導入新版本的jQuery主題功能將不起作用（例如：菜單，滑塊，popus等）。但是，如果我依賴主題jQuery和jQuery ui，則我的組件根本無法工作。

我在這裏的原因是因爲客戶沒有從一開始就指定他將如何處理組件和框架要求。

我正在尋找某種解決方法，不會指示我重寫網站的整個小部件。

請注意，在頂部的鏈接調節器正在工作（不是提交，但按鈕和滑塊）。

謝謝你的時間。

更新＃1：jQuery UI的主要問題

我已成功地使一些方面的工作，但主題的jQuery UI是高度修改和特殊使用這段代碼是啓動滑塊：

var OPTIONS = { 

    settings: { 
     from: 1, 
     to: 10, 
     step: 1, 
     smooth: true, 
     limits: true, 
     round: 0, 
     format: { format: "#,##0.##" }, 
     value: "5;7", 
     dimension: "" 
    }, 

    className: "jslider", 
    selector: ".jslider-", 

    template: tmpl(
     '<span class="<%=className%>">' + 
     '<table><tr><td>' + 
      '<div class="<%=className%>-bg">' + 
      '<i class="l"></i><i class="r"></i>' + 
      '<i class="v"></i>' + 
      '</div>' + 

      '<div class="<%=className%>-pointer"></div>' + 
      '<div class="<%=className%>-pointer <%=className%>-pointer-to"></div>' + 

      '<div class="<%=className%>-label"><span><%=settings.from%></span></div>' + 
      '<div class="<%=className%>-label <%=className%>-label-to"><%=settings.dimension%><span><%=settings.to%></span></div>' + 

      '<div class="<%=className%>-value"><%=settings.dimension%><span></span></div>' + 
      '<div class="<%=className%>-value <%=className%>-value-to"><%=settings.dimension%><span></span></div>' + 

      '<div class="<%=className%>-scale"><%=scale%></div>'+ 

     '</td></tr></table>' + 
     '</span>' 
    ) 

    };

完整的主題jQuery UI的滑塊可以在這裏http://jsfiddle.net/AEK8p/

發現所以我需要的是一些其他的方式來開始我的滑塊，因爲主題使得它像這樣和使用S中的關鍵字滑塊：

jQuery(document).ready(function() { 
    // Price Range Input 
    jQuery("#range_field_short_latest_price_range").slider({ 
    from: 90, 
    to: 2490, 
    smooth: true, 
    scale: ["$90","$2.5k"], 
    skin: "round_green", 
    limits: false, 
    heterogeneity: [], 
    dimension: '$' 
    }); 
});

所以我在想什麼是重命名的東西就像你在我的文字看到了小提琴「customSlider」的構造函數，但我不認爲這就夠了。

更新＃2：jQuery UI的 - 可能的解決方案 - 使用替代的UI框架

所以，很多的鬥爭後，我發現部分解決了這一點。因此，我使用jQuery的不同滑塊插件重寫了滑塊代碼，您可以在這裏找到http://refreshless.com/nouislider/。

這樣我就可以避免任何類型的主題衝突，我可以保留隨附的Jq版本。

結論是，使用2個或更多版本的jQuery，jQuery ui或其他庫來覆蓋自己是非常痛苦的，因爲重疊的維度是不可控的（就像在這個修改後的主題中那樣）我的客戶從themefuse購買）。

謝謝大家的貢獻，最終導致這個解決方案。如果沒有你的幫助，這可能會耗費更多的時間。

來源

2013-07-30 Mike

嘗試該部分的iframe，這需要1.10.2 –

正是我所建議的 – RyanS

1.8和1.10之間的突破性變化很低，爲什麼不更新到1.10並修復任何小jQuery問題有主題嗎？有可能一次加載2個jquery，但這是一個蹩腳的和懶惰的 –

我改寫你的代碼

$.noConflict(); 

jQuery(document).ready(function() { 
    // Price Range Input 
    jQuery("#range_field_short_latest_price_range").slider({ 
    from: 90, 
    to: 2490, 
    smooth: true, 
    scale: ["$90","$2.5k"], 
    skin: "round_green", 
    limits: false, 
    heterogeneity: [], 
    dimension: '$' 
    }); 
});

一些你表現出的代碼不正確對齊。

來源

2014-01-25 05:44:15

同一頁面的jQuery衝突管理

回答

相關問題