레이어 프런트 엔드 구성 요소 그림 표시 기능

이번에는 노트가 무엇인지 알려드리겠습니다. 실제 사례를 살펴보겠습니다.

picture표시 기능 구현: layer

1. 레이어 프런트 엔드 구성 요소를 소개합니다

Layer는 다양한 솔루션을 갖추고 있으며 모든 수준의 개발자에게 서비스를 제공하기 위해 노력하고 있으며 귀하의 페이지는 풍부하고 친숙한 운영 환경을 쉽게 제공할 수 있도록 최선을 다하고 있습니다.

공식 홈페이지 다운로드 주소: http://layer.layui.com/

또는 여기를 클릭하세요

이 사이트에서 다운로드하세요.

안에는 구체적인 사용 방법이 있습니다

여기서 몇 가지 사항에 유의하세요. 레이어 프런트 엔드 구성 요소를 사용하기 전에 레이어의 js 파일

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

을 소개해야 합니다.

Note: 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();

추가 방법은 위와 같이 연결되어 정확해야 합니다

마지막으로 반환된 것은 다음과 같습니다:

return str.toString();

구체적인 사용법은 공식 홈페이지에서도 확인하실 수 있습니다

http://layer.layui.com/

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 다른 기사에 주목하세요. PHP 중국어 웹사이트에 관련 기사가 있습니다!

추천 자료:

JS 타이머를 사용하여 진행률 표시줄 구현

vue-router 사용에 대한 자세한 설명

위 내용은 레이어 프런트 엔드 구성 요소 그림 표시 기능의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!