列表視圖與tumbnails，彈出圖像上按

我想添加一些代碼，以便當用戶按下縮略圖時，該圖片彈出或類似的東西，所以它可以被視爲'全屏'。列表視圖與tumbnails，彈出圖像上按

<ul data-role="listview"> 
    <li data-icon="false"><a href="next.php?pic=1"> 
     <div class="ui-block-a" style="width:50%"><p class="pic-wrapper"><img class="popphoto" src="images/pic1.png" width="150" height="150" /></p></div> 
     <div class="ui-block-b" style="width:50%"><h3>Test</h3></div> 
    </a></li> 
    <li data-icon="false"><a href="next.php?pic=2"> 
     <div class="ui-block-a" style="width:50%"><p class="pic-wrapper"><img src="images/pic2.png" width="150" height="150"/></p></div> 
     <div class="ui-block-b" style="width:50%"><h3>Test</h3></div> 
    </a></li> 
</ul>

我發現了一些信息here但我盤算由於該表的整個小區是一個鏈接/點擊，它與TUMBNAIL鏈接衝突。

我該如何做到這一點？

來源

2013-12-11 Joetjah

在這種情況下，'上（「點擊「，function（e）{e.target}）;'檢索單擊的元素，然後將其放入一個彈出窗口中。 – Omar

查看本演示http://jsfiddle.net/Palestinian/mLgmz/ – Omar

@Omar感謝您的輸入！我得到了這一點。但是，例如，當您放入'google.com'時，不要讓單元格鏈接到'＃'，否則您的代碼不再有效。整個單元格現在可以點擊並打開彈出窗口代碼......這也是我最終選擇的地方。 – Joetjah

click綁定事件 - 或任何其他事件 - 到li並檢查是否點擊的元件（e.target）具有popupimg類。如果爲true，preventDefault()，請在彈出窗口中修改圖像，然後以編程方式打開它。

$(document).on("pageinit", "#page_id", function() { 
    $("li").on("click", function (e) { 
     if ($(e.target).hasClass("popphoto")) { 
      e.preventDefault(); 
      var photo = $(e.target).attr("src"); 
      $("#popupimg").find("img").attr("src", photo); 
      $("#popupimg").popup({ 
       "dismissible": false // optional 
      }).popup("open"); 
      // adjust popup and img height on resize 
      $("#popupimg").on("popupbeforeposition", function() { 
       var maxHeight = $(window).height() - 60 + "px"; 
       $("#popupimg, #popupimg img").css("max-height", maxHeight); 
      }); 
     } 
    }); 
});

HTML

<div data-role="popup" id="popupimg" data-overlay-theme="a" data-corners="false"> 
    <a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a> 
    <img src="" /> 
</div>

Demo

來源

2013-12-14 22:39:10 Omar

列表視圖與tumbnails，彈出圖像上按

回答

相關問題