layui中l(wèi)ayer前端組件實現(xiàn)圖片顯示功能的方法分析
更新時間：2017年10月13日 11:23:56 作者：弗蘭隨風(fēng)小歡
這篇文章主要介紹了layui中l(wèi)ayer前端組件實現(xiàn)圖片顯示功能的方法,結(jié)合實例形式分析了layui中l(wèi)ayer組件調(diào)用圖片顯示功能的操作方法與相關(guān)注意事項,并提供了layer與layui源碼下載,需要的朋友可以參考下
本文實例講述了layer前端組件實現(xiàn)圖片顯示功能的方法。分享給大家供大家參考，具體如下：
實現(xiàn)圖片顯示功能：layer
1.在這里介紹一種layer前端組件
layer是一款口碑極佳的web彈層組件，她具備全方位的解決方案，
致力于服務(wù)各個水平段的開發(fā)人員，您的頁面會輕松地擁有豐富而友好的操作體驗。
官網(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ù)端接口需嚴格按照下述格式返回
"status": 1, //請求的狀態(tài)，1表示成功，其它表示失敗
"msg": "", //狀態(tài)提示語
"title": "", //相冊標題
"id": number型, //相冊id
"start": 0, //初始顯示的圖片序號，默認0
"data": [ //相冊包含的圖片，數(shù)組格式
{
"name": "", //圖片名
"pid": number型, //圖片id
"src": "", //原圖地址
"thumb": "", //縮略圖地址
"area": [638, 851] //原圖寬高
}
]
}
利用如：
StringBuilder str = new StringBuilder();
的append方法按照上面的鏈接起來，一定要準確
最后返回的是如：
return str.toString();
具體的用法也可以到官方網(wǎng)站 http://layer.layui.com/中查看
另：layui完整源碼可點擊此處本站下載。
希望本文所述對大家基于layui框架的程序設(shè)計有所幫助。
相關(guān)文章
本文通過實例代碼給大家介紹了js同時按下兩個方向鍵的實現(xiàn)方法，感興趣的朋友跟隨腳本之家小編一起看看吧2007-12-12
JS自帶一套內(nèi)存管理引擎,負責(zé)創(chuàng)建對象、銷毀對象,以及垃圾回收,下面這篇文章主要給大家介紹了關(guān)于JavaScript垃圾回收機制的相關(guān)資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2021-11-11
這篇文章主要給大家介紹了關(guān)于前端處理二進制流文件導(dǎo)出為excel表的相關(guān)資料,后臺管理系統(tǒng),常會出現(xiàn)導(dǎo)出excel表格功能,需要的朋友可以參考下2023-08-08
javascript將16進制的字符串轉(zhuǎn)換為10進制整數(shù)hex
這篇文章主要介紹了javascript將16進制的字符串轉(zhuǎn)換為10進制整數(shù)hex,需要的朋友可以參考下2020-03-03
動態(tài)加載外部javascript文件的函數(shù)代碼分享
動態(tài)加載外部javascript文件的函數(shù)代碼分享，做個記錄備忘，方便查找。2011-07-07
webuploader分片上傳的實現(xiàn)代碼（前后端分離）
這篇文章主要介紹了webuploader分片上傳的實現(xiàn)代碼（前后端分離），小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)移動端拖動元素，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-11-11
JS實現(xiàn)數(shù)組內(nèi)值累加常見的3個方法
這篇文章主要給大家介紹了關(guān)于JS實現(xiàn)數(shù)組內(nèi)值累加常見的3個方法,文中通過實例代碼將3個方法介紹的非常詳細,對大家學(xué)習(xí)或者使用js具有一定參考借鑒價值,需要的朋友可以參考下2023-07-07
選項卡的原理其實比較簡單，就是設(shè)置2種狀態(tài)，選中和未選中的2中不同CSS狀態(tài)，因此也有直接不用JS之用css就能實現(xiàn)的效果2011-04-04
js和jquery實現(xiàn)tab狀態(tài)欄切換效果
這篇文章主要為大家詳細介紹了js和jquery實現(xiàn)tab狀態(tài)欄切換效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08