Yii2 加载css、js 载入静态资源
应用场景
Yii2提供了AppAsset类管理静态资源,在使用Yii2 布局模板时,如果想在某个页面内部写一段js 并且在页面底部,如果直接使用 script 标签是不可以的。
使用AppAsset类管理静态资源
打开assetsAppAsset.php,定义 addJs(),addCss() 分别用于在静态页面引入外部js、css 文件
1、修改AppAsset.php文件代码
namespace backend\assets; use yii\web\AssetBundle; /** * @author Qiang Xue <qiang.xue@gmail.com> * @since 2.0 */ class AppAsset extends AssetBundle { public $basePath = "@webroot"; public $baseUrl = "@web"; //默认自动加载样式 public $css = [ "css/site.css", ]; //默认自动加载js public $js = [ ]; //依赖关系管理 public $depends = [ "yii\web\YiiAsset", "yii\bootstrap\BootstrapAsset", ]; //定义按需加载JS方法,注意加载顺序在最后 public static function addJs($view, $jsfile) { $view->registerJsFile( $jsfile, [ AppAsset::className(), "depends" => "backend\assets\AppAsset" ] ); } //定义按需加载css方法,注意加载顺序在最后 public static function addCss($view, $cssfile) { $view->registerCssFile( $cssfile, [ AppAsset::className(), "depends" => "backend\assets\AppAsset" ] ); } }
2、在静态页面调用AppAsset.php
<?php use backend\assets\AppAsset; AppAsset::register($this); AppAsset::addJs($this,Yii::$app->request->baseUrl."/js/a.js"); AppAsset::addCss($this,Yii::$app->request->baseUrl."/css/b.css"); ?>
在网站页面底部加载javascript代码
网页内部的js文件或代码,根据页面加载顺序,避免执行js时间过程导致页面空白,导致用户体验不好问题。一般放置在网页底部</body>的后面。
方案一
<?php $this->registerJs(" $(function () { //为所欲为的写你想要写的js代码吧 }); ", \yii\web\View::POS_END);
方案二
<?php $this->beginBlock('js') ?> //js代码 <?php $this->endBlock() ?> <?php $this->registerJs($this->blocks['js'], \yii\web\View::POS_END); ?>
解决Yii2在页面底部加载JS,语法提示失效
加入script 标签即可,注意只有 方案二有效,知道有其他方法的 ,望告知,谢谢!
<script type="text/javascript"> <?php $this->beginBlock('js') ?> //js代码 <?php $this->endBlock() ?> <?php $this->registerJs($this->blocks['js'], \yii\web\View::POS_END); ?> </script>
(资源库 www.zyku.net)
您可能感兴趣的文章
- 07-26深入理解Yii2.0乐观锁与悲观锁的原理与使用
- 07-07Yii2第三方类库插件Imagine的安装和使用
- 06-28YII2自动登录Cookie总是失效的解决方法
- 06-05Yii2中简单的场景使用介绍
- 05-28yii插入数据库防并发的简单代码
- 05-21Yii框架使用魔术方法实现跨文件调用功能示例
- 05-21Yii框架实现的验证码、登录及退出功能示例
- 04-26yii2中dropDownList实现二级和三级联动写法
- 03-16Yii1.1中通过Sql查询进行的分页操作
- 02-18yii实现创建验证码实例解析
- 11-04苹果13mini如何启用来电闪光灯
- 07-30jquery v3.2.1
- 01-11中拓LMIS-中拓LMIS应用软件功能介绍
- 01-09乐清行-乐清行应用软件功能介绍
- 01-10云上巴东-云上巴东应用软件功能介绍
- 01-31小米air2pro配对教程
- 01-12特效变音魔术师-特效变音魔术师应用软
- 11-30帝国CMS去除showtags标签中间空格间隔
- 03-31vivo手机自定义图标设置教程
- 02-11解决Python运算符重载的问题
最近更新
阅读排行
猜你喜欢
- 03-14荣耀50se屏幕截图教程
- 09-15QQ音乐一起听发送表情步骤分享
- 01-12趣味照片编辑神器-趣味照片编辑神器应
- 01-12激萌相机-激萌相机应用软件功能介绍
- 01-11八局e学堂-八局e学堂应用软件功能介绍
- 11-15倒数日设置背景图步骤介绍
- 02-14华为mate40新建指纹操作教程
- 04-10一加9pro启用隐私替身方法
- 12-09把其他格式的视频转换成H.264编码的MP
- 01-11手机投屏通-手机投屏通应用软件功能介