静态资源加载
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>