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

本文实例讲述了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框架的程序设计有所帮助。

赞 (0)

相关推荐

  • layui前段框架日期控件使用方法详解

    layui前段框架日期控件使用方法详解

    本文实例为大家分享了layui-日期控件的实现代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>日期</title> <link rel="stylesheet" href="layui/css/layui.css"> </head> <body

  • layer子层给父层页面元素赋值,以达到向父层页面传值的效果实例

    父层: jsp中: //页面上添加一个隐藏的输入框待用于被子层设置value,从而将子层的数据传递到此页面 <input type="hidden" id="getValue" name="getValue" value="" /> js代码: //设置function,当执行时,弹出子窗口并传递当前窗口名称 //弹出子窗口(选择商家) function choseMerchant() { //获取当前窗口名称 v

  • jQuery、layer实现弹出层的打开、关闭功能

    打开弹出层: 在list页面带入layer.js 在list页面点击时,弹出form弹出层,list.js: $(".add_category,.update").click(function(){ //弹出框 var doMain = $('.domain_name').val(); layer.open({ shade: [0.5, '#000', false], type: 2, area: ['900px', '530px'], fix: false, //不固定 maxmin

  • 基于LayUI分页和LayUI laypage分页的使用示例

    基于LayUI分页和LayUI laypage分页的使用示例

    本文介绍了LayUI分页,LayUI动态分页,LayUI laypage分页,LayUI laypage刷新当前页,分享给大家,具体如下: 效果图:  一.引用js依赖 主要是jquery-1.11.3.min.js 和 layui.all.js , json2.js用来做json对象转换的 <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.11.3.m

  • layui弹出层效果实现代码

    layui弹出层效果实现代码

    本文实例为大家分享了layui弹出层的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>弹出层</title> <link rel="stylesheet" href="layui/css/layui.css" media="all"> &

  • layui文件上传实现代码

    layui文件上传实现代码

    本文实例为大家分享了layui文件上传的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>文件上传</title> <link rel="stylesheet" href="layui/css/layui.css"> <link rel="st

  • layui导航栏实现代码

    layui导航栏实现代码

    本文实例为大家分享了layui水平导航菜单的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>导航与面包屑</title> <link rel="stylesheet" href="layui/css/layui.css"> </head> <

  • 深入理解jQuery layui分页控件的使用

    $.getJSON( )的使用方法简介 $.getJSON( url [, data ] [, success(data, textStatus, jqXHR) ] ) url是必选参数,表示json数据的地址: data是可选参数,用于请求数据时发送数据参数: success是可参数,这是一个回调函数,用于处理请求到的数据. //内容页面 <br> <div id="notice_div"></div><br> //分页控件 <d

  • layui表格实现代码

    layui表格实现代码

    本文实例为大家分享了layui基本表格的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>基本表格</title> <link rel="stylesheet" href="layui/css/layui.css"> </head> <bod

  • layui选项卡效果实现代码

    layui选项卡效果实现代码

    本文实例为大家分享了layui选项卡的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>选项卡</title> <link rel="stylesheet" href="layui/css/layui.css"> </head> <body&

随机推荐