jquery移动端图片预览

jQuery Mobile 提供了一种简单的方式来处理移动端的图片预览功能，通常会结合 HTML 的 `data-role` 属性以及 `img` 标签的事件处理。以下是一个基本步骤：

1. **HTML结构**:
使用 `data-role="popup"` 和 `data-rel="dialog"` 属性创建一个弹出层（popup），用于显示图片预览。例如：

   <a href="#previewModal" data-role="button" data-inline="true">查看大图</a>
   <div id="previewModal" data-role="popup">
     <div data-role="content">
       <img src="" class="preview-image" />
     </div>
   </div>

2. **JavaScript (jQuery Mobile)**:
使用 jQuery Mobile 的 `on` 或者 `.live` 方法绑定点击事件，并在弹出层里加载相应的图片：

   $(document).on('click', 'a[rel^="popup"]', function(e) {
     e.preventDefault();
     var imgURL = $(this).attr('href');
     $('#previewModal').find('.preview-image').attr('src', imgURL);
     $('#previewModal').popup('open');
   });

当你点击“查看大图”按钮时，它会阻止页面的默认跳转行为，然后设置弹出层内图片的 `src` 为所点击链接的 URL，最后打开弹出层展示图片。