采用輪播控件對(duì)表格中的圖片文件進(jìn)行展示,當(dāng)點(diǎn)擊表格中的圖片文件時(shí),使用輪播控件(Swiper)顯示指定的圖片,同時(shí),可以左右翻頁,前后瀏覽所有的圖片。
(1)使用JS創(chuàng)建Swiper的軀干(Swiper相當(dāng)于靈魂,靈魂必須依附肉體才能起作用)。
__createPreviewHtml: function(){ if($('#__sc1').length>0) return; var html = '<p id="__sc1" class="swiper-container" style="z-index:9999;">' + ' <a href="javascript:void(0);" id="__sc_closeBtn" class="closeBtn" title="close"> X </a>' + ' <p class="swiper-wrapper"> ' + '</p> ' + '<p class="swiper-pagination"></p>' + '<p class="swiper-button-prev"></p>' + '<p class="swiper-button-next"></p>' + '</p>'; $(document.body).append(html); $('#__sc_closeBtn').on('click',this.__hidePreviewBox); }
(2)遍歷表格中的圖片文件,并塞入Swiper的軀干,獲取點(diǎn)擊圖片文件的索引號(hào)(index),URL(通過文件ID唯一標(biāo)識(shí))。
var index = 0; var i = 0; me._grid.findRow(function(row){ var fileId2 = row.fileId; var fileName2 = row.fileName.toLowerCase(); if(fileName2 && imgReg.test(fileName2)==true){ if(fileId == fileId2){ index = i; } var picParam = me.fileService + "/preview?fileId=" + encodeURIComponent(fileId2); var imgHtml = '<img src="' + picParam + '"/>'; var $slide = $('<p class="swiper-slide">' + imgHtml + '</p>'); $('.swiper-wrapper').append($slide); i++; } }); if(typeof(mySwiper) != 'undefined'){ mySwiper.removeAllSlides(); }
(3)創(chuàng)建Swiper控件,同時(shí)使用Swiper的slideTo(index)方法定位到指定的位置,顯示圖片。
//$('.swiper-pagination span').eq(index).trigger('click'); });
聲明:本網(wǎng)頁內(nèi)容旨在傳播知識(shí),若有侵權(quán)等問題請及時(shí)與本網(wǎng)聯(lián)系,我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com