méthode d'introduction de la ressource statique js css yii2.0-PHP开发-php.cn

méthode d'introduction de la ressource statique js css yii2.0

黄舟

Libérer： 2017-01-03 09:36:29

original

2221 Les gens l'ont consulté

Configurer le bundle de ressources :

Pour la gestion CSS/JS, Yii2 utilise la classe de package de ressources AssetBundle.

Ouvrir backend/assets/AppAsset.php

namespace backendassets; 
use yiiwebAssetBundle; 
class AppAsset extends AssetBundle { 
public $basePath = [email protected]/* */&#39;; 
public $baseUrl = [email protected]/* */&#39;;

Copier après la connexion

//全局CSS 
public $css = [ 
&#39;css/animate.css&#39;, 
&#39;css/style.min.css&#39;, 
]; 

//全局JS 
public $js = [ 
&#39;js/jquery-2.1.1.js&#39; 
]; 

//依赖关系 
public $depends = [ 
&#39;yiiwebYiiAsset&#39;, 
&#39;yiiootstrapBootstrapAsset&#39;, 
]; 

//定义按需加载JS方法，注意加载顺序在最后 
public static function addScript($view, $jsfile) { 
$view->registerJsFile($jsfile, [AppAsset::className(), &#39;depends&#39; => &#39;backendassetsAppAsset&#39;]); 
} 

//定义按需加载css方法，注意加载顺序在最后 
public static function addCss($view, $cssfile) { 
$view->registerCssFile($cssfile, [AppAsset::className(), &#39;depends&#39; => &#39;backendassetsAppAsset&#39;]); 
} 
 }

Copier après la connexion

Les ressources statiques sont chargées dans la vue

Vue (ou 1. mise en page) Utiliser CSS/JS global

use yiihelpersHtml; 
use backendassetsAppAsset; 
use backendwidgetsAlert; 

AppAsset::register($this);

Copier après la connexion

2. Charger des styles séparés dans la vue

$cssString = ".gray-bg{color:red;}"; 
$this->registerCss($cssString);

Copier après la connexion

3. Charger du JS séparé dans la vue

<?php$this->registerJs( 
&#39;$("document").ready(function(){ 
$("#login-form").validate({
errorElement : "small", 
errorClass : "error",
rules: {
"AgNav[nav_cn]": {
required: true,
},
},
messages:{
"AgNav[nav_cn]" : { 
required : "此字段不能为空.",
},
}
});
});&#39;
);?>

Copier après la connexion

<div id="mybutton">点我弹出OK</div> 

<?php $this->beginBlock(&#39;test&#39;) ?> 
$(function($) { 
$(&#39;#mybutton&#39;).click(function() { 
alert(&#39;OK&#39;); 
}); 
}); 
<?php $this->endBlock() ?> <?php $this->registerJs($this->blocks[&#39;test&#39;], yiiwebView::POS_END); ?>

Copier après la connexion

4. Introduisez les fichiers JS/CSS dans la vue

Utilisez la fonction personnalisée

public static function addScript($view, $jsfile) { 
$view->registerJsFile($jsfile, [AppAsset::className(), &#39;depends&#39; => &#39;backendassetsAppAsset&#39;]); 
}
AppAsset::register($this); 
//只在该视图中使用非全局的jui 
AppAsset::addScript($this,[email protected]/* *//js/jquery-ui.custom.min.js&#39;); 
AppAsset::addCss($this,[email protected]/* *//css/font-awesome/css/font-awesome.min.css&#39;);

Copier après la connexion

pour charger directement

AppAsset::register($this); 
//css定义一样 
$this->registerCssFile([email protected]/* *//css/font-awesome.min.css&#39;,[&#39;depends&#39;=>[&#39;backendassetsAppAsset&#39;]]); 
$this->registerJsFile([email protected]/* *//js/jquery-ui.custom.min.js&#39;,[&#39;depends&#39;=>[&#39;backendassetsAppAsset&#39;]]);

Copier après la connexion

Ce qui précède est le contenu de la méthode d'introduction de la ressource statique js css yii2.0. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !