Yii2.0对于CSS/JS 管理,使用AssetBundle资源包类。
视图如何按需加载CSS/JS ?
资源包定义:
backend/assets/AppAsset.php
<?php
namespace frontend\assets;
use yii\web\AssetBundle;
/**
* Main frontend application asset bundle.
*/
class AppAsset extends AssetBundle
{
public $basePath = '@webroot';
public $baseUrl = '@web';
//加载公共css文件
public $css = [
'css/site.css',
];
//加载公共js文件
public $js = [
];
public $depends = [
'yii\web\YiiAsset',
'yii\bootstrap\BootstrapAsset',
];
//定义按需加载JS方法,注意加载顺序在最后
public static function addScript($view, $jsfile) {
$view->registerJsFile($jsfile, [AppAsset::className(), 'depends' => 'frontend\assets\AppAsset']);
}
//定义按需加载css方法,注意加载顺序在最后
public static function addCss($view, $cssfile) {
$view->registerCssFile($cssfile, [AppAsset::className(), 'depends' => 'frontend\assets\AppAsset']);
}
}
视图中引用:
use yii\helpers\Html;
use backend\assets\AppAsset;
AppAsset::register($this);
此时,上述视图的htm里面就会包含有我们管理包的公共前段资源包文件。css文件在head标签之中,js文件则在body结尾钱前
如想把js文件放在head标签之间,如下引入即可
$this->registerJsFile('@web/js/jquery-ui.custom.min.js',['depends'=>['api\assets\AppAsset'],'position'=>$this::POS_HEAD]);
此时引用的js文件就在head标签之间了
单独写入css样式代码:
$cssString = ".gray-bg{color:red;}";
$this->registerCss($cssString);
单独写入js代码:
$this->registerJs(
'$("document").ready(function(){
$("#login-form").validate({
errorElement : "small",
errorClass : "error",
rules: {
"AgNav[id]": {
required: true,
},
},
messages:{
"AgNav[id]" : {
required : "此字段不能为空.",
},
}
});
});'
);
原文链接:http://blog.csdn.net/maclechan/article/details/45803821