4

だから私はjqueryモバイルUIを使用してページを作成し、左/右にスワイプしましたが、ページのエントリーボディではなくコンテンツのみをスワイプしたいだけなので、これはうまくいきませんでした。使用しようとしましdata-role="content"たが、そうではありませんそのスワイプdata-role="page"アニメーションを使用することは可能ですが、コンテンツに対してのみ機能しますか?

私はいくつか持っていて<article>、それらを左右にスワイプしたい....しかし、ヘッダーやその他のものをスワイプしたくない..ちょうど真ん中のセクション。

また、可能であれば、そのばかげたjqueryモバイルテーマを無効にします。

//ル

コード構造

<header data-role="header"> .... </header>
 <section>
  <!-- only this part I want to swipe, one article at a time -->
  <article data-role="page"> .....  </article>
  <article data-role="page"> .....  </article>
  <article data-role="page"> .....  </article>
  <article data-role="page"> .....  </article>
  <!-- only this part I want to swipe, one article at a time -->
</section>
<footer> ... </footer>

  $('article').bind("swipeleft", function(){
    var nextpage = $(this).next('article[data-role="page"]');
    // swipe using id of next page if exists
    if (nextpage.length > 0) {
      $.mobile.changePage(nextpage, {transition: "slide",
    reverse: false}, true, true);
    }

  });

  $('article').bind("swiperight", function(){
    var prevpage = $(this).prev('article[data-role="page"]');
    if (prevpage.length > 0) {
    $.mobile.changePage(prevpage, {transition: "slide",
    reverse: true}, true, true);
    }

  });
4

2 に答える 2

11

ここでごまかすことができます.jQMでページを変更する方法がありますが、コンテンツだけが変更されたように見せます. すべてのヘッダーとすべてのフッターにdata-id="footer"属性を配置すると、これを行うことができます。

動作する jsFiddle の例を作成しました: http://jsfiddle.net/Gajotres/NV6Py/

<!DOCTYPE html>
<html>
<head>
  <title>Share QR</title>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>     
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />   
  <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>

<body>

  <article data-role="page" id="article1">
    <div data-role="header" data-theme="b" data-position="fixed" data-id="footer">
      <h1>Articles</h1>
    </div>
    <div data-role="content">
      <p>Article 1</p>
    </div>
    <div data-role="footer" data-theme="b" data-position="fixed" data-id="footer">
      <h1>Footer</h1>    
    </div>
  </article>

  <article data-role="page" id="article2">
    <div data-role="header" data-theme="b" data-position="fixed" data-id="footer">
      <a href="#article1" data-icon="home" data-iconpos="notext">Home</a>
      <h1>Articles</h1>
    </div>
    <div data-role="content">
      <p>Article 2</p>
    </div>
    <div data-role="footer" data-theme="b" data-position="fixed" data-id="footer">
      <h1>Footer</h1>
    </div>
  </article>

  <article data-role="page" id="article3">
    <div data-role="header" data-theme="b" data-position="fixed" data-id="footer">
      <a href="#article1" data-icon="home" data-iconpos="notext">Home</a>
      <h1>Articles</h1>
    </div>
    <div data-role="content">
      <p>Article 3</p>
    </div>
    <div data-role="footer" data-theme="b" data-position="fixed" data-id="footer">
      <h1>Footer</h1>
    </div>
  </article>

</body>
</html>

jQM ページのスタイリングを防止したい場合は、data-enhance="false"属性を使用してそれを行うことができます。ページ/記事コンテナーに配置し、次のように初期化する必要があります。

<script>
    $(document).on('mobileinit', function () {
        $.mobile.ignoreContentEnabled = true;
    });
</script>

また、jQM js をロードする前にmobileinitイベントを初期化する必要があることにも注意してください。

これの実例もあります: http://jsfiddle.net/Gajotres/5gXKj/、これは上の例と同じですが、jQM ページのマークアップ拡張はありません。

于 2013-02-17T11:07:04.093 に答える
1

もう 1 つの方法は、固定ヘッダー/フッターをその位置に固定すると、スライドがコンテンツのみを移動することです。

HTML:

<body>

<div id="site-header"> My fixed-position header </div>

<div data-role="page" id="pageone">
    ...
    <a href="#pagetwo" data-transition="slide">Slide to Page Two</a>
    ...
</div> 

<div data-role="page" id="pagetwo">
    ...
    <a href="#pageone">Go to Page One</a>
    ...
</div>

</body>

CSS:

#site-header {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    z-index: 1;
}

参照: http://www.artandlogic.com/blog/2013/11/jquery-mobile-transitions-static-vs-dynamic-content-part-ii/

于 2015-04-13T18:51:03.137 に答える