jQuery Mobile 是一款基于 jQuery 的移動端框架,它提供了很多方便的組件。其中,圖片瀏覽組件是常用的一種,可以幫助開發者在移動端實現類似于相冊的瀏覽體驗。
首先在 HTML 文件中,我們需要引入 jQuery Mobile 的資源:
<!-- jQuery --> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <!-- jQuery Mobile --> <link rel="stylesheet" > <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
接著,在需要添加圖片瀏覽的頁面中添加一個容器,通常是一個 div 標簽:
<div data-role="page"> ... <div id="image-gallery" data-role="popup"> <img src="#"> </div> </div>
其中,data-role="page" 的 div 用于定義一個 jQuery Mobile 頁面,而 data-role="popup" 的 div 則用于定義一個彈出窗口,用于顯示大圖。img 標簽的 src 屬性暫時先設置為 "#",后續 jQuery 代碼中再進行設置。
最后,在 JavaScript 文件中使用 jQuery 選擇器和圖片地址數組來實現圖片瀏覽功能:
$(function() { var imageUrls = ['img1.jpg', 'img2.jpg', 'img3.jpg']; // 圖片地址數組 $.each(imageUrls, function(index, value) { // 動態創建圖片元素,并添加到頁面上 var img = '<img src="' + value + '">'; $('#image-gallery').append(img); // 為圖片元素綁定點擊事件,顯示彈出窗口 $('#image-gallery img').eq(index).on('tap', function() { $(this).parent().popup('open'); }); }); });
在以上代碼中,我們使用了 $ 函數來獲取頁面中的 #image-gallery 元素,并使用 append 方法向其中添加 img 元素。接著,我們為每個 img 元素綁定了 tap 事件,在事件響應函數中使用 popup 方法調用彈出窗口,并將當前 img 元素的父元素傳入。
這樣,我們就使用 jQuery Mobile 實現了一個簡單的圖片瀏覽功能,讓移動端用戶可以方便地查看圖片。