Home  >  Article  >  Web Front-end  >  Layer front-end component picture display function

Layer front-end component picture display function

php中世界最好的语言
php中世界最好的语言Original
2018-04-17 15:30:471480browse

This time I bring to you, what are the precautions, the following is a practical case, let's take a look.

Implement picture display function: layer

1. Here we introduce a layer front-end component

Layer is a web elastic layer component with excellent reputation. It has a comprehensive solution and is committed to serving developers of all levels. Your page will easily have a rich and friendly operating experience.

Official website download address: http://layer.layui.com/

Or click here

this site to download.

There are specific usage methods

Note a few points here: Before using the layer front-end component, we need to introduce the layer’s js file

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

Note: The layer.js file should be introduced after jquery, because layer.js is based on jquery.js!

2.json

Json is also required to implement the image display function:

The specific usage is as follows:

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

StringBuilder str = new StringBuilder();
The append method is linked as above and must be accurate

The final return is like:

return str.toString();
The specific usage can also be viewed on the official website

http://layer.layui.com/

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to php Chinese Other related articles online!

Recommended reading:

Use JS timer to implement the progress bar

Detailed explanation of the use of vue-router

The above is the detailed content of Layer front-end component picture display function. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn