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

yii2.0 static resource js css introduction method

黄舟
Release: 2017-01-03 09:36:29
Original
2147 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

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

or

点我弹出OK
beginBlock('test') ?> $(function($) { $('#mybutton').click(function() { alert('OK'); }); }); endBlock() ?> registerJs($this->blocks['test'], 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(), 'depends' => 'backendassetsAppAsset']); } AppAsset::register($this); //只在该视图中使用非全局的jui AppAsset::addScript($this,[email protected]/* *//js/jquery-ui.custom.min.js'); AppAsset::addCss($this,[email protected]/* *//css/font-awesome/css/font-awesome.min.css');
Copy after login

Load directly

AppAsset::register($this); //css定义一样 $this->registerCssFile([email protected]/* *//css/font-awesome.min.css',['depends'=>['backendassetsAppAsset']]); $this->registerJsFile([email protected]/* *//js/jquery-ui.custom.min.js',['depends'=>['backendassetsAppAsset']]);
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
    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!