jQuery Mobile是一個使用HTML5和CSS3技術構建基于移動設備的用戶界面的開源框架。其中的Gallery組件提供了在移動設備上瀏覽圖片的功能,同時還支持手勢操作和縮放。
<div data-role="page"> <div data-role="header"> <h1>Gallery Demo</h1> </div> <div data-role="content"> <ul data-role="listview" id="gallery"> <li><a href="img1.jpg"><img src="img1_thumb.jpg" alt="Image 1"></a></li> <li><a href="img2.jpg"><img src="img2_thumb.jpg" alt="Image 2"></a></li> <li><a href="img3.jpg"><img src="img3_thumb.jpg" alt="Image 3"></a></li> </ul> </div> <div data-role="footer"> <h1>Footer content</h1> </div> </div> <script> $(document).on('pageinit', function(){ $('#gallery').on('click', 'a', function(event){ event.preventDefault(); var image = $(this).attr('href'); var img = '<img src="' + image + '">'; $('#popup').html(img).popup('open'); }); $('#popup').on('popupafterclose', function(){ $('#popup').empty(); }); }); </script> <div data-role="popup" id="popup" data-overlay-theme="a" data-theme="a" data-corners="false" data-tolerance="15,15"> <a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a> </div>
如上面的代碼所示,通過在列表中嵌套鏈接和圖像,就可以創建一個簡單的圖庫。當用戶點擊縮略圖時,會彈出一個包含所選圖像的彈窗。這個彈窗支持手勢操作和縮放,讓用戶可以更好地查看圖像。