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