如何设计滑动页面导航？

Question

我们希望使用具有水平转换的多个页面，这些页面将通过滑动事件触发。我想这很安静，但我找不到的是向用户表明还有另一个页面可以通过右键滑动到达的好方法。所以我的问题是：

1）是否有一个JQuery Mobile演示，并且有一个很好的解决方案？向用户拼出“向右滑动以查看联系人”并不优雅。

2）我认为Windows Phone全景图通过在屏幕右边显示一小部分其他页面来很好地解决这个问题。这浪费了一些空间，但直观地说明你必须以某种方式向右滚动才能看到更多。这对jQM有用吗？

Answer 1

我为JQM V1.3编写的这个示例，表示滑动时的当前页面。

这是代码

CSS

#circle { width: 28px; height: 28px; border-radius: 35px; font-size: 12px; color: white; line-height: 28px; text-align: center; background: rgba(0, 180, 255, 0.8); margin:0 auto; }
#circleb { width: 25px; height: 25px; border-radius: 35px; font-size: 12px; color: white; line-height: 25px; text-align: center; background: rgba(0, 0, 0, 0.8); margin:0 auto; }

#pop1, #pop2, #pop3, #pop4, #pop5, #pop6, #pop7, #pop8 { position:fixed; bottom:0px; right: 0%; left: 0%; width: 100%; }

你在上面看到的pop1到pop8是你有多少页面，所以如果你有2个页面然后使用pop1和pop2，或者如果你有15个，那么pop1到pop15。

现在考虑到移动设备的屏幕宽度，10个气泡非常适合iPhone。我没有尝试过更多但是在平板电脑上你可能更适合。因此，请考虑更改ccs圆圈大小并设置较小的字体大小。

把它放在你的页面内

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

确保更改id =＆＃34; pop（数字）＆＃34;对于每个页面。以上是第2页（pop2） 还要在表格上做一个注释id =＆＃34; circle＆＃34;是活跃的蓝色，id =＆＃34; circleb＆＃34;是黑色，所以改变每页

并在页面的头部添加此javascript

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

现在该代码适用于第一页，因此您需要为每个页面重复代码，例如第二页，请说

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

重复你有多少页

确保您的数据角色=＆＃34;页面＆＃34;有与上述代码相关的ID

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

那就是