2011-11-18 3 views
3

모바일 웹 사이트에서 큰 문제가 발생했습니다. #imagelocation 코드를 사용하여 동일한 이미지에 동일한 이미지에 링크 된 이미지가 있지만 jQuery Mobile에서는 #을 사용하여 특정 부분으로 건너 뛸 수 없습니다. 현재 다른 HTML 파일에있는 페이지를 jQuery Mobile에서 외부 페이지의 특정 부분으로 이동하려면 어떻게해야합니까? 감사합니다 :)jquery에 앵커를 지정하는 방법은 무엇입니까?

페이지 1 조각 :

<a href="otherpage.html#2"><img src="imagelocation/2.jpg"></a> 

페이지 2 조각 :

<a rel="external" href="imagelocation/22.jpg"> 
<img src="imagelocation/2.jpg"><br> 
Description<br> <br> 
<a name="2"></a> 

답변

1

내가 좀 해킹 알고 있지만이 같은 것을 할 수있는 :

JS

$('.displayImage').click(function() { 
    var selectedImage = $(this).attr('id'); 
    var showImage = selectedImage.split('-'); 
    var image = showImage[1]; 

    $('#imageSelected').val(image); 
}); 

$('#image').live('pageshow',function(event, ui){ 
    var id = $("#imageSelected").val(); 
    var imagePosition = $('#'+id).position(); 

    $.mobile.silentScroll(imagePosition.top); 
}); 

HTML

<div data-role="page" id="home"> 
    <div data-role="content"> 

     <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f"> 
      <li data-role="list-divider">Overview</li> 
      <li><a href="#image" id="show-image1" class="displayImage">Show Image 1</a></li> 
      <li><a href="#image" id="show-image2" class="displayImage">Show Image 2</a></li> 
      <li><a href="#image" id="show-image3" class="displayImage">Show Image 3</a></li>    
     </ul> 

     <input type="hidden" id="imageSelected" value="image1" /> 

    </div> 
</div> 

<div data-role="page" id="image"> 
    <div data-role="content"> 

     <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f"> 
      <li data-role="list-divider">Overview</li> 
      <li><a href="#home">Go Home</a></li>   
     </ul> 

     <br /> 
     <br /> 
     <br /> 
     <br /> 
     <br /> 
     <img src="http://mostelegantflower.com/wp-content/uploads/2011/08/daffodil-elegant-flowers-1-150x150.jpg" id="image1" alt="Angry face" /> 
     <br /> 
     <br /> 
     <br /> 
     <br /> 
     <br /> 
     <img src="http://www.fiftyflowers.com/site_files/FiftyFlowers/Image/Product/Light_Pink_Peonies_Flower_150.jpg" id="image2" alt="Angry face" /> 
     <br /> 
     <br /> 
     <br /> 
     <br /> 
     <br /> 
     <img src="http://www.whats-your-sign.com/images/LilyFlowerMeanings.jpg" id="image3" alt="Angry face" /> 

    </div> 
</div> 
관련 문제