JBolt开发平台入门(10)-自动化组件-看图与相册

教程总目录

上一节:JBolt平台开发入门(9) -多级联动Select

在JBolt中,封装了图片查看器和相册查看器组件,基于Layer.js中的layer.photo

在JBolt开发平台的Demo模块有演示:

JBolt开发平台入门(10)-自动化组件-看图与相册_第1张图片
看图与相册demo

一、单图配置

img标签配置一个属性就可以了 data-photobtn
这就声明了这个img,自动识别为是个看图触发器,点击它就会弹出大图查看器。

JBolt开发平台入门(10)-自动化组件-看图与相册_第2张图片
配置代码

这样就搞定了。

看效果:

JBolt开发平台入门(10)-自动化组件-看图与相册_第3张图片
点击看图了-单张

二、多图相册模式

有的项目需求中需要一个业务上传多张资料图,最近JBolt平台的VIP用户在开发手机端业务的时候,遇到了一个流程审核业务,需要手机端多张拍照上传,然后审核人员在后台可以看到提交的数据 并且希望点图 可以相册一样的大图预览。

JBolt开发平台里实现这个很简单,只需要在上面介绍的单图相册基础上,加一个相册属性就行了。

data-ablum="相册名字"

这个就是声明了 好几个照片上都带着相同的相册名,就是一个相册里的。


JBolt开发平台入门(10)-自动化组件-看图与相册_第4张图片
多图相册模式代码

看个效果:

带着操作按钮,支持键盘左右切换按键事件,轻松支持客户业务。


JBolt开发平台入门(10)-自动化组件-看图与相册_第5张图片
带着左右切换效果
JBolt开发平台入门(10)-自动化组件-看图与相册_第6张图片
效果图

下一节:JBolt平台入门(11)-组件自动化-laydate的特殊使用

JFinal自由开发者计划正式推出 优惠加入!

点我了解JFinal开发者计划

期待你的加入

你可能感兴趣的:(JBolt开发平台入门(10)-自动化组件-看图与相册)