Home > php教程 > PHP开发 > body text

yii2.0 static resource js css introduction method

黄舟
Release: 2017-01-03 09:36:29
Original
2209 people have browsed it

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]/* */'; 
public $baseUrl = [email protected]/* */';
Copy after login
//全局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']); 
} 
 }
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

or

<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 (m.sbmmt.com) for content!


Related labels:
source:php.cn
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
Popular Recommendations
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!