jQuery-jquery mobile 左右滑动效果

Question

jQuery Mobile滑动模块，就是滑动一小块，其他的区域不变，有什么方法吗？

目前看官方的demo只是整个页面的在移动..有没有办法只移动固定的模块?

就是：如果页面分为上中下结构的时候、只移动中间的

Answer 1

关键是每个容器头部<div>要加data-id="PersistentHeader"，然后链接<a>加上class="ui-btn-active ui-state-persist"，具体实现看下面的代码吧，实现了头部和导航无切换，而是页面内容切换

<div data-role="page" id="page1">
<div data-role="header" data-id="PersistentHeader" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#page1" data-transition="slide" class="ui-btn-active ui-state-persist">1</a></li>
<li><a href="#page2" data-transition="slide">2</a></li>
</ul>
</div>
</div>
<div data-role="content">
content 1
</div>
<div data-role="footer" data-id="PersistentFooter" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#page1" data-transition="slide" class="ui-btn-active ui-state-persist">1</a></li>
<li><a href="#page2" data-transition="slide">2</a></li>
</ul>
</div>
</div>
</div>

<div data-role="page" id="page2">
<div data-role="header" data-id="PersistentHeader" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#page1" data-transition="slide">1</a></li>
<li><a href="#page2" data-transition="slide" class="ui-btn-active ui-state- persist">2</a></li>
</ul>
</div>
</div>
<div data-role="content">
content 2
</div>
<div data-role="footer" data-id="PersistentFooter" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#page1" data-transition="slide">1</a></li>
<li><a href="#page2" data-transition="slide" class="ui-btn-active ui-state-persist">2</a></li>
</ul>
</div>
</div>
</div>

Answer 2

可以使用它提供的滑动事件,swiperight/swipeleft

$(".wrap").bind("swiperight", function(){
//...
});

然后可以通过Ajax或者其他方式来更新改区块的内容

Answer 3

可使用jquery mobile scollerview