yii2.0 static resource js css introduction method-PHP开发-php.cn

Home

php教程

PHP开发

yii2.0 static resource js css introduction method

黄舟

Jan 03, 2017 am 09:36 AM

Configure resource bundle:

Yii2 uses the AssetBundle resource package class for CSS/JS management.

Open backend/assets/AppAsset.php

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

Copy after login

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

Copy after login

Static resources are loaded in the view

1. The view (or layout) uses global CSS/ JS

use yiihelpersHtml; 
use backendassetsAppAsset; 
use backendwidgetsAlert; 

AppAsset::register($this);

Copy after login

2. Load separate styles in the view

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

Copy after login

3. Load separate JS

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

Copy after login

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

Copy after login

4. Introduce JS/CSS files into the view

Use custom functions

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

Copy after login

Load directly

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

Copy after login

The above is the content of the yii2.0 static resource js css introduction method, more related Please pay attention to the PHP Chinese website (www.php.cn) for content!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn