layer前端组件图片显示功能
作者: default|标签:layer 显示 图片|2018-4-17 15:30
这次给大家带来,的注意事项有哪些,下面就是实战案例,一起来看一下。

实现图片显示功能:layer

1.在这里介绍一种layer前端组件

layer是一款口碑极佳的web弹层组件,她具备全方位的解决方案,
致力于服务各个水平段的开发人员,您的页面会轻松地拥有丰富而友好的操作体验。

官网下载地址:http://layer.layui.com/

或者点击此处本站下载

里面有具体的使用方法

这里注意几点:在使用layer前端组件之前,我们要引入layer的js文件

<script type="text/javascript" src=".../.../layer/layer/layer.js"></script>
<script type="text/javascript" src=".../...//layer/layer/extend/layer.ext.js"></script>

注意layer.js文件应该在jquery后面引入,因为layer.js是基于jquery.js的!

2.json

实现图片显示功能还需要json

具体的用法如下:

{ //您服务端接口需严格按照下述格式返回
    "status": 1,  //请求的状态,1表示成功,其它表示失败
    "msg": "", //状态提示语
    "title": "",  //相册标题
    "id": number型,  //相册id
    "start": 0, //初始显示的图片序号,默认0
    "data": [  //相册包含的图片,数组格式
      {
        "name": "", //图片名
        "pid": number型, //图片id
        "src": "", //原图地址
        "thumb": "", //缩略图地址
        "area": [638, 851] //原图宽高
      }
    ]
}

利用如:

StringBuilder str = new StringBuilder();

的append方法按照上面的链接起来,一定要准确

最后返回的是如:

return str.toString();

具体的用法也可以到官方网站 http://layer.layui.com/中查看

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

用JS的定时器实现进度条

vue-router的使用详解

以上就是layer前端组件图片显示功能的详细内容,更多请关注php中文网其它相关文章!

117
点赞
收藏
分享:
0/300