yii2的asset资源包

一、资源包定义
Yii2对于CSS/JS 管理，使用AssetBundle资源包类。
在basic/assets下创建如下：
app/assets/AppAsset.php
代码：

<?php
/**
* @link http://www.yiiframework.com/
* @copyright Copyright (c) 2008 Yii Software LLC
* @license http://www.yiiframework.com/license/
*/
namespace app\assets;
use yii\web\AssetBundle;
/**
* @author Qiang Xue <qiang.xue@gmail.com>
* @since 2.0
*/
class AppAsset extends AssetBundle
{
public $basePath = ‘@webroot’;
public $baseUrl = ‘@web’;
public $css = [
‘css/site.css’,
];
public $js = [
];
public $depends = [
‘yii\web\YiiAsset’,
‘yii\bootstrap\BootstrapAsset’,
];
//定义按需加载JS方法，注意加载顺序在最后
public static function addJs($view, $jsfile) {
$view->registerJsFile($jsfile, [AppAsset::className(), ‘depends’ => ‘app\assets\AppAsset’,‘position’=>$view::POS_END]);
}
//定义按需加载css方法，注意加载顺序在最后
public static function addCss($view, $cssfile) {
$view->registerCssFile($cssfile, [AppAsset::className(), ‘depends’ => ‘app\assets\AppAsset’,‘position’=>$view::POS_END]);
}
//将需要加载的文件已数组聚合后在加载
public static function addJsArr($view,$arr = null) {
if(!is_array($arr)) {
throw new \yii\base\InvalidConfigException(‘the seconed params must be array type!’);
return ;
}
foreach ($arr as $jsfile) {
$view->registerJsFile($jsfile, [AppAsset::className(), ‘depends’ => ‘app\assets\AppAsset’,‘position’=>$view::POS_END]);
}
}
//将需要加载的文件已数组聚合后在加载
public static function addCssArr($view,$arr = null) {
if(!is_array($arr)) {
throw new \yii\base\InvalidConfigException(‘the seconed params must be array type!’);
return ;
}
foreach ($arr as $cssfile) {
$view->registerCssFile($cssfile, [AppAsset::className(), ‘depends’ => ‘app\assets\AppAsset’,‘position’=>$view::POS_END]);
}
}
}</span>

二、视图使用：
1. 视图（或布局）使用全局CSS/JS
一般在layout的布局文件的使用
AppAsset::register($this);
加载顺序为：先加载需要的依赖文件 -> 再加载自定义全局CSS/JS
如果，某个视图需要单独引入一个CSS/JS，并且，在页面中还要写些CSS/JS，该如何做？
2. 在页面中单独写样式
$cssString = “.gray-bg{color:red;}”;
$this->registerCss($cssString);
3. 在页面中单独写JS(使用数据块)

[php] view plain copy

print?

<div id=“mybutton”>点我弹出OK</div>
<?php $this->beginBlock(‘test’) ?>
$(function($) {
$(‘#mybutton’).click(function() {
alert(‘OK’);
});
});
<?php $this->endBlock() ?>
<?php $this->registerJs($this->blocks[‘test’], \yii\web\View::POS_END); ?>
或者
<?php
$this->registerJs(
‘$(“document”).ready(function(){
$(“#login-form”).validate({
errorElement : “small”,
errorClass : “error”,
rules: {
“AgNav[nav_cn]”: {
required: true,
},
},
messages:{
“AgNav[nav_cn]” : {
required : “此字段不能为空.”,
},
}
});
});’
);
?></span>

4.视图中引入CSS/JS文件
然后再说下在视图中如何引入一个CSS/JS文件（不是定义在全局里的CSS或JS）
分别有两种方法：
方法1
在资源包管理器里面定义一个方法，然后在视图中注册即可(推荐使用这种)
如上面代码己定义：
如上面代码己定义：
//定义按需加载JS方法，注意加载顺序在最后
public static function addScript($view, $jsfile) {
$view->registerJsFile($jsfile, [AppAsset::className(), ‘depends’ => ‘backend\assets\AppAsset’]);
}
//只在该视图中使用非全局的jui,一般代码放在view文件的后面
AppAsset::addScript($this,’@web/js/jquery-ui.custom.min.js’);
此外注意：在上面的addScript方法中，如果没有 ’depends‘=>’xxx‘ ,此处加载的顺序将会颠倒。

http://blog.csdn.net/u012979009/article/details/51646687

发表评论 取消回复

发表评论取消回复