解决jQuery插件冲突

    项目框架的JS库集成了jQuery，Layout页面（模板页面，类似ASP.NET的母版页）中引用了这些JS，后来使用图表插件（图表插件是基于jQuery的）的时候，项目框架中的JS和图表插件有冲突，图表显示不出来。解决步骤如下：

    1、通过搜索替换将图表插件的  $.  和  $(  全部替换成  jQuery.  和  jQuery(  

    2、在使用图表插件的页面，首先引用jQuery，然后添加<script type="text/javascript"> jQuery.noConflict();</script>，最后引用图表插件JS

    代码如下：

<script type="text/javascript" src="~js/bui/jquery-1.8.1.min.js"></script>
<script type="text/javascript">    jQuery.noConflict();</script>
<script type="text/javascript" src="~js/bui/bui-min.js"></script>
<script type="text/javascript" src="~js/bui/chart-min.js"></script>
<script type="text/javascript" src="~js/bui/graphic-min.js"></script>

    由于项目框架的JS库集成的是jQuery，所以在图表页面中，$ 和 jQuery 都可以使用，例如：$("div")和jQuery("div")都是正确的。

 

    如果有多个jQuery插件冲突，比如一个页面引用两种图表插件，第一个图表插件按照上面写的步骤，第二个图表插件按照下面的步骤：

    1、通过搜索替换将图表插件的  $.  和  $(  全部替换成  highchartsJQuery .  和  highchartsJQuery ( 

    2、在使用图表插件的页面，首先引用jQuery，然后添加<script type="text/javascript">    var highchartsJQuery = jQuery.noConflict();</script>，最后引用图表插件JS

    代码如下（下面代码中同时引用了两种图表插件）：

<script type="text/javascript" src="~js/bui/jquery-1.8.1.min.js"></script>
<script type="text/javascript">    var highchartsJQuery = jQuery.noConflict();</script>
<script type="text/javascript" src="~js/bui/bui-min.js"></script>
<script type="text/javascript" src="~js/bui/chart-min.js"></script>
<script type="text/javascript" src="~js/bui/graphic-min.js"></script>
<script src="~js/Highcharts-3.0.10/js/highcharts.js" type="text/javascript"></script>

     这样框架JS库以及两种图表插件就不会冲突，在该页面中就可以同时使用这两种图表，第二种图表可以这样使用：highchartsJQuery('#container').highcharts({……});

    

 

转载于:https://www.cnblogs.com/s0611163/p/3624034.html