项目框架的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({……});

解决jQuery插件冲突的更多相关文章

  1. 解决jQuery插件重名问题

    jQuery第三方插件命名冲突: 1.以某种方法为自己创建的jQuery插件添加命名空间,以免名称冲突.比如:在自己的插件名之前添加某类名称前缀. 2.避免影响全局命名空间.将自己的所有函数调用和变量 ...

  2. 解决jquery版本冲突问题

    解决jQuery1.3.2和1.4.2的冲突.(测试通过) 第一步:在1.4.2的源代码的最后加上一句 var $j4 = jQuery.noConflict(true);//之所以在源码这里加,而不 ...

  3. 解决vue与传统jquery插件冲突

    比如基于jquery的select2插件,在vue下单独用有很多问题,其实对于这类插件,可以用vue的自定义指令和组件来包装,解决冲突的问题.引用官方vue1.0和2.0的两个例子,学习一下. 例子1 ...

  4. 如何解决jquery版本冲突

    <!-- 引入1.6.4版的jq --> <script src="<a href="http://ajax.googleapis.com/ajax/lib ...

  5. 解决jQuery插件sliderjs, 点击插件分页,导航按钮后不能重新开始.

    jQuery SlidesJS - Can't restart animation after clicking on navigation or pagination <!DOCTYPE ht ...

  6. js最详细的基础,jquery 插件最全的教材

    一.Js的this,{},[] this是Javascript语言的一个关键字,随着函数使用场合的不同,this的值会发生变化.但是有一个总的原则,那就是this指的是调用的函数自己. { } 大括号 ...

  7. jQuery插件的开发之$.extend(),与$.fn.extend()

        jQuery插件的开发包括两种: 一种是类级别的插件开发,即给jQuery添加新的全局函数,相当于给jQuery类本身添加方法.jQuery的全局函数就是属于jQuery命名空间的函数,另一种 ...

  8. jQuery插件的开发

    jQuery插件的开发包括两种: 一种是类级别的插件开发,即给jQuery添加新的全局函数,相当于给jQuery类本身添加方法.jQuery的全局函数就是属于jQuery命名空间的函数,另一种是对象级 ...

  9. 解决jQuery多个版本,与其他js库冲突方法

    jQuery多个版本或和其他js库冲突主要是常用的$符号的问题,这个问题 jquery早早就有给我们预留处理方法了,下面一起来看看解决办法. 1.同一页面jQuery多个版本或冲突解决方法. < ...

随机推荐

  1. Windows Phone Toolkit 的 DatePicker 控件本地化的问题

    用到 The Windows Phone Toolkit 里的 DatePicker 控件,但是多语言的时候出现了问题: 手机设置为中文,虽然月份跟星期有效,但是 Title 却还是默认的语言:CHO ...

  2. React Native填坑之旅--class(番外篇)

    无论React还是RN都已经迈入了ES6的时代,甚至凭借Babel的支持都进入了ES7.ES6内容很多,本文主要讲解类相关的内容. 构造函数 定义侦探类作为例子. ES5的"类"是 ...

  3. java算法(一)

    最近在看各种经典算法,自己写起来: 一.判断素数问题: 知识点:素数即为质数,一个数n若不是质数则一定在2-n/2之间内有因数. package JingDian; public class sush ...

  4. [转]终于找到全annotation配置springMVC的方法了(事务不失效)

    原文:http://icanfly.iteye.com/blog/778401 icanfly 写道 如果带上事务,那么用annotation方式的事务注解和bean配置,事务会失效,要将servic ...

  5. 转:Docker学习---挂载本地目录

    原文: http://my.oschina.net/piorcn/blog/324202 docker可以支持把一个宿主机上的目录挂载到镜像里 docker run -it -v /home/dock ...

  6. CoreException: Could not calculate build plan: Plugin org.apache.maven.plugins:maven-compiler-plugin:3.1 or one of its dependencies could not be resolved

    CoreException: Could not calculate build plan: Plugin org.apache.maven.plugins:maven-compiler-plugin ...

  7. zookeeper启动。

    package com.autonavi.tinfo.traffic.zookeeper; import java.util.Arrays; import java.util.Collections; ...

  8. 重拾Ajax

    本来想专门学习一个Fetch API的相关知识,然后从XMLHttpRequest对象开始看起,看着看着,突然发现自己每天都在使用的ajax竟然还有好多知识点都不熟悉,细思极恐,于是乎从MDN到W3C ...

  9. Linux :Can&#39;t start up: not enough memory

    http://stackoverflow.com/questions/9634577/linux-cant-start-up-not-enough-memory

  10. 【学习笔记】【C语言】char类型

    1. 存储细节 ASCII单字节表(双字节GBK\GB2312\GB18030\Unicode) 2. 常见错误 char c = A; char c = "A"; char c ...