静态资源加载
Dcat Admin
修改了pjax
源码,增加了js
脚本按需加载的功能,开发者只需在控制器action
中引入需要用到的js
组件即可,而无需在项目初始化时引入所有的js
组件。
加载js脚本
Admin::js
方法可以引入js
脚本,使用如下:
class UserController extend Controller
{
public function index()
{
Admin::js('/assets/js/index.js');
Admin::js([
'/assets/js/index2.js'
]);
}
}
加载css脚本
Admin::css
方法可以引入css
脚本,使用如下:
class UserController extend Controller
{
public function index()
{
Admin::css('/assets/css/index.css');
Admin::css([
'/assets/css/index2.css'
]);
}
}
动态添加js代码
Admin::script
方法可以动态添加js
代码,使用如下:
public function index()
{
Admin::script(
<<<JS
console.log('Hello world!');
JS
);
}
动态添加css代码
Admin::style
方法可以动态添加css
代码,使用如下:
public function index()
{
Admin::style(
<<<CSS
body {
color: #333;
}
CSS
);
}
在模板中引入静态资源
在模板中手动引入静态资源需要使用admin_asset
函数:
// 引入css
<link rel="stylesheet" href="{{ admin_asset("vendor/dcat-admin/dcat-admin/main.min.css") }}">
// 引入js
<script src="{{ admin_asset('vendor/dcat-admin/dcat-admin/main.min.js')}}"></script>
在模板中添加js代码
要在模板中添加的js
代码需要放在Dcat.ready
方法内执行,这样才能保证你的js
代码在所有js
脚本加载完成之后执行。
<script>
Dcat.ready(function () {
console.log('所有js都加载完成了');
});
</script>