使用yii2的appasset资源管理包

小鱼儿 2022-07-15 12:18 172阅读 0赞

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][http_blog.csdn.net_maclechan_article_details_45803821]

[http_blog.csdn.net_maclechan_article_details_45803821]: http://blog.csdn.net/maclechan/article/details/45803821