继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

Laravel-admin 使用Layer相册功能

AI人工智能视频入门
关注TA
已关注
手记 330
粉丝 93
获赞 397

Laravel-admin 使用Layer相册功能

文章出处:倔强新手猿---原文地址

使用Laravel-admin后台,Laravel-admin已经集成了很多前端组件,但是在手册中也没有发现能够展示相册的插件,而本人比较喜欢Layer弹窗的插件所以想使用Layer来进行效果展示

 

通读手册找到了Laravel-admin是可以自己定义组件的。但是本人功力不够。看不懂。。。。

还好除了自定义组件之外还可以进行前端资源引入

关于前端资源问题
如果需要使用自己的前端文件,可以在app/Admin/bootstrap.php中引入:

Admin::css('path/to/your/css');
Admin::js('path/to/your/js');

上面引入自Laravel-admin手册中常见问题 点击查看链接 http://laravel-admin.org/docs/#/zh/qa

所以就将Layer资源下载到本地,然后放入Laravel中的public目录下 本人版本下载3.1

然后在app/Admin/bootstrap.php中引入use Encore\Admin\Facades\Admin;
Admin::js('/layer-v3.1.1/layer-v3.1.1/layer/layer.js');

本人下载layer-v3.1.1版本,所以此处目录请根据自己响应修改

然后之后就可以在控制器中直接使用layer的功能了

下面以本人所做layer相册功能为例

 

复制代码

首先添加弹出相册功能按钮$grid->actions(function ($action) {       $action->append('<a href="' . LayerPhoto(url('admin/scenic/get/photo'),1) . '"><i class="fa fa-eye"></i>查看相册</a>');
  });

复制代码

上面代码中LayerPhoto为自定义的函数

复制代码

/*
     * LayerPhoto layer相册使用
     * $url 获取数据的地址
     * url地址返回格式 :
     * [
     *      'title' => '',
     *      'id' => 1,
     *      'start' => 0
            [
                'alt' => '图片标题1',
                'src' => '图片地址'
            ],
            [
                'alt' => '图片标题2',
                'src' => '图片地址'
            ],
            [
                'alt' => '图片标题3',
                'src' => '图片地址'
            ],
        ]
     *
     * $type 相册的弹出样式     */function LayerPhoto($url,$type = 1)
{    $script = "javascript:$.getJSON('{$url}',function(json){layer.photos({photos: json,anim :{$type}});});"; //此处不能分行显示 必须不能存在空格    return $script;
}

复制代码

至于自定义函数功能解释

复制代码

首先建立函数PHP文件   app/自定义目录/自定义文件名.php

在此文件中写入自定义函数

然后在 composer.json中的autoload里面添加或者修改files"autoload": {
          ···        "psr-4": {            "App\\": "app/"
        },
        "files":[            "app/自定义目录/自定义文件名.php"
        ]
    },然后执行 
    composer dump-autoload即可

复制代码

 

之后便可以显示出layer相册功能了

其他Layer弹窗功能一样处理即可


打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP