博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Yii2引入css和js文件
阅读量:4677 次
发布时间:2019-06-09

本文共 1646 字,大约阅读时间需要 5 分钟。

引入方式有多种:

1、可以直接在视图页面上引入

2、可以直接写原生代码引入,路径是项目目录/web/css 或者/js

3、可以使用assetBundle管理css样式及js脚本.

资源包定义:basic/assets/AppAsset.php

* @since 2.0 */class AppAsset extends AssetBundle{ public $basePath = '@webroot'; public $baseUrl = '@web'; public $css = [ 'css/site.css', 'css/base.css' ]; public $js = [ 'js/sliders.js' ]; public $depends = [ //依赖包,没有可以不写 'yii\web\YiiAsset', 'yii\bootstrap\BootstrapAsset', ]; //定义按需加载JS方法,注意加载顺序在最后 public static function addScript($view, $jsfile) { $view->registerJsFile($jsfile, [AppAsset::className(), 'depends' => 'api\assets\AppAsset']); } //定义按需加载css方法,注意加载顺序在最后 public static function addCss($view, $cssfile) { $view->registerCssFile($cssfile, [AppAsset::className(), 'depends' => 'api\assets\AppAsset']); } }

在视图文件开头写入:

到现在为止,我们可以在浏览器上测试,发现并没有引入css和js文件,这里要注意了,我们还需要最后一步:

在视图文件中我们要加入一下代码(注:如果我们使用公共视图文件,可以加入到公共视图文件,如果没有使用,可以放到单独页面中)

beginPage() ?>
head() ?>
beginBody() ?>
endBody() ?>
endPage() ?>

4、不需要在资源包管理器中定义方法,只要在视图页面中直接引入即可

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

转载链接:https://www.jianshu.com/p/45426d8b2c0e

yii2 在页面底部加载css和js:http://www.manks.top/article/yii2_load_js_css_in_end

转载于:https://www.cnblogs.com/meetuj/p/11429017.html

你可能感兴趣的文章
【读入优化】
查看>>
python-网络编程urllib模块
查看>>
0029 Java学习笔记-面向对象-枚举类
查看>>
CGRectGet *** 获取控件坐标的方法
查看>>
SQL的主键和外键约束
查看>>
Bookmarklet
查看>>
c++primer 第l六章编程练习答案
查看>>
上海秋季HCC小记
查看>>
Illustrator 上色
查看>>
truncate表恢复
查看>>
this关键字的使用
查看>>
Console.Read()、Console.ReadLine()、Console.ReadKey()
查看>>
ecere 编译过程中遇到的问题
查看>>
Cyclone V 与 Avalon-MM资料整理——DE1-SOC学习笔记(1)
查看>>
异常:This application has no explicit mapping for /error, so you are seeing this as a fallback.
查看>>
Flask-SQLAlchemy
查看>>
C# - Generics
查看>>
.NET LINQ 转换数据类型
查看>>
[LGP2791] 幼儿园篮球题
查看>>
170. Two Sum III - Data structure design
查看>>