• 解决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({……});

        

  • 相关阅读:
    c/c++中两颗璀璨的明珠
    deepin软件中心打不开
    shell之rm -rf的别名设置
    历史命令脚本
    mysql之7xtrabackup
    python之3内置容器
    python之第一个例子hello world
    python之安装
    shell脚本练习(autocert)
    【转】nginx之逻辑运算
  • 原文地址:https://www.cnblogs.com/s0611163/p/3624034.html
Copyright © 2020-2023  润新知