项目框架的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. 腾讯云下安装 nodejs + 实现 Nginx 反向代理

    本文将介绍如何给腾讯云上的 Ubuntu Server 12.04 LTS 64位主机安装 node 及 nginx,并简单配置反向代理. 笔者在整个安装过程中遇到不少麻烦(不赘述),如果你希望少踩坑 ...

  2. LAMP坏境和LNMP环境安装Nagios4.1.1和基本配置

    ----------------------------------------以下内容为笔者生产环境的监控,安装都是经过一步步测试的-------------------------------- ...

  3. 在Android中Intent的概念及应用(一)——显示Intent和隐式Intent

    Intent寻找目标组件的两种方式: 显式Intent:通过指定Intent组件名称来实现的,它一般用在知道目标组件名称的前提下,一般是在相同的应用程序内部实现的. 隐式Intent:通过Intent ...

  4. 了解HTML表单之input元素的30个元素属性

    目录 传统属性 name type accept alt checked disabled readonly maxlength size src value 新增属性 autocomplete au ...

  5. Mac os装软件时提示显示需要安装旧Java SE 6运行环境解决办法

    这个时Java版本的问题,换用合适的低版本即可,下面是官方的 https://support.apple.com/kb/DL1572?viewlocale=zh_CN&locale=en_US ...

  6. HTML DOM部分---事件 windows对象;

    <!--DOM操作windows对象操作 对浏览器进行操作document对象操作 对浏览器内页面文件进行操作 window.shuxing;属性调用格式window.fangfa();方法调用 ...

  7. windows初始化后做了哪些事情

    保护视力,将WINDOWS背景色变成淡绿色 绿色和蓝色对眼睛最好,建议大家在长时间用电脑后,经常看看蓝天.绿地,就能在一定程度上缓解视疲劳.同样的道理,如果我们把电脑屏幕和网页的底色变为淡淡的苹果绿, ...

  8. STL六大组件之——迭代器这个东西

    迭代器:除了在其它语言中司空见惯的下标法访问容器元素之外,C++语言提供了一种全新的方法——迭代器(iterator)来访问容器的元素.迭代器其实类似于引用,指向容器中某一元素.换个方式来说,容器就是 ...

  9. UVa 1328 (KMP求字符串周期) Period

    当初学KMP的时候也做过这道题,现在看来还是刘汝佳的代码要精简一些,毕竟代码越短越好记,越不容易出错. 而且KMP的递推失配函数的代码风格和后面的Aho-Corasick自动机求失配函数的代码风格也是 ...

  10. Eclipse SVN插件冲突导致不能使用解决办法

    最近,由于安装插件导致eclipse的SVN插件不能使用,出现的问题实在很烦恼,通过试验发现当新安装的插件安装完毕后,只需要把eclipse-jee-kepler-SR2-win32-x86_64/e ...