4

所以我使用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);
    }

  });
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"属性来实现，它必须放在 page/article 容器中并使用以下内容进行初始化：

<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

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

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 回答