Question

所以我用jquery mobile ui做了一个页面，向左/向右滑动，现在这对我来说不起作用，因为我只想刷一下内容，而不是刷页面的肠体，我试着用data-role="content"但是只有data-role="page"它不再有用了是否可以使用滑动动画，但仅适用于内容？

我有一些<article>，我想向左/向右滑动....但我不想刷头和其他东西......只是中间部分。

如果是posibile，还要禁用那个愚蠢的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);
    }

  });

Answer 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>

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

我还有一个有效的例子：http://jsfiddle.net/Gajotres/5gXKj/，这是一个与前一个相同的例子，但没有jQM页面标记增强。

Answer 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/

jQuery移动滑动内容

2 个答案: