yii2对于css/js 管理，使用assetbundle资源包类。
打开 backend/assets/appasset.php
namespace backendassets; use yiiwebassetbundle; class appasset extends assetbundle { public $basepath = [email protected]/* */'; public $baseurl = [email protected]/* */';
//全局css public $css = [ 'css/animate.css', 'css/style.min.css', ]; //全局js public $js = [ 'js/jquery-2.1.1.js' ]; //依赖关系 public $depends = [ 'yiiwebyiiasset', 'yiiootstrapbootstrapasset', ]; //定义按需加载js方法，注意加载顺序在最后 public static function addscript($view, $jsfile) { $view->registerjsfile($jsfile, [appasset::classname(), 'depends' => 'backendassetsappasset']); } //定义按需加载css方法，注意加载顺序在最后 public static function addcss($view, $cssfile) { $view->registercssfile($cssfile, [appasset::classname(), 'depends' => 'backendassetsappasset']); } }
静态资源在视图中加载
1. 视图（或布局）使用全局css/js
use yiihelpershtml; use backendassetsappasset; use backendwidgetsalert; appasset::register($this);
2.在视图中加载单独的样式
$cssstring = ".gray-bg{color:red;}"; $this->registercss($cssstring);
3.在视图中加载单独的js
<?php$this->registerjs( '$("document").ready(function(){ $("#login-form").validate({ errorelement : "small", errorclass : "error", rules: { "agnav[nav_cn]": { required: true, }, }, messages:{ "agnav[nav_cn]" : { required : "此字段不能为空.", }, } }); });' );?>
or
<div id="mybutton">点我弹出ok</div> <?php $this->beginblock('test') ?> $(function($) { $('#mybutton').click(function() { alert('ok'); }); }); <?php $this->endblock() ?> <?php $this->registerjs($this->blocks['test'], yiiwebview::pos_end); ?>
4.视图中引入js/css文件
使用自定义函数
public static function addscript($view, $jsfile) { $view->registerjsfile($jsfile, [appasset::classname(), 'depends' => 'backendassetsappasset']); } appasset::register($this); //只在该视图中使用非全局的jui appasset::addscript($this,[email protected]/* *//js/jquery-ui.custom.min.js'); appasset::addcss($this,[email protected]/* *//css/font-awesome/css/font-awesome.min.css');
直接加载
appasset::register($this); //css定义一样 $this->registercssfile([email protected]/* *//css/font-awesome.min.css',['depends'=>['backendassetsappasset']]); $this->registerjsfile([email protected]/* *//js/jquery-ui.custom.min.js',['depends'=>['backendassetsappasset']]);
以上就是yii2.0静态资源js css引入方法的内容。