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 相关文章推荐
基于javascipt-dom编程 table对象的使用
Apr 22 Javascript
JS动态获取当前时间,并写到特定的区域
May 03 Javascript
js中如何把字符串转化为对象、数组示例代码
Jul 17 Javascript
基于jquery的9行js轻松实现tab控件示例
Oct 12 Javascript
jQuery 无刷新分页实例代码
Nov 12 Javascript
JavaScript实现数据类型的相互转换
Mar 06 Javascript
AngularJS 服务详细讲解及示例代码
Aug 17 Javascript
微信小程序 122100版本更新问题解决方案
Dec 22 Javascript
jquery获取下拉框中的循环值
Feb 08 Javascript
JavaWeb表单及时验证功能在输入后立即验证(含用户类型,性别,爱好...的验证)
Jun 09 Javascript
vue中mint-ui的使用方法
Apr 04 Javascript
layer.confirm点击第一个按钮关闭弹出框的方法
Sep 09 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 时间转换Unix时间戳代码
2010/01/22 PHP
详解php的魔术方法__get()和__set()使用介绍
2012/09/19 PHP
PHP has encountered a Stack overflow问题解决方法
2014/11/03 PHP
Yii实现多按钮保存与提交的方法
2014/12/03 PHP
YII Framework框架教程之安全方案详解
2016/03/14 PHP
PHP简单获取及判断提交来源的方法
2016/04/22 PHP
PHP判断数组是否为空的常用方法(五种方法)
2017/02/08 PHP
PHP更安全的密码加密机制Bcrypt详解
2017/06/18 PHP
PHP让网站移动访问更加友好方法
2019/02/14 PHP
javascript getElementsByClassName实现代码
2010/10/11 Javascript
jquery EasyUI的formatter格式化函数代码
2011/01/12 Javascript
仿jQuery的siblings效果的js代码
2011/08/09 Javascript
jQuery获取Select选择的Text和Value(详细汇总)
2013/01/25 Javascript
json格式的时间显示为正常年月日的方法
2013/09/08 Javascript
使用JQ来编写最基本的淡入淡出效果附演示动画
2014/10/31 Javascript
js点击选择文本的方法
2015/02/09 Javascript
js实现n秒倒计时后才可以点击的效果
2015/12/20 Javascript
Bootstrap菜单按钮及导航实例解析
2016/09/09 Javascript
javascript ES6 新增了let命令使用介绍
2017/07/07 Javascript
解决Mac下安装nmp的淘宝镜像失败问题
2018/05/16 Javascript
解决select2在bootstrap modal中不能正常使用的问题
2018/08/09 Javascript
详解jQuery-each()方法
2019/03/13 jQuery
Vue2.0+Vux搭建一个完整的移动webApp项目的示例
2019/03/19 Javascript
js常见遍历操作小结
2019/06/06 Javascript
vue 如何使用递归组件
2020/10/23 Javascript
Python内置模块hashlib、hmac与uuid用法分析
2018/02/12 Python
Python叠加两幅栅格图像的实现方法
2019/07/05 Python
Python使用get_text()方法从大段html中提取文本的实例
2019/08/27 Python
Python多线程实现支付模拟请求过程解析
2020/04/21 Python
HTML5 标准将把互联网视频扔回到黑暗时代
2010/02/10 HTML / CSS
高清安全摄像头系统:Lorex Technology
2018/07/20 全球购物
设计师求职信
2014/07/01 职场文书
岗位说明书怎么写
2014/07/30 职场文书
超市开业庆典活动策划方案
2014/09/15 职场文书
县长群众路线对照检查材料思想汇报
2014/10/02 职场文书
领导欢送会主持词
2015/07/06 职场文书