请选择 进入手机版 | 继续访问电脑版
开启辅助访问
帐号登录 |立即注册

discuz jquery冲突,解决方法

 
Discuz自制模板带jquery时与discuz本身冲突解决方法

由于JQuery的效果很好,在制作模板时难免会用到各种jquery效果。可是做过模板的人就会发现加上自己的juery代码后,discuz自带的一些下拉功能就不可以使用了,其实原因就是discuz和JQuery的$发生冲突,导致有些功能失效。在网上找了一些资料整理了一下,希望能够帮到大家,同时也希望discuz能尽快解决这个问题。

方法一:

在页面的最头部,也就是<head>标签下的第一行开始引入我们用到的JQuery文件,这是为了能确保该JS可以在DZ默认JS之前加载。
在引用到该JS文件的地方把$改成 jQuery(注意大小写)。
如上方式,一般都能解决大部分的JS不兼容情况。如果还是米哟解决的话尝试一下方法:

将用到的JS里面的所有$全部替换成jQuery

示例:
修改前
<script type="text/javascript">           
$(document).ready(function(){

         $(".suspend").mouseover(function() {
        $(this).stop();
        $(this).animate({width: 97}, 230);
    })
       
    $(".suspend").mouseout(function() {
        $(this).stop();
        $(this).animate({width: 23}, 230);
    });
       
});
</script>

修改后:
<script type="text/javascript">           
jQuery(document).ready(function(){

         jQuery(".suspend").mouseover(function() {
        jQuery(this).stop();
        jQuery(this).animate({width: 97}, 230);
    })
       
    jQuery(".suspend").mouseout(function() {
        jQuery(this).stop();
        jQuery(this).animate({width: 23}, 230);
    });
       
});
</script>


方法二:

DZ使用了$()作为对象选取函数,刚好与jQuery默认的$()函数重合造成冲突,同样也是为了保持原有的DZ程序不被更改,所以我们要在JQ上修改了。不需要修改jquery.js这个文件。只要在引用的时候修改一下即可。

<script src="style/js/jquery.js" type="text/javascript"></script>


这是引用一个jquery核心文件,然后在其下面加上:

<script type="text/javascript">var CDB9_JQ = jQuery.noConflict();</script>


红色字体CDB9_JQ自定义的,主要就是要注意大小写。

然后把我们使用的js文件里面的所有$都换成我们自定义的这个值CDB9_JQ,大小写要相同。



建议使用第二种方法,如果要用到多个版本的JQ文件的话,就是在每个下面加上这句就好了。如:


<script src="style/js/jquery.1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">var CDB9_JQ = jQuery.noConflict();</script>
<!--请把js调用里面的$全部替换成CDB9_JQ -->
<script type="text/javascript">           
CDB9_JQ(document).ready(function(){

         CDB9_JQ(".suspend").mouseover(function() {
        CDB9_JQ(this).stop();
        CDB9_JQ(this).animate({width: 97}, 230);
    })
       
    CDB9_JQ(".suspend").mouseout(function() {
        CDB9_JQ(this).stop();
        CDB9_JQ(this).animate({width: 23}, 230);
    });
       
});
</script>



<script src="style/js/jquery.1.7.2.js" type="text/javascript"></script>
<script type="text/javascript">var CDB9COM_JQ = jQuery.noConflict();</script>
<!--请把js调用里面的$全部替换成CDB9COM_JQ -->
<script type="text/javascript">           
CDB9COM_JQ(document).ready(function(){

         CDB9COM_JQ(".suspend").mouseover(function() {
        CDB9COM_JQ(this).stop();
        CDB9COM_JQ(this).animate({width: 97}, 230);
    })
       
    CDB9COM_JQ(".suspend").mouseout(function() {
        CDB9COM_JQ(this).stop();
        CDB9COM_JQ(this).animate({width: 23}, 230);
    });
       
});
</script>

注意:只要两个自定义的值不相同,各自使用的js语句里面把$改成相应的值就OK了。


方法二还有哦一种写法:

例如以下代码 是jq 的代码。如果不做修改直接用入DZ会报错。
<script type="text/javascript">
$j(function(){ //使用jQuery
$("p").click(function(){
alert( $(this).text() );
});
});

$("pp").style.display = 'none'; //使用prototype
</script>

我们可以引用jQuery给JQ赋予一个变量
var jq = jQuery.noConflict();


修改成为:
<script type="text/javascript">
var jq = jQuery.noConflict();
jq(function(){ //使用jQuery
jq("p").click(function(){
alert( jq(this).text() );
});
});
jq("pp").style.display = 'none'; //使用prototype
</script>

替换之后即可解决js冲突问题。

回复

使用道具 举报

0 个回复

倒序浏览

快速回复

您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

友情链接
  • 艾Q网

    提供设计文章,教程和分享聚合信息与导航工具,最新音乐,动漫,游戏资讯的网站。