Yii2框架加载css和js文件的方法分析

本文实例讲述了Yii2框架加载css和js文件的方法。分享给大家供大家参考，具体如下：

1、第一步是要把我们的css、js文件放到web目录下

2、第二步修改assets/AppAsset.php文件

<?php
/**
 * @link http://www.yiiframework.com/
 * @copyright Copyright (c) 2008 Yii Software LLC
 * @license http://www.yiiframework.com/license/
 */
namespace app\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',
  //   'bootstrap/css/bootstrap.min.css',
  // ];
  // public $js = [
  //   'jquery/jquery.min.js',
  //   'bootstrap/js/bootstrap.min.js'
  // ];
  public function registerAssetFiles( $view )
  {
    //加一个版本号
    //目的：使浏览器获取最新的文件
    $release = "20170226";
    $this->css = [
      "bootstrap/css/bootstrap.min.css?v={$release}"
    ];
    $this->js = [
       'jquery/jquery.min.js',
       'bootstrap/js/bootstrap.min.js'
    ];
    parent::registerAssetFiles( $view );
  }
}

两种加载方式，我们更推荐下面这种。

更多关于Yii相关内容感兴趣的读者可查看本站专题：《Yii框架入门及常用技巧总结》、《php优秀开发框架总结》、《smarty模板入门基础教程》、《php面向对象程序设计入门教程》、《php字符串(string)用法总结》、《php+mysql数据库操作入门教程》及《php常见数据库操作技巧汇总》

希望本文所述对大家基于Yii框架的PHP程序设计有所帮助。

赞 (0)

