layui中l(wèi)ayer前端組件實(shí)現(xiàn)圖片顯示功能的方法分析
本文實(shí)例講述了layer前端組件實(shí)現(xiàn)圖片顯示功能的方法。分享給大家供大家參考，具體如下：
實(shí)現(xiàn)圖片顯示功能：layer
1.在這里介紹一種layer前端組件
layer是一款口碑極佳的web彈層組件，她具備全方位的解決方案，
致力于服務(wù)各個(gè)水平段的開(kāi)發(fā)人員，您的頁(yè)面會(huì)輕松地?fù)碛胸S富而友好的操作體驗(yàn)。
官網(wǎng)下載地址：http://layer.layui.com/
或者點(diǎn)擊此處本站下載。
里面有具體的使用方法
這里注意幾點(diǎn)：在使用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文件應(yīng)該在jquery后面引入，因?yàn)閘ayer.js是基于jquery.js的！
2.json
實(shí)現(xiàn)圖片顯示功能還需要json：
具體的用法如下：
{ //您服務(wù)端接口需嚴(yán)格按照下述格式返回
"status": 1, //請(qǐng)求的狀態(tài)，1表示成功，其它表示失敗
"msg": "", //狀態(tài)提示語(yǔ)
"title": "", //相冊(cè)標(biāo)題
"id": number型, //相冊(cè)id
"start": 0, //初始顯示的圖片序號(hào)，默認(rèn)0
"data": [ //相冊(cè)包含的圖片，數(shù)組格式
{
"name": "", //圖片名
"pid": number型, //圖片id
"src": "", //原圖地址
"thumb": "", //縮略圖地址
"area": [638, 851] //原圖寬高
}
]
}
利用如：
StringBuilder str = new StringBuilder();
的append方法按照上面的鏈接起來(lái)，一定要準(zhǔn)確
最后返回的是如：
return str.toString();
具體的用法也可以到官方網(wǎng)站 http://layer.layui.com/中查看
另：layui完整源碼可點(diǎn)擊此處本站下載。
希望本文所述對(duì)大家基于layui框架的程序設(shè)計(jì)有所幫助。
相關(guān)文章
JS sort方法基于數(shù)組對(duì)象屬性值排序
這篇文章主要介紹了JS sort方法基于數(shù)組對(duì)象屬性值排序,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-07-07
mpvue網(wǎng)易云短信接口實(shí)現(xiàn)小程序短信登錄的示例代碼
這篇文章主要介紹了mpvue網(wǎng)易云短信接口實(shí)現(xiàn)小程序短信登錄的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
這篇文章主要為大家分享了我們有必要知道的25個(gè)JavaScript面試題。想要順利通過(guò)面試的朋友可以參考一下2015-12-12
Bootstrap每天必學(xué)之按鈕，本文講解的就是大家最為常用的button按鈕的樣式，感興趣的小伙伴們可以參考一下2015-11-11
走進(jìn)javascript——不起眼的基礎(chǔ)，值和分號(hào)
本文主要介紹了javascript的基礎(chǔ)知識(shí)--值和分號(hào)，具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-02-02
這篇文章主要為大家詳細(xì)介紹了canvas操作插件fabric.js的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-03-03
JavaScript設(shè)計(jì)模式--簡(jiǎn)單工廠模式定義與應(yīng)用案例詳解
這篇文章主要介紹了JavaScript設(shè)計(jì)模式--簡(jiǎn)單工廠模式定義與應(yīng)用,結(jié)合具體案例形式詳細(xì)分析了JavaScript設(shè)計(jì)模式中簡(jiǎn)單工廠模式基本概念、定義、用法與相關(guān)注意事項(xiàng),需要的朋友可以參考下2020-05-05
多選列表框動(dòng)態(tài)添加,移動(dòng),刪除,全選等操作的簡(jiǎn)單實(shí)例
本篇文章主要是對(duì)多選列表框動(dòng)態(tài)添加,移動(dòng),刪除,全選等操作的簡(jiǎn)單實(shí)例進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-01-01
這篇文章主要介紹了微信小程序如何連接Java后臺(tái),文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-08-08
在js中，如何去除指定數(shù)組中的重復(fù)元素？2010-05-05