1

ページ間をスワイプするこのコードがあります。私のコンテンツは単純な画像です。

問題は、ヘッダーと画像の間の特定の領域でのみ、画像をスワイプできないことです。

しかし、画像の上でも次のページにスワイプしたいです。

どうすれば解決できますか？助けが必要

マイ コード HTML5:

<div data-role="page" id="p1">
    <div data-role="header" data-theme="a" data-position="fixed" data-id="footer">                      
  <h1>2013</h1>
    </div>
    <div data-role="content">
        <img src="imagens/HomePrincipal.jpg"/>
    </div>
    <div data-role="footer" data-position="fixed" data-id="footer">                  
   <h1>Footer</h1>
    </div>
  </div>

  <div data-role="page" id="p2">
    <div data-role="header" data-position="fixed" data-id="footer">                     
  <a href="#p1" data-icon="home" data-iconpos="notext">Home</a>
        <h1>2013</h1>
    </div>
    <div data-role="content">
        <img src="imagens/PrototipoAlternativo2.jpg"/>
    </div>
    <div data-role="footer" data-position="fixed" data-id="footer">              
     <h1>Footer</h1>
    </div>
  </div>

JavaScript:

$(document).on('swipeleft', '[data-role="page"]', function(event){    
    if(event.handled !== true) // This will prevent event triggering more then once
    {    
        var nextpage = $(this).next('[data-role="page"]');
        // swipe using id of next page if exists
        if (nextpage.length > 0) {
            $.mobile.changePage(nextpage, {transition: "slide", reverse: false}, true, true);
        }
        event.handled = true;
    }
    return false;         
});

$(document).on('swiperight', '[data-role="page"]', function(event){   
    if(event.handled !== true) // This will prevent event triggering more then once
    {      
        var prevpage = $(this).prev('[data-role="page"]');
        if (prevpage.length > 0) {
            $.mobile.changePage(prevpage, {transition: "slide", reverse: true}, true, true);
        }
        event.handled = true;
    }
    return false;            
});

CSS master.css:

.gridContainer {
    width: 88.2%;
    max-width: 1232px;
    padding-left: 0.9%;
    padding-right: 0.9%;
    margin: auto;
}
#test img{position:absolute;z-index:-1}

定型文.css:

img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }

そして私はjquery.mobile.1.2.0.min.cssを使用します

4

2 に答える 2

0

(コメントできません..) たぶん、画像はdivの上に置かれていますか? あなたがそれに到達できるように、画像の次にswipedivのCSS z-indexを低くしますか？

于 2013-04-02T13:57:09.437 に答える