Yii中jQuery插件(plug-in)失效的解决办法

先简单说一下问题是怎么发生的。

在处理页面中的圆角时，采用了Jquery的插件jQuery corner。这是一个很不错的插件，可以做出很棒的页面效果。

再加上我自己写的一个小的插件，就有了如下的引用：

<script src=”<?php echo Yii::app()->request->baseUrl; ?>/js/corner.js” type=”text/javascript”></script>

<script src=”<?php echo Yii::app()->request->baseUrl; ?>/js/functions.js” type=”text/javascript”></script>

但当把制作好的页面植入Yii的时候，corner.js和function.js中的函数失效了。

 

特别要说明的是，corner.js以及function.js中的函数，都是以jQuery的插件机制来扩充了jQuery的函数，也就是可以用

$(”.class”).corner();

$(”.class”).myfunction();

的形式来调用。

jQuery corner plugin: simple corner rounding

* Examples and documentation at: http://jquery.malsup.com/corner/

但是当跳转到带有Yii自己的jQuery的页面的时候，Yii会自动向页面中加入它需要的jQuery，比如表单排序之类的。

这就导致自己添加的jQuery插件失效了。

这个问题的根本原因，是在于Yii加入jQuery的时候，将jQuery的核心文件有包含了一次，从而导致了之前定义的jQuery插件都失效了。

通过debug工具可以看到，运行的时候有错误信息：XXX 没有corner()这个函数。

解决的方法其实也很简单，就是需要在Yii加入的jQuery之后，再包含我们自己的jQuery插件。而Yii的jQuery，总是在紧挨着<title></title>在其之前加入。所以我将自己的jQuery代码文件，放到了<title></title>后面。

即由

<script src=”<?php echo Yii::app()->request->baseUrl; ?>/js/jquery-1.3.2.min.js” type=”text/javascript”></script>

<script src=”<?php echo Yii::app()->request->baseUrl; ?>/js/corner.js” type=”text/javascript”></script>

<script src=”<?php echo Yii::app()->request->baseUrl; ?>/js/functions.js” type=”text/javascript”></script>

<script src=”<?php echo Yii::app()->request->baseUrl; ?>/ckeditor/ckeditor.js” type=”text/javascript”></script>

<title><?php echo $this->pageTitle; ?></title>

变为了

 

<script src=”<?php echo Yii::app()->request->baseUrl; ?>/js/jquery-1.3.2.min.js” type=”text/javascript”></script>

<title><?php echo $this->pageTitle; ?></title>

<script src=”<?php echo Yii::app()->request->baseUrl; ?>/js/corner.js” type=”text/javascript”></script>

<script src=”<?php echo Yii::app()->request->baseUrl; ?>/js/functions.js” type=”text/javascript”></script>

<script src=”<?php echo Yii::app()->request->baseUrl; ?>/ckeditor/ckeditor.js” type=”text/javascript”></script>

这样的话，当Yii插入了它的jQuery之后，再执行我们自定义的jQuery插件，这些插件就是有效的了。