2011-11-18 17 views
3

大きな問題に遭遇しました。私のモバイルサイトでは、#imagelocationコードを使用して同じ画像に同じ画像をリンクしていますが、jQuery Mobileでは#を使用してjQuery Mobileの外部ページの特定の部分にジャンプするための回避策はありますか?感謝:)jqueryでアンカーする方法は?

Page1の抜粋:

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

Page2のスニペット:

<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> 
関連する問題