当前位置：首页 > 资讯 > 技术文档

layui中layer前端组件实现图片显示功能的方法分析

时间：2022-04-07 10:05 编辑：来源：阅读：
扫一扫，手机访问

摘要：layui中layer前端组件实现图片显示功能的方法分析

本文实例讲述了layer前端组件实现图片显示功能的方法。分享给大家供大家参考，具体如下：实现图片显示功能：layer [b]1.在这里介绍一种layer前端组件[/b] layer是一款口碑极佳的web弹层组件，她具备全方位的解决方案，致力于服务各个水平段的开发人员，您的页面会轻松地拥有丰富而友好的操作体验。官网下载地址：[url=http://layer.layui.com/]http://layer.layui.com/[/url] 或者点击此处[url=http://xiazai.jb51.net/201710/yuanma/layer-v3.1.0(jb51.net).rar][b]本站下载[/b][/url]。里面有具体的使用方法这里注意几点：在使用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>

[b]注意[/b]：layer.js文件应该在jquery后面引入，因为layer.js是基于jquery.js的！ [b]2.json[/b] 实现图片显示功能还需要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();

具体的用法也可以到官方网站 [url=http://layer.layui.com/]http://layer.layui.com/[/url]中查看另：layui完整源码可点击此处[url=http://xiazai.jb51.net/201710/yuanma/layui-v2.1.5(jb51.net).rar][b]本站下载[/b][/url]。希望本文所述对大家基于layui框架的程序设计有所帮助。

全部评论(0)

上一篇：jquery实现简单的瀑布流布局
下一篇：layer实现关闭弹出层刷新父界面功能详解

资讯排行榜
更多>>