同一页面的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冲突管理

回答

相关问题