项目框架的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. CSharpGL(15)用GLSL渲染2种类型的文字

    CSharpGL(15)用GLSL渲染2种类型的文字 2016-08-13 由于CSharpGL一直在更新,现在这个教程已经不适用最新的代码了.CSharpGL源码中包含10多个独立的Demo,更适合 ...

  2. 使用XHR2或Jsonp实现跨域以及实现原理

    我们直接使用XMLHttpRequset请求外部接口 会发现 报这个错误 其实浏览器成功发送请求并拿回了数据  只是浏览器的同源策略 禁止了获取  在xhr2 服务器端支持跨域 需要在响应头增加 Ac ...

  3. 如何在Meteor中使用npm模块?

    首先,请在AtmosphereJs上搜索有无相关的封装包.尽量采用已有的封装包,而不是自己封装. 有两种方法在项目中使用来自npm的模块. 封装为Meteor包并在项目中添加包.使用meteor cr ...

  4. NULL的陷阱:Merge

    NULL表示unknown,不确定值,所以任何值(包括null值)和NULL值比较都是不可知的,在on子句,where子句,Merge或case的when子句中,任何值和null比较的结果都是fals ...

  5. 中文字号VS英文字号(磅)VS像素值

    中文字号VS英文字号(磅)VS像素值八号=5磅(5pt) ==(5/72)*96=6.67 =6px 七号=5.5磅 ==(5.5/72)*96=7.3 =7px 小六=6.5磅 ==(6.5/72) ...

  6. 【循序渐进MVC】第一回——一物多用Project.json依赖关系之dependencies节点

    Project.json统一了ASP.NET vNext之前版本的packages.config.NuGet 配置(nuspec)以及项目文件(csprojs):并集成在Project.json中. ...

  7. Visual Studio常用插件

    Visual Assist X 番茄不用说了,C# C++编码必备 Image Insertion 可以在代码编辑器中插入图片注释,让代码像Word文档一样图文并茂. 但注意必须是PNG格式的图片,直 ...

  8. Ubuntu server 搭建Git server

    Ubuntu server 搭建Git server,git相比svn,最主要就是分布式了,每个客户端用户的本地都是一个版本管理控制器. Ubuntu server 版本为12.04 搭建步骤如下: ...

  9. CSS权威指南 - 浮动和定位 2

    定位 定位的想法很简单元素框相对于正常位置出现在哪里. 定位:static,相对, 绝对, fixed, 继承 static就是默认的位置 相对就是相对于默认位置的偏移.原来的static定位位置依然 ...

  10. 深入理解ServletRequest与ServletResponse

       请求和相应是Web交互最基本的模式,在Servlet中,分别用HttpServletRequest与HttpServletResponse来表示Http请求和响应.这两个类均来自javax.se ...