仅 jQuery 移动滑动内容答案

【问题标题】：jQuery mobile swipe content only仅 jQuery 移动滑动内容
【发布时间】：2013-02-17 10:08:57
【问题描述】：

所以我使用jquery mobile ui来做一个页面，向左/向右滑动，现在这对我不起作用，因为我只想滑动内容，而不是页面的entery body，我尝试使用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);
    }

  });

【问题讨论】：

请同时发布代码..

标签： jquery html css jquery-mobile

【解决方案1】：

你可以在这里作弊，有一种方法可以在 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>

还要记住，mobileinit 事件必须在 jQM js 加载之前初始化。

我也有一个这样的工作示例：http://jsfiddle.net/Gajotres/5gXKj/，这与上面的示例相同，但没有 jQM 页面标记增强。

【讨论】：

你最好给我一点时间来测试一下！
我在 iphone 上看到的唯一问题，当我向左滑动时，文本大小会像快照一样变小变大......
它会向前播放多张幻灯片......我想我需要解绑......但我不知道如何......
试试这个：jsfiddle.net/Gajotres/NV6Py，这应该可以防止多个事件绑定。还有其他防止多事件绑定的方法，您可以在我的其他答案/文章中找到它们：stackoverflow.com/a/14469041/1848600
为了防止snap向右我需要<meta name="viewport" content="width=device-width, initial-scale=1"/>现在就像一个魅力，上帝保佑你！我现在就接受！

【解决方案2】：

另一种方法是将固定的页眉/页脚固定在其位置，然后滑动将仅移动内容。

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/

【讨论】：