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弹窗功能一样处理即可
以上是我自己的想法,也可以实现layer的弹窗功能,不知道是否有更加便捷的方式可以实现,如果有希望能留言告知一下,万分感谢
Laravel-admin 使用Layer相册功能的更多相关文章
- php相册功能实现(包含php图片上传,后台管理,浏览和删除)教程例子
相册功能实现(包含php图片上传,后台管理,浏览和删除)教程例子包括五个部分: 一.相册首页 <html> <head> <meta charset="utf- ...
- 关于QQ空间相册功能的构想与简单实现
QQ空间上传照片对其可以分类,形成不同的相册,这对于用户体验来说是很不错的,如果用户只能上传不加以分类,那么用户体验会很差. 下面是自己关于相册功能实现的一些简单看法: 首先,是创建相册,可以用pan ...
- HTML5调用手机摄像机、相册功能 <input>方法
最近用MUI框架做webapp项目,在有PLUS环境的基础上能直接调用手机底层的API来使用拍照或从相册选择上传功能! 在查资料的时候,想起了另一种用input调用摄像和相册功能的方法,之前没有深入了 ...
- dgango中admin下添加搜索功能
admin下添加搜索功能: 在表单中加入search_fields = ['ip','hostname'] 可模糊匹配 当有人在管理搜索框中进行搜索时,Django将搜索查询分解成单词,并返回包含 ...
- 转:HTML5页面如何在手机端浏览器调用相机、相册功能
HTML5页面如何在手机端浏览器调用相机.相册功能 开发微信端浏览器访问的HTML5的页面,页面中有一个<input id="input" type="file&q ...
- hexo主题中添加相册功能
博客已迁移至http://lwzhang.github.io. 基本上所有的hexo主题默认都没有实现相册功能,一方面相册功能的需求较少,毕竟hexo主要是写博客用的:另一方面实现相册功能比较麻烦,比 ...
- JS中调用android和ios系统手机打开相机并可选择相册功能
编写不易,如有转载,请声明出处: 梦回河口:http://blog.csdn.net/zxc514257857/article/details/57626154 实现android手机打开相机选择相册 ...
- laravel框架中超实用的功能介绍
本篇文章给大家带来的内容是关于laravel框架中超实用的功能介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 让lumen的dd() dump()像laravel一样优雅 1 c ...
- HTML5页面如何在手机端浏览器调用相机、相册功能
最近在做一个公司的保险信息处理系统项目,开发微信端浏览器访问的HTML5的页面,页面中有一个<input id="input" type="file"/& ...
随机推荐
- java将一个正整数分解质因数。例如:输入90,打印出90=2*3*3*5。
首先我们的算法是:例如 输入的是 90 1.找到90的最小公约数(1除外)是 2 2.然后把公约数 2 输出 3.接着用 90 / 2 = 45 (如果这里是素数,就结束,否则继续找最小公约数) 4. ...
- JS中全等和相等操作符的区别和比较规则
一.两者的区别 相等:先强制转换变量类型,再比较 全等:不转换类型,一旦类型不同,就是不全等. 二.相等和不相等的比较规则 1.操作符中有布尔值时: 比较前先将之转换为数值 false => 0 ...
- 排序技巧——双关键字排序(快速排序,sort)
一个萌新的成长之路 Background 在做题过程中,我们常会遇到对双关键字排序的情况,如:当分数相等时,序号小的在前. 这时我们可以通过定义cmp函数作为sort的参数进行排序. Solution ...
- hdu 1880 魔咒字典
https://vjudge.net/problem/HDU-1880 题意:略 思路: 一开始就是想到了正确的思路,但是代码写炸了,死活过不了.这题嘛,就是建议一个魔咒与咒语的双向映射.首先用字符串 ...
- POJ-2240 Arbitrage---判断正环+枚举
题目链接: https://vjudge.net/problem/POJ-2240 题目大意: 已知n种货币,以及m种货币汇率及方式,问能否通过货币转换,使得财富增加. 思路: 由于这里问的是财富有没 ...
- 对scrapy经典框架爬虫原理的理解
1,spider打开某网页,获取到一个或者多个request,经由scrapy engine传送给调度器schedulerrequest特别多并且速度特别快会在scheduler形成请求队列queue ...
- UI前端开发都是做什么的以及html、css、php、js等究竟是神马关系
第一个问题: 1.UI,是视觉方面的呈现.一个网页首先由UI完成整体设计,然后把每一个模块切图,例如组件.logo.版块等.常用工具:PS,AI,DW. 2.前端,是将UI的设计代码化,因为计算机无法 ...
- 在python后台如何将客户端提交的form表单数据提取出来?
1.获取客户端提交的表达数据,数据类型为ImmutableMultiDictformData = request.form2.将提取的数据转化成字典formDict = formData.to_dic ...
- Spring Cloud学习笔记-005
服务消费者 之前已经搭建好了微服务中的核心组件——服务注册中心(包括单节点模式和高可用模式).也有了服务提供者,接下来搭建一个服务消费者,它主要完成两个目标,发现服务以及消费服务.其中,服务发现的任务 ...
- Javascript中的url编码与解码(详解)
摘要 本文主要针对URI编解码的相关问题做了介绍,对url编码中哪些字符需要编码.为什么需要编码做了详细的说明,并对比分析了Javascript中和编解码相关的几对函数escape / unescap ...