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


Posted in Javascript onOctober 13, 2017

本文实例讲述了layer前端组件实现图片显示功能的方法。分享给大家供大家参考,具体如下:

实现图片显示功能: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/中查看

另:layui完整源码可点击此处本站下载

希望本文所述对大家基于layui框架的程序设计有所帮助。

Javascript 相关文章推荐
jquery 事件对象属性小结
Apr 27 Javascript
jQuery-serialize()输出序列化form表单值的方法
Dec 26 Javascript
js对字符的验证方法汇总
Feb 04 Javascript
Jquery实现弹性滑块滑动选择数值插件
Aug 08 Javascript
Javascript生成全局唯一标识符(GUID,UUID)的方法
Feb 27 Javascript
原生JS封装Ajax插件(同域、jsonp跨域)
May 03 Javascript
bootstrap table 表格中增加下拉菜单末行出现滚动条的快速解决方法
Jan 05 Javascript
老生常谈js-react组件生命周期
May 02 Javascript
详解基于Bootstrap+angular的一个豆瓣电影app
Jun 26 Javascript
原生JS实现图片懒加载之页面性能优化
Apr 26 Javascript
node.js的http.createServer过程深入解析
Jun 06 Javascript
vue 实现动态路由的方法
Jul 06 Javascript
详解如何去除vue项目中的#——History模式
Oct 13 #Javascript
原生JS上传大文件显示进度条 php上传文件代码
Mar 27 #Javascript
vue中遇到的坑之变化检测问题(数组相关)
Oct 13 #Javascript
seaJs使用心得之exports与module.exports的区别实例分析
Oct 13 #Javascript
vue中axios处理http发送请求的示例(Post和get)
Oct 13 #Javascript
JavaScript实现随机数生成器(去重)
Oct 13 #Javascript
AngualrJs清除定时器遇到的坑
Oct 13 #Javascript
You might like
php基于闭包实现函数的自调用(递归)实例分析
2016/11/11 PHP
thinkphp5+layui实现的分页样式示例
2019/10/08 PHP
jQuery 版本的文本输入框检查器Input Check
2009/07/09 Javascript
jquery教程限制文本框只能输入数字和小数点示例分享
2014/01/13 Javascript
jQuery结合AJAX之在页面滚动时从服务器加载数据
2015/06/30 Javascript
js实现当前输入框高亮显示的方法
2015/08/19 Javascript
浅析JavaScript访问对象属性和方法及区别
2015/11/16 Javascript
AngularJS应用开发思维之依赖注入3
2016/08/19 Javascript
js判断浏览器是否支持严格模式的方法
2016/10/04 Javascript
AngularJS中的缓存使用
2017/01/11 Javascript
jQuery使用siblings获取某元素所有同辈(兄弟姐妹)元素用法示例
2017/01/30 Javascript
jQuery操作DOM_动力节点Java学院整理
2017/07/04 jQuery
Vue中组件之间数据的传递的示例代码
2017/09/08 Javascript
jQuery 开发之EasyUI 添加数据的实例
2017/09/26 jQuery
详解webpack loader和plugin编写
2018/10/12 Javascript
详解如何在vscode里面调试js和node.js的方法步骤
2018/12/24 Javascript
Angular实现svg和png图片下载实现
2019/05/05 Javascript
element-ui中按需引入的实现
2019/12/25 Javascript
js实现html滑动图片拼图验证
2020/06/24 Javascript
浅谈JavaScript 声明提升
2020/09/14 Javascript
ant-design-vue中tree增删改的操作方法
2020/11/03 Javascript
Python psutil模块简单使用实例
2015/04/28 Python
python函数中return后的语句一定不会执行吗?
2017/07/06 Python
Python 机器学习库 NumPy入门教程
2018/04/19 Python
python 去除txt文本中的空格、数字、特定字母等方法
2018/07/24 Python
利用ctypes获取numpy数组的指针方法
2019/02/12 Python
Python3 使用selenium插件爬取苏宁商家联系电话
2019/12/23 Python
python3访问字典里的值实例方法
2020/11/18 Python
纯CSS3制作页面切换效果的实例代码
2019/05/30 HTML / CSS
快速创建 HTML5 Canvas 电信网络拓扑图的示例代码
2018/03/21 HTML / CSS
canvas进阶之如何画出平滑的曲线
2018/10/15 HTML / CSS
妇科医生自荐信
2013/11/05 职场文书
优秀护士先进事迹
2014/05/08 职场文书
给老婆的保证书
2015/01/16 职场文书
2016大一新生军训感言
2015/12/08 职场文书
python中使用redis用法详解
2022/12/24 Redis