相关推荐

  • Yii2框架类自动加载机制实例分析

    本文实例讲述了Yii2框架类自动加载机制.分享给大家供大家参考,具体如下: 在yii中,程序中需要使用到的类无需事先加载其类文件,在使用的时候才自动定位类文件位置并加载之,这么高效的运行方式得益于yii的类自动加载机制. Yii的类自动加载实际上使用的是PHP的类自动加载,所以先来看看PHP的类自动加载.在PHP中,当程序中使用的类未加载时,在报错之前会先调用魔术方法__autoload(),所以我们可以重写__autoload()方法,定义当一个类找不到的时候怎么去根据类名称找到对应的文件并加

  • 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; /** * @

  • Yii实现自动加载类地图的方法

    本文实例讲述了Yii实现自动加载类地图的方法.分享给大家供大家参考.具体如下: Yii继承的一个静态属性$classMap,可以用于Yii的自动加载类地图.数组中的键是类名,数组中的值是相应类文件的路径. require_once($yii); $app = Yii::createWebApplication($config); Yii::$classMap = array( 'JPhpMailer' => Yii::getPathOfAlias('ext') . '/phpmailer/JPh

  • 使用Yii整合的pjax（pushstate+ajax）实现无刷新加载页面

    使用Yii整合的pjax（pushstate+ajax）实现无刷新加载页面

    Pjax是啥? Pjax = history.pushState + Ajax = history.pushState + Async JS + XML(xhr?) BOM对象history被增强了一波,主要是对历史栈的操作,以前只有 replace , go 之类的,都会跳转并刷新整个页面,现在有了 pushState , replaceState 等等单纯操作历史栈的方法,只是单纯修改历史栈里的内容,没有副作用(页面不会跳转刷新) PJAX效果 通过url可以跟踪ajax的动态加载内容.这种

  • Yii安装EClientScript插件扩展实现css,js文件代码压缩合并加载功能

    本文实例讲述了Yii安装EClientScript插件扩展实现css,js文件代码压缩合并加载功能.分享给大家供大家参考,具体如下: 扩展插件下载地址,解压后复制到/protected/vendor/ https://github.com/muayyad-alsadi/yii-EClientScript main配置文件配置插件,components里面增加 //js,css代码压缩,合并 'clientScript' => array( 'class' => 'application.ven

  • YII分模块加载路由的实现方法

    起因.因为项目比较大了之后划了很多模块.就使得config下面的路由文件变得很庞大,变得不好维护.这个时候就想如果可以把路由拆分到不同模块去自己管理,就会变得清晰很多. 拆了之后项目配置结构如下 新增了一个modules.php来管理模块的加载 调整之前 web.php的模块加载配置如下 'modules' => [ 'setup' => [ 'class' => 'appcomponents\modules\setup\Module', ], 'shareorder' => [

  • yii2 页面底部加载css和js的技巧

    一般来说,网页内部的js文件或代码,都是放置在网页底部</body>的前面,这是因为网页自上而下加载,用户在访问我们页面的时候尽量不要因为加载js展现过长时间的空白页面,停留时间过长就白白流失了用户量. yii2中是集成了jQuery的,而且jQuery文件是加载在页面底部的,因此,如果我们的js代码段不在页面底部加载,就很大可能会发生$未定义的友好提示. 我这废话一大堆得毛病确实需要去挂个号看看了... 先来看看js代码段怎么处理 <?php $this->registerJs(

  • Yii2中YiiBase自动加载类、引用文件方法分析(autoload)

    本文实例分析了Yii2中YiiBase自动加载类.引用文件的方法.分享给大家供大家参考,具体如下: 在Yii2中这个函数是用来加载类的,没有直接引用文件的相关实现.但是这个也可以用来引用文件. public static function autoload($className) { /* * $classMap是一个name-value数组, * name为类的名称, * value为这个类的文件路径,其中路径可包含别名 * * 首先在$classMap中查找是否设置了类别名路径 */ if

  • Yii2框架加载css和js文件的方法分析

    Yii2框架加载css和js文件的方法分析

    本文实例讲述了Yii2框架加载css和js文件的方法.分享给大家供大家参考,具体如下: 1.第一步是要把我们的css.js文件放到web目录下 2.第二步修改assets/AppAsset.php文件 <?php /** * @link http://www.yiiframework.com/ * @copyright Copyright (c) 2008 Yii Software LLC * @license http://www.yiiframework.com/license/ */ na

  • 如何实现JavaScript动态加载CSS和JS文件

    项目中需要用到动态加载CSS 文件,整理了一下,顺便融合了动态加载JS 的功能写成了一个对象,先上代码: var dynamicLoading = { css: function(path){ if(!path || path.length === 0){ throw new Error('argument "path" is required !'); } var head = document.getElementsByTagName('head')[0]; var link =

  • php ci框架中加载css和js文件失败的解决方法

    在将html页面整合到ci框架里面的时候,加载css和js失败,弄了半天发现ci框架是入口的框架,对框架中文件的所有请求都需要经过index.php处理完成,当加载外部的css和js文件的时候要使用base_url()函数处理外部的链接. 比如: 在config配置文件中的base_url为:" localhost:8080/项目名称/ " 在控制器中访问application/resource/aaa.js文件 相对路径<script src= "resource/a

  • php ci框架中加载css和js文件失败的原因及解决方法

    在将html页面整合到ci框架里面的时候,加载css和js失败,弄了半天发现ci框架是入口的框架, 对框架中文件的所有请求都需要经过index.php处理完成,当加载外部的css和js文件的时候要使 用base_url()函数处理外部的链接. 比如: 在config配置文件中的base_url为:" localhost:8080/项目名称/ " 在控制器中访问application/resource/aaa.js文件 相对路径<script src= "resource

  • JS实现加载和读取XML文件的方法详解

    本文实例讲述了JS实现加载和读取XML文件的方法.分享给大家供大家参考,具体如下: 有时在开发时用到 JS 加载和读取XML文件的情况,写下提供参考,这里主要是分两步完成: 1. JS加载XML文件 步骤一般为(1),建立 XML DOM 对象:(2),设置加载方式,异步(推荐)或同步: (3)提供XML文件URL然后调用 load 方法:大致如下: var xmlFileName="xxFile.xml"; var xmlDoc=''; if (window.ActiveXObjec

  • vue加载自定义的js文件方法

    在做项目中需要自定义弹出框.就自己写了一个. 效果图 遇见的问题 怎么加载自定义的js文件 vue-插件这必须要看.然后就是自己写了. export default{ install(Vue){ var tpl; // 弹出框 Vue.prototype.showAlter = (title,msg) =>{ var alterTpl = Vue.extend({ // 1.创建构造器,定义好提示信息的模板 template: '<div id="bg">' + '&

  • ThinkPHP模版中导入CSS和JS文件的方法

    本文实例讲述了ThinkPHP模版中导入CSS和JS文件的方法.分享给大家供大家参考.具体方法如下: 常用方法 1. css使用link 2. js使用src 用tp自己的导入标签import 导入Public文件夹下面的Js目录中的test.js文件,import标签可以省略type属性,默认就是js的文件 复制代码 代码如下: <import type='js' file='Js.test'> <import type='css' file='Css.test'> 不在Publ

  • php实现压缩多个CSS与JS文件的方法

    本文实例讲述了php实现压缩多个CSS与JS文件的方法.分享给大家供大家参考.具体实现方法如下: 1. 压缩css 复制代码 代码如下: <?php    header('Content-type: text/css');    ob_start("compress");    function compress($buffer) {        /* remove comments */        $buffer = preg_replace('!/\*[^*]*\*+(

  • jQuery加载及解析XML文件的方法实例分析

    本文实例讲述了jQuery加载及解析XML文件的方法.分享给大家供大家参考,具体如下: 1.简述 XML(eXtensible Markup Language)即可扩展标记语言,与HTML一样,都是属于SGML标准通用语言. 2. Content-Type 很多情况下XML文件不能正常解析都是由于Content-Type没有设置好.如果Content-Type本身就是一个XML文件则不需要设置:如果是由后台程序动态生成的,那么就需要设置Content-Type为"text/xml",否

随机推荐