layui中l(wèi)ayer前端組件實(shí)現(xiàn)圖片顯示功能的方法分析
本文實(shí)例講述了layer前端組件實(shí)現(xiàn)圖片顯示功能的方法。分享給大家供大家參考，具體如下：
實(shí)現(xiàn)圖片顯示功能：layer
1.在這里介紹一種layer前端組件
layer是一款口碑極佳的web彈層組件，她具備全方位的解決方案，
致力于服務(wù)各個(gè)水平段的開發(fā)人員，您的頁面會輕松地?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, //請求的狀態(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完整源碼可點(diǎn)擊此處本站下載。
希望本文所述對大家基于layui框架的程序設(shè)計(jì)有所幫助。
相關(guān)文章
本文通過實(shí)例代碼給大家介紹了js同時(shí)按下兩個(gè)方向鍵的實(shí)現(xiàn)方法，感興趣的朋友跟隨腳本之家小編一起看看吧2007-12-12
JS自帶一套內(nèi)存管理引擎,負(fù)責(zé)創(chuàng)建對象、銷毀對象,以及垃圾回收,下面這篇文章主要給大家介紹了關(guān)于JavaScript垃圾回收機(jī)制的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-11-11
前端處理二進(jìn)制流文件導(dǎo)出為excel表代碼示例
這篇文章主要給大家介紹了關(guān)于前端處理二進(jìn)制流文件導(dǎo)出為excel表的相關(guān)資料,后臺管理系統(tǒng),常會出現(xiàn)導(dǎo)出excel表格功能,需要的朋友可以參考下2023-08-08
javascript將16進(jìn)制的字符串轉(zhuǎn)換為10進(jìn)制整數(shù)hex
這篇文章主要介紹了javascript將16進(jìn)制的字符串轉(zhuǎn)換為10進(jìn)制整數(shù)hex,需要的朋友可以參考下2020-03-03
動(dòng)態(tài)加載外部javascript文件的函數(shù)代碼分享
動(dòng)態(tài)加載外部javascript文件的函數(shù)代碼分享，做個(gè)記錄備忘，方便查找。2011-07-07
webuploader分片上傳的實(shí)現(xiàn)代碼（前后端分離）
這篇文章主要介紹了webuploader分片上傳的實(shí)現(xiàn)代碼（前后端分離），小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09
JavaScript實(shí)現(xiàn)移動(dòng)端拖動(dòng)元素
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)移動(dòng)端拖動(dòng)元素，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-11-11
JS實(shí)現(xiàn)數(shù)組內(nèi)值累加常見的3個(gè)方法
這篇文章主要給大家介紹了關(guān)于JS實(shí)現(xiàn)數(shù)組內(nèi)值累加常見的3個(gè)方法,文中通過實(shí)例代碼將3個(gè)方法介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用js具有一定參考借鑒價(jià)值,需要的朋友可以參考下2023-07-07
Javascript 自適應(yīng)高度的Tab選項(xiàng)卡
選項(xiàng)卡的原理其實(shí)比較簡單，就是設(shè)置2種狀態(tài)，選中和未選中的2中不同CSS狀態(tài)，因此也有直接不用JS之用css就能實(shí)現(xiàn)的效果2011-04-04
js和jquery實(shí)現(xiàn)tab狀態(tài)欄切換效果
這篇文章主要為大家詳細(xì)介紹了js和jquery實(shí)現(xiàn)tab狀態(tài)欄切換效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08