Heim >PHP-Framework >YII >So führen Sie CSS- und JS-Dateien in das YII-Framework ein

So führen Sie CSS- und JS-Dateien in das YII-Framework ein

王林
王林Original
2020-02-17 13:51:471992Durchsuche

So führen Sie CSS- und JS-Dateien in das YII-Framework ein

1. Sie können es direkt auf der Ansichtsseite importieren

So führen Sie CSS- und JS-Dateien in das YII-Framework ein

2 Sie können direkt nativen Code schreiben, um es zu importieren. und der Pfad ist das Projektverzeichnis/web/css oder /js

<script src="js/nav.js"></script>

Empfohlene Tutorials: yii-Framework

3 Sie können assetBundle verwenden, um CSS-Stile und js zu verwalten Skripte

Ressourcenpaket Definition: basic/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 = &#39;@webroot&#39;;
    public $baseUrl = &#39;@web&#39;;
    public $css = [
        &#39;css/site.css&#39;,
        &#39;css/base.css&#39;
    ];
    public $js = [
        &#39;js/sliders.js&#39;
    ];
    public $depends = [ //依赖包,没有可以不写
        &#39;yii\web\YiiAsset&#39;,
        &#39;yii\bootstrap\BootstrapAsset&#39;,  
    ];
 
    //定义按需加载JS方法,注意加载顺序在最后  
    public static function addScript($view, $jsfile) {  
        $view->registerJsFile($jsfile, [AppAsset::className(), &#39;depends&#39; => &#39;api\assets\AppAsset&#39;]);  
    }  
      
   //定义按需加载css方法,注意加载顺序在最后  
    public static function addCss($view, $cssfile) {  
        $view->registerCssFile($cssfile, [AppAsset::className(), &#39;depends&#39; => &#39;api\assets\AppAsset&#39;]);  
    }  }

Schreiben Sie am Anfang der Ansichtsdatei:

<?php
use yii\helpers\Html;
use app\assets\AppAsset;
 AppAsset::register($this);
 ?>

Bis jetzt können wir auf dem testen Browser und stellen fest, dass die CSS- und JS-Dateien nicht eingeführt werden. Bitte beachten Sie hier, dass wir noch den letzten Schritt benötigen:

Wir müssen der Ansichtsdatei etwas Code hinzufügen (Hinweis: Wenn wir die öffentliche Ansichtsdatei verwenden , wir können es der öffentlichen Ansichtsdatei hinzufügen, wenn nicht, können wir es auf einer separaten Seite ablegen)

So führen Sie CSS- und JS-Dateien in das YII-Framework ein

4 Es ist nicht erforderlich, Methoden im Ressourcenpaket zu definieren Manager, stellen Sie sie einfach direkt auf der Ansichtsseite vor

AppAsset::register($this);  
//css定义一样  
$this->registerCssFile(&#39;@web/css/font-awesome.min.css&#39;,[&#39;depends&#39;=>[&#39;api\assets\AppAsset&#39;]]);  
  
 $this->registerJsFile(&#39;@web/js/jquery-ui.custom.min.js&#39;,[&#39;depends&#39;=>[&#39;api\assets\AppAsset&#39;]]);  
 //$this->registerJsFile(&#39;@web/js/jquery-ui.custom.min.js&#39;,[&#39;depends&#39;=>[&#39;api\assets\AppAsset&#39;],&#39;position&#39;=>$this::POS_HEAD]);

Update Um mehr programmbezogene Inhalte zu erfahren, besuchen Sie bitte die Spalte Programmier-Tutorial auf der chinesischen PHP-Website!

Das obige ist der detaillierte Inhalt vonSo führen Sie CSS- und JS-Dateien in das YII-Framework ein. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn