您的位置:首页 > 编程语言 > PHP开发

Yii2 加载js、css 的方法

2017-03-28 14:16 465 查看
  应用场景

  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

  * @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

  

  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时间过程导致页面空白,导致用户体验不好问题。一般放置在网页底部的后面。

  方案一

  

  $this->registerJs("

  $(function () {

  //为所欲为的写你想要写的js代码吧

  });

  ", \yii\web\View::POS_END);

  方案二

  beginBlock('js') ?>

  //js代码

  endBlock() ?>

  registerJs($this->blocks['js'], \yii\web\View::POS_END); ?>

  解决Yii2在页面底部加载JS,语法提示失效

  加入script 标签即可,注意只有 方案二有效,知道有其他方法的 ,望告知,谢谢!

  

  以上就是本文的全部内容,希望对大家的学习有所帮助。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: