zoukankan      html  css  js  c++  java
  • 转载 yii2-按需加载并管理CSS样式/JS脚本

    一、资源包定义

    Yii2对于CSS/JS 管理,使用AssetBundle资源包类。

    创建如下:

    backend/assets/AppAsset.php

    namespace backendassets;  

      

    use yiiwebAssetBundle;  

      

    /** 

     * @author chan <maclechan@qq.com> 

     * @since 2.0 

     */  

    class AppAsset extends AssetBundle  

    {  

        public $basePath = '@webroot';  

        public $baseUrl = '@web';  

        //全局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;  

      

    /* @var $this yiiwebView */  

    /* @var $content string */  

      

    AppAsset::register($this); 

    查看源文件,看清CSS和JS的加载顺序 

    可以看出以此顺序为:依赖关系 -> 自定义全局CSS/JS

    如果,某个视图需要单独引入一个CSS/JS,并且,在页面中还要写些CSS/JS,该如何做?

    2. 在页面中单独写样式

    $cssString = ".gray-bg{color:red;}";  

    $this->registerCss($cssString); 

    3. 在页面中单独写JS(使用数据块)

    <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); ?>  

    或者:

    <?php

    $this->registerJs(

       '$("document").ready(function(){ 

            $("#login-form").validate({

                errorElement : "small", 

                errorClass : "error",

                rules: {

                         "AgNav[nav_cn]": {

                             required: true,

                         },

                },

                messages:{

                       "AgNav[nav_cn]" : {  

                            required : "此字段不能为空.",

                        },

                }

            });

        });'

    );

    ?>

    4.视图中引入CSS/JS文件

    然后再说下在视图中如何引入一个CSS/JS文件(不是定义在全局里的CSS或JS)

    分别有两种方法:

    方法1

    在资源包管理器里面定义一个方法,然后在视图中注册即可(推荐使用这种)

    如上面代码己定义:

    //定义按需加载JS方法,注意加载顺序在最后  

    public static function addScript($view, $jsfile) {  

        $view->registerJsFile($jsfile, [AppAsset::className(), 'depends' => 'backendassetsAppAsset']);  

    视图中使用如下

    AppAsset::register($this);  

    //只在该视图中使用非全局的jui   

    AppAsset::addScript($this,'@web/js/jquery-ui.custom.min.js');  

    //AppAsset::addCss($this,'@web/css/font-awesome/css/font-awesome.min.css');  

    查看下源码,特别的注意下,加载的顺序,是我们想要的结果 

    此外注意:在上面的addScript方法中,如果没有 ’depends‘=>’xxx‘ ,此处加载的顺序将会颠倒。

    方法2

    不需要在资源包管理器中定义方法,只要在视图页面直接引入即可

    AppAsset::register($this);  

    //css定义一样  

    $this->registerCssFile('@web/css/font-awesome.min.css',['depends'=>['backendassetsAppAsset']]);  

      

     $this->registerJsFile('@web/js/jquery-ui.custom.min.js',['depends'=>['backendassetsAppAsset']]);  

    //如下position是让定义CSS/JS出现的位置

    //$this->registerJsFile('@web/js/jquery-ui.custom.min.js',['depends'=>['backendassetsAppAsset'],'position'=>$this::POS_HEAD]);  

    原文转载 自 http://www.wtoutiao.com/p/1f6qEX6.html 

  • 相关阅读:
    python json 和 pickle的补充 hashlib configparser logging
    go 流程语句 if goto for swich
    go array slice map make new操作
    go 基础
    块级元素 行内元素 空元素
    咽炎就医用药(慢性肥厚性咽炎)
    春季感冒是风寒还是风热(转的文章)
    秋季感冒 咳嗽 怎么选药
    解决IE浏览器“无法显示此网页”的问题
    常用的 css 样式 记录
  • 原文地址:https://www.cnblogs.com/xp796/p/5884836.html
Copyright © 2011-2022 走看看