Jquery mobile 如何设计滑动页面导航？

我们希望使用几个具有水平转换的页面，这些转换将由滑动事件触发。我想这是很常见的，但我找不到一个好方法来向用户表明，右击可以到达另一个页面。因此，我的问题是：

1） 有没有一个JQuery移动演示程序可以很好地解决这个问题？向用户拼写“向右滑动以查看联系人”是不优雅的

2） 我认为Windows Phone全景图很好地解决了这个问题，它在屏幕的右边缘显示了一点其他页面。这会浪费一些空间，但从直觉上看，你必须向右滚动才能看到更多。这在jQM中可行吗？

我为jqmv1.3编写的这个示例在滑动时指示当前页面

这是密码

css

上面您看到的pop1到pop8是您拥有的页面数，因此如果您有2个页面，则使用pop1和pop2，如果您有15个页面，则使用pop1到pop15

现在考虑到移动设备的屏幕宽度，10个气泡非常适合iphone。我没有试过更多，但在平板电脑上你可能更适合。因此，考虑改变CCS圆圈大小并设置较小的字体大小。< /P> 把这个放在你的书页里

  <div data-role="popup" id="pop2" data-theme="a">
  <table width="100%">
  <tr>         
  <td><div id="circleb"><a>1</a></div></td>
  <td><div id="circle"><a>2</a></div></td>
  <td><div id="circleb"><a>3</a></div></td>
  <td><div id="circleb"><a>4</a></div></td>
  <td><div id="circleb"><a>5</a></div></td>
  <td><div id="circleb"><a>6</a></div></td>
  <td><div id="circleb"><a>7</a></div></td>
  <td><div id="circleb"><a>8</a></div></td>
  </tr>
  </table>
  </div>

现在代码是针对第一页的，所以您需要为每个页面重复代码，就像针对第二页一样

 $( '#page2' ).live( 'pageshow',function(event){
  setTimeout(function () {
  $( "#pop2" ).show();
  }, 100); 
  setTimeout(function () {
  $( "#pop2" ).hide();
 }, 1500); 
 });

重复到你有多少页

确保您的data role=“page”具有与上述代码类似的id

 <div data-role="page" id="page1" data-theme="a" data-dom-cache="true" >

---

就这样

在屏幕底部为每页显示一个点，就像在iPhone上一样。当前页面的点会高亮显示，以便您知道自己在哪里。我认为它们有时被称为分页点。@ezanker:是的，就像在一些图片画廊中一样。不像Windows Phone解决方案那样直观，但工作量要小得多。我只是想确保它在尽可能多的设备上被理解，因为我的经验是，用户通常不知道刷卡。有了点，他们也可以点击点来导航。下面是一个点导航的例子，你可以结合滑动来导航以及编辑：演示与滑动你可以在屏幕两侧创建透明按钮来通知用户在这之后有一个页面。稍后我会发布一个更详细的答案。这里有一个想法，谢谢。检查Omar的评论-它们包含了最好的答案。无论如何，我接受这个答案，设计得很好。

 $( '#page2' ).live( 'pageshow',function(event){
  setTimeout(function () {
  $( "#pop2" ).show();
  }, 100); 
  setTimeout(function () {
  $( "#pop2" ).hide();
 }, 1500); 
 });

 <div data-role="page" id="page1" data-theme="a" data-dom-cache="true" >